// you’re reading...

Best practice

The One True Container – 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

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…

Share and Enjoy:
  • Print
  • email
  • Twitter
  • Digg
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • del.icio.us
  • MisterWong
  • Facebook
  • LinkedIn

No related posts.

About the author:

Adrian Mateljan Adrian Mateljan lives in Reading, United Kingdom but is actually an Australian hailing from Perth, Western Australia. Currently contracting in London specialising in RedDot CMS.

Discussion

No comments for “The One True Container – Part II”

Post a comment



Stay up to date! - Get notified about followup comments

If you don't feel the urge to comment but wish to stay in the loop:
Just enter your email and subscribe to new comments.

Subscribe without commenting

Recent Tweets

  • RT @AirKraft: Transport Canada breakout: they manage 80K pages and 300K assets with WSM(RedDot). Wow! #OTCW 2010-11-11
  • The RedDot usergroup session 'Future of WCM' is in National Harbor 7, now. See you there! #otcw 2010-11-11
  • RT @yttergren: @AirKraft: Calling all WSM(RedDot) devs: share your solutions on http://bit.ly/bgPIof EVERY solution can win an iPad #OTCW 2010-11-10
  • Come to the Solution Exchange session. Enhance your (#reddot) CMS project! Chesapeake 12, 3:20pm #otcw Looking forward to see you there! 2010-11-10
  • More updates...