Solution: Dynamic Layouts - Managing Style as Content

About

This is a different approach to template design. It is the creation of a container class, Div, that allows the content editor (or designer) to style the div and store the settings as content.

The div content is object relations into the system. This allows a great amount of design control, without requiring template or CSS modifications.

Application

The intent of this class and template is to allow page-specific styles, images, and layouts to be applied to single pages, without creating node override templates or custom classes. Page-specific images that are placed in CSS files create a significant amount of overhead, and this alleviates that overhead, and makes the images more manageable.

Notes

The objective of the class is primarily layout, to divide the {$module_result.content} area into divs that can be managed as eZ content, instead of templates with CSS files. It is a recursive looping template, that first delivers a named div, then the style tags of the container, followed by the styled div, and including the children, with the same approach. The children use object relations to refer to content within the system.

Class

The class has the following attributes:

• Name - Name of div, and object/node
• Class - General CSS class - can be used in conjunction with CSS files
• Style - Text block with any style tag content. {} will be added by the template
• Background Image - Web ready background image. Original image will be used. Height and width can be entered manually, or omitted.
• Content - Optional object relations to content within the system. node/view/line is used to display content

Template

{def $children=fetch('content','list',hash(parent_node_id,$node.node_id,sort_by,$node.sort_array))}

<div name="{$node.name|wash}">
<style>
#{$node.name|wash}
{ldelim}
{$node.data_map.style.content}
{if $node.data_map.background_image.has_content}
background-image: url({$node.data_map.background_image.content.original.url|ezroot(&apos;single&apos;,&apos;full&apos;)});
{/if}
{rdelim}
</style>

<div id="{$node.name|wash}" class="{$node.data_map.class.content|wash}" >
{if $children|count|gt(0)}
{foreach $children as $k => $v}
  {node_view_gui content_node=$v view="full"}
{/foreach}
{else}
{def $related_objects=fetch(&apos;content&apos;,&apos;related_objects&apos;,hash(&apos;object_id&apos;,$node.object.id,&apos;all_relations&apos;, true()))}
<div id="{$node.name|wash}" class="{$node.data_map.class.content|wash}" >
{foreach $related_objects as $k => $v}
{node_view_gui content_node=$v.main_node view="line"}
{/foreach}
{/if}

</div>
</div>

{undef}