Managing Large Responsive Content

Pages in SitecoreCharlie DarneyTechnical LeadMay 21, 2014

Problem:We have a new page on the website that is responsive and has a lot of content. We want to manage it in Sitecore, but one field to manage it is too little.

SolutionBreak content AND layout definition into sections, manage them with separate items in Sitecore.

What I’ll need• Section rendering components

(sublayouts)• Dynamic Key Placeholder• Pipeline processor• Custom tree list field

Rendering ComponentsImage Renderer

Content Renderer

Rendering ComponentsContent Section Renderer<!-- Parent section --><section>

<!-- Optional inner section --><section></section><!-- End optional inner section -->

</section><!-- End parent section -->

Rendering ComponentsContent Section Renderer

Dynamic Key Placeholder

Nick Wesselmanhttp://www.techphoria414.com/Blog/2011/August/Dynamic_Placeholder_Keys_Prototype

Dave Leighhttp://trueclarity.wordpress.com/2012/06/19/dynamic-placeholder-keys-in-sitecore/

Pipeline Processor

Is Sitecore.Context.Item of my Template?

Loop through content sections (from field)

Add Renderings to Sitecore.Context.Page

Pipeline Processor

Custom Treelist

Is field data source empty?

Find Content Sections folder child by Template ID

Set data source to Content Sections folder item

In Sitecore

Item: charlie-assisted-livingTemplate: Content Section Sub PageField: Content SectionsField Type: Content Section Treelist

In Sitecore

Item: services-amenitiesTemplate: Content Section TemplatePresentation Layout Details

Put it all together

1. Create Content Section Sub Page2. Create content section children inside

Content Sections child folder3. Assign Presentation Layout Details per

content section4. Choose content sections and order in

Content Sections field5. Pipeline processor6. Magic!

Thank you