Guest blog Fred: Sally Kleinfeldt: Leading with Lead images

The old saying: The cobblers' children have no shoes....

Our own website (Jazkarta) was so outdated, we had to fix it. Now we finally did an upgrade and went straight to Plone 5. There were multiple requirements: more imagery, have tiled landing pages, responsive. To get this together we got together and organised a sprint.

The ingredients for the new site: Dexterity types and behaviors. plone.app.imagecropping, collective.cover, collective.relatedslider and collective.isotope.

With Dexterity, we created two new content types: Projects and Team members. Projects store metadata on the projects with classifications like project type, technology, Location of the project customer. The team members capture the more personal feeling of our company, show who we are.

Critical Dexterity behaviors:

• Images: Use them on Images, projects and team members.
• Related items: for pages, projects and team members.
• The collection behavior was also installed on pages, projects and team members.
• A new behaviour related slider was added as well.

Jazkarta upgraded collective.cover for Plone 5. There's a branch to support it, but it still has to be merged.

collective.relatedslider piggybacks on the related items and collection behaviors to show a slider on the page. Manual items can be done through the related items. But you can add the collection behavior and enter criteria for selecting the items in the slider. relatedslider creates a viewlet below the content. JqueryTools Scrollable from plone.app.jquerytools then shows the image.

collective.isotope provides a new view for Folder and Collection types, using the Isotope Javascript plugin: http://isotope.metafizzy.co. It has an open source license. Demo: it is similar to a faceted search, but then for a smaller number of items with a nice animated behavior, filter on categories, sort by property. It provides vertical and tiled formats, uses the Catalog metadata for filtering and dynamic sorting is on the TODO list. To control the view there are site wide settings.

How to set up the site: define the crop sizes to fit the design. Then start adding content with images. plone.app.imagecropping then allows you to create different crops for every lead image, thumbs for the related sliders and isotope, but preview sizes for, for example, cover tiles. plone.app.imagecropping is awesome and should be in core, but it needs some work. You sometimes don't see when you remove cropping information you have set before and there are some caching issues. Lots of frustation while doing content editing.

Reflections on Plone 5: Nice editing experience with a few glitches. While doing content editing Sally hits view instead of edit and vice versa. And there are no icons visible for add-ons in the toolbar, like collective cover's compose and layout views. The new markup on the Barceloneta thema makes theming easier with less, modifying variables. But the new toolbar makes responsive editing a pain: a fourth column you have to take into account, for example with setting breakpoints.

Questions: About the break points, there are css classes you can use to set up the breakpoints, which you can use with Barceloneta.

[Thanks to Fred van Dijk for this guest blog.]