Etsur

We use interaction design & strategy to build awesome websites.



Dynamic Templating with Etsur Entigy

During development of our new website, the Etsur team came up with several awesome ideas we hadn’t seen before on an ExpressionEngine site. One of these ideas was to create dynamic, flexible layouts which could be easily managed by editing entries. We were able to make it happen using ExpressionEngine  version 2.1, Structure version 3, and a new (free) plugin we created, Etsur Entigy. Etsur Entigy allows you to grab the structure template assigned to an entry and output it.

Here is an example of the basic tag:

{exp:etsur_entigy entry_id='{entry_id}'}

What the preceding example does is output the template assigned to corresponding entry id. For example, on our website this might output something like template/full-width or template/two-thirds-left. So now that we have the corresponding structure template being output, we can go ahead and embed the actual template file in the following manner:

{embed="{exp:etsur_entigy entry_id='{entry_id}'}"}

Here's an example with slightly more context:

{exp:channel:entries channel="your-channel-name"}
	{embed="{exp:etsur_entigy entry_id='{entry_id}'}"}
{/exp:channel:entries}

This next example adds even more context, while including some other key items. Notice how we pass entry_id and the_channel through the embed as variables. We will be using these variables in the templates we include. We also include an orderby and sort order to control in what order the template chunks are displayed in.

{exp:channel:entries channel="example_channel" dynamic="off" orderby="entry-order" sort="asc"}
	{embed="{exp:etsur_entigy entry_id='{entry_id}'}" the_entry='{entry_id}' the_channel='{channel}'}
{/exp:channel:entries}

The example above is all you need to start embedding the template assigned to an entry. As you add entries to the administration panel, or as you change the templates assigned to existing entries, your content will change automatically.

Here's a real world example: To add a chunk of text to the middle of a page we would simply create a new entry (in the proper channel, of course). Next we assign the template/full-width template to that entry using structure. After that, we would type our text into the corresponding full width field and publish the entry. Great, it's now appearing on the page — but let's say we have a block on the page that is set to the "full-width" template, and now we've changed our mind — we would rather have the content be split into two adjacent halves. TO make that happen, we just edit the existing entry's template and set it to "quarter", move the content into the "quarter" fields, and save.

Now, of course, you need to create your own templates to be embedded. We used examples like "quarter", "full-width", and "half", but there are many more options you could try. Here are a few examples:

{exp:channel:entries channel="{embed:the_channel}" entry_id="{embed:the_entry}"}
	<div class="full-width">{full-width-1}</div>
{/exp:channel:entries}

{exp:channel:entries channel="{embed:the_channel}" entry_id="{embed:the_entry}"}
	<div class="half">{half-1}</div>
	<div class="half">{half-2}</div>
{/exp:channel:entries}

{exp:channel:entries channel="{embed:the_channel}" entry_id="{embed:the_entry}"}
	<div class="two-thirds">{two-thirds-1}</div>
	<div class="third">{third-1}</div>
{/exp:channel:entries}

As I mentioned, there are just examples and you're free experiment and bend the rules a bit. You may not know it, but both our talent and services pages were created using the Etsur Entigy plugin — we did, however, make use of some more advanced templates which included matrix fields.

Experiment and have fun with this! It's not for every site, but for those that need more control and flexibility for managing page layouts through the entry system, this is a great way to achieve it.