How to provide an icon for a dexterity type with Plone 5

Question

icon_expr is gone.

There is an related issue https://github.com/plone/Products.CMFPlone/issues/1236 concerning the problem but only for control-panel icons.

What is the appropriate way to add a icon to a dexterity content type in plone 5?

Any pointer welcome

Volker

Samos

Answer 1

Unluckily the Plone 5 way is only through CSS (with a background image for example) and register it in the new resource registry.

One way I tested is to re-use Fontello, like Barceloneta is doing but is not really simple because you must manually modify the generated CSS to prevent you new CSS to destroy other global rules. An example is here: https://github.com/RedTurtle/TurtledGazette/tree/master/Products/PloneGazette/browser/static (it's not even Dexterity or Archetypes, but this is not important).

Note. I don't really understand this run to CSS and iconfont. It's a kind of over-optimization:

• old school images can still be cached
• background images are not really accessible as real images provided also an "alt" for blind people, that warn about the content type.

I don't like current situation too much... it's OK while you are developing a theme but is a nightmare for add-ons developers.

Bergen

Should it not be possible to use CSS to use a background-image PNG (not a glyph), and just have the selector tied to the specific portal_type of the add-on? This should be possible in just an add-on CSS, not requiring messing with theme, no? – Venetis

@Venetis yes, you must provide a tiny CSS for the contenttype-xxx selector. Then you enter in the world where every new add-on that add content types must provide a new CSS, and choose to which bundle add it. – Bergen

Thank you so much Keul! Without your help it have been impossible. – Samos

With your help It only took me three hours to implement my add-on icon via fontello to the Configlett and the content types. :-( Scalable SVG-Icons have some appeal at first - but in thruth they are implemented as glyphs with all limitations a glyph has (B/W, one single path etc.). Also I see no optimization at all in putting icons in fonts. Each add-on package has to implement its own webfont to prevent clashes with other fonts. In my case its a font with a single Icon, yet. – Samos

@user4024642 yes, you get the point. Unluckily is not simple to have both easy modern-era theming for Plone and easy contenttype stylish. – Bergen

Answer 2

Beneath the update of an actual fontello font, you can limit yourself to enhance the icon configuration.

From the Products.CMFPlone package you can get the current icon font config file "config.json"

/Products/CMFPlone/static/fonts/config.json

• To review the content of the file visually, go to the fontello.com website and visit the menu under the "wrench" icon.
• Reset all icon selections and settings you may have done before.
  • Unselect glyphs
  • Reset all changes
• Use Import to load the config.json file from CMFPlone.
• Review the icons, names, codes and shapes
• Look at the source code of config.json and locate icons not referencing a font but containing plain svg path information.

You will figure out that even glyphs can contain multiple path elements and holes as well.

Try to overload just the config.json file in your package by appending your custom icon as plain svg in the json and choose a non conflicting unicode char code. I am still working on documenting this in detail.

Source: I found a hint to this by Victor Fernandez de Alba mentioning this method in his talk [2] (see transscript [1]) during Plone Conf Bucharest:

1. http://maurits.vanrees.org/weblog/archive/2015/10/victor-fernandez-de-alba-plone-5-theming
2. http://www.slideshare.net/sneridagh/plone-5-theming-53980481 Slide 12

Reece