leading with lead images

Friday, October 23, 15

The Cobbler’s Children Have No Shoes


Requirements

• More imagery, visual appeal

• Tiled landing pages that are easy to change

• Responsive

• Use Plone 5


Key Ingredients

• Dexterity types

• Dexterity behaviors

• plone.app.imagecropping

• collective.cover

• collective.relatedslider NEW

• collective.isotope NEW


Dexterity Types

• Plone 5 types

• Projects

• Team Members


Dexterity behavior: Image

• Images

• Projects

• Team Members


Dexterity behavior: RelatedItems

• Pages

• Projects

• Team Members


Dexterity behavior: Collection

• Pages

• Projects

• Team Members


Dexterity behavior: RelatedSlider

• Pages

• Projects

• Team Members


collective.cover

• Upgraded for Plone 5

• CSS classes to support:

• Full width banner images

• Plain basic tiles with mouseover

• Image basic tiles with mouseover

• Rich text tiles with vertical centering


collective.relatedslider

• Provides RelatedSlider behavior for Dexterity content

• Piggybacks on RelatedItems or Collection behaviors (plone.app.contenttypes) for related content selection



• Related content selection can be

• Manual (RelatedItems)

• With criteria (Collection)

• Choice of related content source made on edit form



• Adds a viewlet below the content area when slider is enabled

• Uses JQueryTools Scrollable (plone.app.jquerytools) to provide a responsive manually triggered slider for related content (images and/or text)



• Could be extended to support display of related items on AT content


collective.isotope

• Provides a new view for Folder and Collection types (plone.app.contenttypes)

• Uses the Isotope javascript plugin (http://isotope.metafizzy.co)

• Open source license


http://isotope.metafizzy.co




Isotope Demo


collective.isotope

• Provides vertical and tiled formats

• Uses catalog metadata columns for filtering

• Will eventually support dynamic sorting


collective.isotope

• Site wide settings

• Control which columns are available

• Give custom names to the columns

• Choose which layout to use

• masonry, columns, vertical

• More configuration settings coming


collective.isotope

• Per collection/folder settings

• Which of the available columns to use


collective.isotope

• Could be expanded to support AT types


How Does All This Work?


Setup

• Define crop sizes to fit design

• Add content with images

• Use cropping tool to create crops for each lead image

• Thumb for related sliders and isotope

• Preview for cover tiles


plone.app.imagecropping

• Is awesome and should be in core!

• But it needs some work

• Unnecessary warnings that changes will be lost

• Cached crops are mysteriously lost


Landing Pages

• Create cover for landing page

• Create layout

• Add content and images to cover


Sliders

• Create related content criteria or add related items

• Add slider title

• Enable slider


Isotope Views

• Create collection

• Configure which filters to use

• Set display to isotope view


Reflections on Plone 5


Content Editor

• Nice editing experience, with a few glitches

• Hitting view instead of edit and vice versa - reverse order?

• No icons for add-ons in edit UI! (or Site Setup)


Developer

• New resource registry UI is confusing


Themer

• New markup made theming a bit easier - extended the Barceloneta theme’s LESS and overrode some key variables, which worked nicely

• New editing toolbar made responsive theming a pain - a fourth column you have to account for when setting breakpoints, etc. - lots of special cases


Questions?


leading with lead images

Technology