- RedDot CMS Blog
- 31.01.2020
- EN
rdb: The One True Container – RedDot CMS Tutorial – Part II
The Two Towers – Header and Footer
What I have tended to see “in the wild” (and how my first project went) was what I call “header and footer” base templates. Basically the process is the same as for “copy and paste” above, with the following exception – common pieces of HTML code are identified and extracted into their own template and replaced in the base templates with a container element. Common examples of HTML code extracted in this way includes the page header and footer – hence the name – but there may be others as well. For example, in this case I have also extracted the ¨social¨ icon bar. Templates then tend to look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head profile="http://gmpg.org/xfn/11"> <!IoRangePreExecute><% hdl_headline = "<%hdl_headline%>" inf_pageUrl = "<%inf_pageUrl%>" stf_summary = "<%stf_summary%>" %><!/IoRangePreExecute> <title><%hdl_headline%> | Unofficial RedDot CMS blog</title> <!-- all in one seo pack 1.4.7.4 [245,327] --> <meta name="description" content="<%stf_meta_description%>"> <meta name="keywords" content="<%stf_meta_keywords%>"> <!-- /all in one seo pack --> <%con_header%> <div id="post_content" class="column span-14"> <!-- start home_content --> <div class="column span-11 first"> <h2 class="post_cat"><%stf_category%></h2> <h2 class="post_name" id="post-<%inf_pageId%>"><%hdl_headline%></h2> <div class="post_meta"> By <a href="<%anc_author%>" title="Posts by <%inf_originalAuthorFullName%>"><%inf_originalAuthorFullName%></a> <span class="dot">⋅</span> March 11, 2009<%inf_pageReleaseDate%> <span class="dot">⋅</span> <a href="#comments">Post a comment</a> </div> <%txt_content%> <%con_sociable%> <h5>Related posts:</h5><ol><!IoRangeDynLink><li><a href="<%anc_related%>r" rel="bookmark" title="Permanent Link: <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeDynLink></ol> <h2 class="post_comm2">About the author:</h2> <div id="authorinfo"> <!IoRangeConditional><img src="<%img_author%>" alt="<%inf_originalAuthorFullName%>" title="<%inf_originalAuthorFullName%>"><!/IoRangeConditional> <%txt_aboutAuthor%> </div> <div class="post_meta"> <img src="<%img_tags%>" class="posttag" alt="Print This Post" title="Print This Post" style="border: 0px none ;">Tags: <!IoRangeDynLink><a href="<%anc_tag%>" rel="tag"><%hdl_headline%></a>, <!/IoRangeDynLink></div> <div id="comments"> <!-- start comments --> <div id="commenthead"> <h2 class="post_comm">Discussion</h2> <h3 class="mast5">? comments for “<%hdl_headline%>”</h3> </div> <!-- You can start editing here. --> <ol id="commentlist"> <%con_comments%> </ol> <%con_footer%>
Which in SmartTree look like this:
SmartTree
By giving up a bit of the speed and simplicity of implementation, we gain the following benefits:
- Changes to the HTML code within the extracted templates only needs to be updated in one place.
- Adding a new link or image that is common for all pages to the extracted templates requires only its single instance to be updated. Same for localisation. (Though adding a new link or image that is not common to all pages is trickier)
- Reduced content and structural elements per base template – you effectively trade the elements in the extracted templates for new container elements in the base template.
If the implementation is particularly advanced, you may also see pre-executing code being used to help reduce duplication and/or pass values (like page GUIDs or ids) from the base template to the extracted templates. In this example we transfer the headline, page URL and summary to the sociable container for use in constructing the links. The ¨sociable¨ component template is shown below to show how these values are ¨transferred¨:
<div class="sociable">
<div class="sociable_tagline">
<h5>Share and Enjoy:</h5>
</div>
<ul>
<!IoRangePreExecute>
<li><a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="<%img_printer%>" onclick="" title="Print this article!" alt="Print this article!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="mailto:?subject=<%= hdl_headline %>&body=<%= inf_pageUrl %>" title="E-mail this story to a friend!"><img src="<%img_emailLink%>" onclick="" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://digg.com/submit?phase=2&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Digg"><img src="<%img_digg%>" title="Digg" alt="Digg" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://reddit.com/submit?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Reddit"><img src="<%img_reddit%>" title="Reddit" alt="Reddit" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.stumbleupon.com/submit?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="StumbleUpon"><img src="<%img_stumbleupon%>" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Google"><img src="<%img_googleBookmark%>" title="Google" alt="Google" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://del.icio.us/post?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="del.icio.us"><img src="<%img_delicious%>" title="del.icio.us" alt="del.icio.us" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mister-wong.com/addurl/?bm_url=<%= inf_pageUrl %>&bm_description=<%= hdl_headline %>&plugin=soc" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mister-wong.com/addurl/?bm_url=<%= inf_pageUrl %>&bm_description=<%= hdl_headline %>&plugin=soc');" title="MisterWong"><img src="<%img_misterWong%>" title="MisterWong" alt="MisterWong" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=<%= inf_pageUrl %>&t=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.facebook.com/share.php?u=<%= inf_pageUrl %>&t=<%= hdl_headline %>');" title="Facebook"><img src="<%img_facebook%>" title="Facebook" alt="Facebook" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mixx.com/submit?page_url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Mixx"><img src="<%img_mixx%>" title="Mixx" alt="Mixx" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.furl.net/storeIt.jsp?u=<%= inf_pageUrl %>&t=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.furl.net/storeIt.jsp?u=<%= inf_pageUrl %>&t=<%= hdl_headline %>');" title="Furl"><img src="<%img_furl%>" title="Furl" alt="Furl" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= stf_summary %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.linkedin.com/shareArticle?mini=true&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= stf_summary %>');" title="LinkedIn"><img src="<%img_linkedIn%>" title="LinkedIn" alt="LinkedIn" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Live"><img src="<%img_live%>" title="Live" alt="Live" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ma.gnolia.com/bookmarklet/add?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Ma.gnolia"><img src="<%img_magnolia%>" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://twitter.com/home?status=<%= inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://twitter.com/home?status=<%= inf_pageUrl %>');" title="TwitThis"><img src="<%img_twitter%>" title="TwitThis" alt="TwitThis" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=<%= inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://technorati.com/faves?add=<%= inf_pageUrl %>');" title="Technorati"><img src="<%img_technorati%>" title="Technorati" alt="Technorati" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.newsvine.com/_tools/seed&save?u=<%= inf_pageUrl %>&h=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.newsvine.com/_tools/seed&save?u=<%= inf_pageUrl %>&h=<%= hdl_headline %>');" title="NewsVine"><img src="<%img_newsVine%>" title="NewsVine" alt="NewsVine" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.tumblr.com/share?v=3&u=<%= inf_pageUrl %>&t=<%= hdl_headline %>&s=" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.tumblr.com/share?v=3&u=<%= inf_pageUrl %>&t=<%= hdl_headline %>&s=');" title="Tumblr"><img src="<%img_tumblr%>" title="Tumblr" alt="Tumblr" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=<%= inf_pageUrl %>&submitHeadline=<%= hdl_headline %>&submitSummary=<%= stf_summary %>&submitCategory=science&submitAssetType=text" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://buzz.yahoo.com/submit/?submitUrl=<%= inf_pageUrl %>&submitHeadline=<%= hdl_headline %>&submitSummary=<%= stf_summary %>&submitCategory=science&submitAssetType=text');" title="Yahoo! Buzz"><img src="<%img_yahooBuzz%>" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://yigg.de/neu?exturl=<%= inf_pageUrl %>&exttitle=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yigg.de/neu?exturl=<%= inf_pageUrl %>&exttitle=<%= hdl_headline %>');" title="Yigg"><img src="<%img_yigg%>" title="Yigg" alt="Yigg" class="sociable-hovers"></a></li>
<!/IoRangePreExecute>
</ul>
</div>
Handy Hint
Even though pages placed inside containers look separate, they are compiled into a single page. This is important for pre-executing script, as code inside a container can make use of (for better or worse!) code in the parent page above the container.
Handy Hint
To get pre-executing script to work, you need to set two options:
Check ¨Allow active templates¨ and enter ¨Eligible suffixes¨ (eg asp) in General Settings (under Administer Project Settings in SmartTree)
Edit the Project Variant (under Administer Project Settings in SmartTree) and select the eligible suffix in ¨Select scripting for active templates¨.
But, while we reduce the negatives from the “copy and paste” method, we don’t eliminate them – there is still HTML code duplication (usually surrounding placeholders that change between pages – in our example – the doctype, html and head tags, the img_tags and corresponding text), there are still multiple anchors and containers in each base template that don’t change and are taking up space, and if we want to add a new common component – well we are back to our original disadvantages…