Leading With Lead Images
ā¢
0 likesā¢1,157 views
Like the cobbler's children that have no shoes, here at Jazkarta we have been working on a long overdue redesign of our website. Our new site uses content with lead images to drive various views and interactive features. It is a good example of how Plone's standard Dexterity "Image" field, combined with plone.app.imagecropping, can create image-rich content that can be re-purposed in a variety of ways. This talk describes two new add-ons that we have written that take advantage of lead images and search indexes to create pretty grid layouts with fun dynamic content filtering.
Recommended
Recommended
More Related Content
More from Jazkarta, Inc.
More from Jazkarta, Inc. (20)
Recently uploaded
Recently uploaded (20)
Leading With Lead Images
- 1. Friday, October 23, 15
- 2. The Cobblerās Children Have No Shoes Friday, October 23, 15
- 3. Friday, October 23, 15
- 4. Friday, October 23, 15
- 5. Requirements ā¢ More imagery, visual appeal ā¢ Tiled landing pages that are easy to change ā¢ Responsive ā¢ Use Plone 5 Friday, October 23, 15
- 6. Friday, October 23, 15
- 7. Key Ingredients ā¢ Dexterity types ā¢ Dexterity behaviors ā¢ plone.app.imagecropping ā¢ collective.cover ā¢ collective.relatedslider NEW ā¢ collective.isotope NEW Friday, October 23, 15
- 8. Dexterity Types ā¢ Plone 5 types ā¢ Projects ā¢ Team Members Friday, October 23, 15
- 9. Friday, October 23, 15
- 10. Friday, October 23, 15
- 11. Dexterity behavior: Image ā¢ Images ā¢ Projects ā¢ Team Members Friday, October 23, 15
- 12. Dexterity behavior: RelatedItems ā¢ Pages ā¢ Projects ā¢ Team Members Friday, October 23, 15
- 13. Dexterity behavior: Collection ā¢ Pages ā¢ Projects ā¢ Team Members Friday, October 23, 15
- 14. Dexterity behavior: RelatedSlider ā¢ Pages ā¢ Projects ā¢ Team Members Friday, October 23, 15
- 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
- 16. 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
- 17. 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
- 18. Friday, October 23, 15
- 19. 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
- 20. Friday, October 23, 15
- 21. collective.relatedslider ā¢ Could be extended to support display of related items on AT content Friday, October 23, 15
- 22. Friday, October 23, 15
- 23. collective.isotope ā¢ Provides a new view for Folder and Collection types (plone.app.contenttypes) ā¢ Uses the Isotope javascript plugin (http:// isotope.metaļ¬zzy.co) ā¢ Open source license Friday, October 23, 15
- 24. Isotope Demo Friday, October 23, 15
- 25. collective.isotope ā¢ Provides vertical and tiled formats ā¢ Uses catalog metadata columns for ļ¬ltering ā¢ Will eventually support dynamic sorting Friday, October 23, 15
- 26. 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 conļ¬guration settings coming Friday, October 23, 15
- 27. Friday, October 23, 15
- 28. Friday, October 23, 15
- 29. collective.isotope ā¢ Per collection/folder settings ā¢ Which of the available columns to use Friday, October 23, 15
- 30. Friday, October 23, 15
- 31. collective.isotope ā¢ Could be expanded to support AT types Friday, October 23, 15
- 32. How Does All This Work? Friday, October 23, 15
- 33. Setup ā¢ Deļ¬ne crop sizes to ļ¬t 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
- 34. Friday, October 23, 15
- 35. Friday, October 23, 15
- 36. 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
- 37. Landing Pages ā¢ Create cover for landing page ā¢ Create layout ā¢ Add content and images to cover Friday, October 23, 15
- 38. Friday, October 23, 15
- 39. Friday, October 23, 15
- 40. Friday, October 23, 15
- 41. Sliders ā¢ Create related content criteria or add related items ā¢ Add slider title ā¢ Enable slider Friday, October 23, 15
- 42. IsotopeViews ā¢ Create collection ā¢ Conļ¬gure which ļ¬lters to use ā¢ Set display to isotope view Friday, October 23, 15
- 43. Reļ¬ections on Plone 5 Friday, October 23, 15
- 44. 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
- 45. Friday, October 23, 15
- 46. Developer ā¢ New resource registry UI is confusing Friday, October 23, 15
- 47. 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