One of the things that developers new to the SDL Tridion templating language struggle with is the creation of web-page layouts that are built up using rows and columns of content. I hope this short post shows a simple way to built this logic into your SDL Tridion layouts.
The screen shot below (taken from one of my colleagues’ favourite websites) demonstrates the type of scenario that requires implementation.
Web-page content above is displayed using two rows of content laid out in a 3-items-per-row display. These items are individual Component Presentations (a component spliced with a component template) and placed into the page.
How to do it
The process is actually really simple you need to do just a couple of things:
- Separate the Component Presentations on the page by their ‘type’ (Component + Component Template equals a ‘type’)
- Add a little bit of DWT logic to provide the row formatting
- That’s pretty much it!!
Separating out the Component presentations
Separating out Component Presentations probably needs a post on it’s own. Fortunately Dominic Cronin has taken care of this for me, so if you’re unsure about how to partition your page component templates read Partitioning Component Presentations over on his recipe website.
So assuming you’ve got a building block to partition your components, the package in your page will look something like this:
Why do they need to be partitioned?
When you loop over your component presentations, it makes life much easier to calculate when a row ending needs to be placed if they are split into partitions. If you look again at the graphic below you’ll see that the components we need to display in a column layout (the Profile Intro components) start in this page from component number 2.
By partitioning your components you have a nice set of divided presentations to work with.
The required HTML
Essentially the third sub <div> in this list has the CSS class ‘product-last‘, which contains some additional code to the ‘product‘ class to ensure the intro component is displayed on a new line.
The DWT code
The Page Template DWT code will render all of the Profile Intro Component Presentations by simply looping through the ‘partitioned’ components in the package, for example:
<!-- TemplateBeginRepeat name="ProfileIntroCo
mponents" --> @@RenderComponentPresentation( )@@<!-- TemplateEndRepeat -->
So to add our extra <div> items and specifically the <div class=”product”> on the third Component Presentation we simply add a bit of logic into our DWT:
<!-- TemplateBeginRepeat name="ProfileIntroComponents" --> <div class="product<!-- TemplateBeginIf cond="((TemplateRepeatIndex+1) % 3 == 0)" -->-last<!-- TemplateEndIf -->"> @@RenderComponentPresentation()@@ </div> <!-- TemplateEndRepeat -->
The main thing you need to know about the code modification is this line:
<!-- TemplateBeginIf cond="((TemplateRepeatIndex+1) % 3 == 0)" -->
This code statement is essentially counting as we go through the Component Presentations, when we get to one that is divisible by 3 with no remainder (essentially a third component) render out the bit of code -last onto the div tag.
Finally a couple of tips:
- Be aware that the TemplateRepeatIndex starts at 0
- Be aware of white space in your code which can give problems in your final HTML output.
If anyone has other ways to achieve these grid like layouts, let’s use the comments below to start a discussion