leading with lead images
TRANSCRIPT
Requirements
• More imagery, visual appeal
• Tiled landing pages that are easy to change
• Responsive
• Use Plone 5
Friday, October 23, 15
Key Ingredients
• Dexterity types
• Dexterity behaviors
• plone.app.imagecropping
• collective.cover
• collective.relatedslider NEW
• collective.isotope NEW
Friday, October 23, 15
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
Friday, October 23, 15
collective.relatedslider
• Provides RelatedSlider behavior for Dexterity content
• Piggybacks on RelatedItems or Collection behaviors (plone.app.contenttypes) for related content selection
Friday, October 23, 15
collective.relatedslider
• Related content selection can be
• Manual (RelatedItems)
• With criteria (Collection)
• Choice of related content source made on edit form
Friday, October 23, 15
collective.relatedslider
• 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)
Friday, October 23, 15
collective.relatedslider
• Could be extended to support display of related items on AT content
Friday, October 23, 15
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
Friday, October 23, 15
collective.isotope
• Provides vertical and tiled formats
• Uses catalog metadata columns for filtering
• Will eventually support dynamic sorting
Friday, October 23, 15
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
Friday, October 23, 15
collective.isotope
• Per collection/folder settings
• Which of the available columns to use
Friday, October 23, 15
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
Friday, October 23, 15
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
Friday, October 23, 15
Landing Pages
• Create cover for landing page
• Create layout
• Add content and images to cover
Friday, October 23, 15
Sliders
• Create related content criteria or add related items
• Add slider title
• Enable slider
Friday, October 23, 15
Isotope Views
• Create collection
• Configure which filters to use
• Set display to isotope view
Friday, October 23, 15
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)
Friday, October 23, 15
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
Friday, October 23, 15