One Template For Every Page (almost...)

I've recently been working with Modx Revolution 2.5.1 to redesign a company website. It was an existing site so a lot of the structure was already there. But I wanted to create a really flexible design so that whoever was using my templates would be able to completely customise the page, ensuring the site has a continuous global feel but so not every page was indentical in layout.

Most pages would use a standard layout template for content, with a few pages using different templates for things such as news posts, documents and resources, and contact forms. The standard content template is comprised of "sections" - some are always displayed and others can be enabled or disabled.

Enabling and Disabling Chunks

Each of these content sections is written in a chunk. I can throw that chunk into the template and it appears great. I use template variables associated with each chunk (keeping everything ordered in categories) so that the text that will appear on the site is easily editable. But sometimes a page has less content so I don't need that section there.

My solution is to use template variables that themselves output the chunk, e.g. a checkbox, with input value as below:

Enabled==[[$myChunk]]

To make the chunk included by default, fill the default box with [[$myChunk]].

Then the template variables goes into the template, rather than the chink itself:

[[*enableMyChunk]]

Then when I'm editing the page, I can select/deselect the "Enable" tempate variable. If it is checked, it outputs the chunk [[$chunk]] which then of course get put into the html.

Ordering sections

Some of my sections have different layout, such as having an image on the left or right, or just centered text. Initially I designed the template with the sections in the order I believed I would need them.

However, for some pages I felt I needed to change this order. Not wanting to create a whole new template each time this occured, I instead wrapped all of the sections in a div with class "main".

<div class="main">

    [[*enableSection1]]

    [[*enableSection2]]

    [[*enableSection3]]

</div>

Each of the "sections" has a style to set the order. Create a template variable to set this value:

<div class="section" style="order: [[*section1Order]]; -webkit-order: [[*section1Order]]">
....
</div>

The "sectionOrder" template variable is a number input and under a "Page Layout" category.

Now use css for ordering:

.main { display: flex; flex-direction: column; }