One Container to rule them all, One Container to find them,
One Container to bring them all and in the templates bind them
In the CMS of OpenTextRedDotwhere the Content lies
Ok, first up – a warning and some history. This is a long post that I have been working on, off and on, since the end of last year. Don´t be scared, most of the time and the bulk of the post is in the examples – which I have only recently had access to a suitable server to build and test. With a bit of luck, future posts will be a lot more compact – as this article lays the context for a lot of other posts I have been meaning to write – both in providing what I hope you will find to be a ¨real¨ example site, as well as the base template ¨pattern¨ that a lot of my solutions build upon.
So this post is a story about base templates. What I´ve seen, what I use and what I consider to be the advantages and disadvantages of both. Interestingly though, this post came about not from developing new projects, but from refactoring existing ones – and therefore I hope brings value regardless of where you are currently at. What I am about to show you comes squarely under the category of “things I wish I had known before my first project”.
This post is split into three sections. The first introduces you to our example project with what I consider to be the ¨easiest to implement, hardest to maintain¨ method of base template creation – ¨copy and paste¨. The second section takes our example project and converts it to what seems to be the most common method – ¨header and footer¨. The final section will lead you through the steps to refactor any project to my preferred method – ¨include container¨. Along the way there are sure to be a few interesting tips as well.
On a final note before we begin proper – while the example project works and hopefully will help you in understanding the advantages and disadvantages of the various methods discussed – it is not complete (for one, it doesn´t contain any red dots) nor optimal (for example, we have a lot more work to do towards localisation). Feel free to note in the comments any issues you would like to see addressed in future articles (or write them yourself!) – but try to keep the implementation discussions to the topic of this article – thanks! Oh, and probably one thing this example unfortunately doesn´t lend itself well to is navigation manager examples – but we will cross that bridge when we come to it.
So – how do you create your base templates? I expect most RedDot developers´ first experience is the RedDot training itself, which tends to be rather simplistic (as they need to teach you the basics of the system) and results in what I call ¨copy and paste¨ base templates. Basically, the process is as follows:
I have unfortunately not yet come across a HTML site as simple as the training one to implement in RedDot. In order to create an example with real world complexity and not burden myself with permission issues (nor creating a web site as well as the RedDot implementation) I have based my example project on the Unofficial RedDot CMS Blog itself! Not an ideal web site for RedDot you might say, but that is also a good reason to use it – it will highlight more challenges for this and future articles.
Applying ¨copy and paste¨ to the Unofficial RedDot CMS Blog gives us a base template (for articles) like so:
<!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"> <title><%hdl_headline%> | Unofficial RedDot CMS blog</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="imagetoolbar" content="no"> <meta name="robots" content="index, nofollow, noodp"> <meta http-equiv="expires" content="43200"> <meta name="audience" content="all"> <meta name="language" content="en"> <meta http-equiv="content-language" content="en"> <link rel="stylesheet" href="<%anc_css_style2%>" type="text/css" media="screen, projection"> <!--[if lt IE 7]> <link rel="stylesheet" href="<%anc_css_ie%>" type="text/css" media="screen, projection"> <![endif]--> <link rel="alternate" type="application/rss+xml" title="Unofficial RedDot CMS blog RSS Feed" href="<%anc_xml_rss%>"> <link rel="alternate" type="application/atom+xml" title="Unofficial RedDot CMS blog Atom Feed" href="<%anc_xml_atom%>"> <link rel="pingback" href="<%anc_pingback%>"> <link rel="shortcut icon" href="<%img_favicon%>"> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%anc_xml_rsd%>"> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="<%anc_xml_wlwmanifest%>"> <!-- 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 --> <!-- Added By Democracy Plugin. Version 2.0.1 --> <script type="text/javascript" src="<%anc_js_democracy%>"></script> <link rel="stylesheet" href="<%anc_css_basic%>" type="text/css"> <link rel="stylesheet" href="<%anc_css_style1%>" type="text/css"> <link href="<%anc_css_syntax_highlighter%>" type="text/css" rel="stylesheet"> <link rel="stylesheet" type="text/css" media="screen" href="<%anc_css_sociable%>"> <!-- Protected by WP-SpamFree v2.0.0.1 :: JS BEGIN --> <script type="text/javascript" src="<%anc_js_wp_spamfree%>"></script> <!-- Protected by WP-SpamFree v2.0.0.1 :: JS END --> <body> <div id="container"> <div id="header" class="column span-14"> <div id="logo" class="column first"> <div class="title"> <div><a href="<%anc_home%>">Unofficial RedDot CMS blog</a></div> <div class="desc">RedDot hints from developers, freelancers and fellow customers</div> </div> <!--<a href="<%anc_home%>" title="RedDot hints from developers, freelancers and fellow customers: Home" class="sitelogo"></a>--> </div> <div id="search_menu" class="column span-6 border_left last push-0"> <div id="search" class="column first"> <h3 class="mast4">Search</h3> <div id="search-form"> <form method="get" id="searchform" action="<%anc_search%>"> <div><label for="s" class="none">Search for:</label> <input name="s" id="s" class="search_input" value="" type="text"> <label for="searchsubmit" class="none">Go</label> <input id="searchsubmit" class="submit_input" value="Search" type="submit"></div> </form> </div> </div> <ul id="menu"> <li><span class="home"><a href="<%anc_home%>">Home</a></span></li> <!-- <li><span class="about"><a href="<%anc_about%>">About</a></span></li> --> <li><span class="archives"><a href="<%anc_archives%>">Archives</a></span></li> <li><span class="subscribe"><a href="<%anc_subscribe%>">Subscribe</a></span></li> <!-- <li><span class="contact"><a href="<%anc_contact%>">Contact</a></span></li> --> </ul> </div> </div> <!--end header--> <div id="topbanner_single" class="column span-14"> <!-- start top banner --> <div class="pagetitle"> // you’re reading... </div> </div> <!-- end top banner --> <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%> <div class="sociable"> <div class="sociable_tagline"> <h5>Share and Enjoy:</h5> </div> <ul> <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> </ul> </div> <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> <div id="comment-form"> <h2 id="respond" class="post_comm2">Post a comment</h2> <form action="<%anc_comments%>" method="post" id="commentform"> <fieldset> <p> <label for="author" class="com">Name *</label> <input class="comtext" name="author" id="author" value="" size="22" tabindex="1" type="text"> </p> <p> <label for="email" class="com">E-mail *</label> <input class="comtext" name="email" id="email" value="" size="22" tabindex="2" type="text"> </p> <p> <label for="url" class="com">Web site</label> <input class="comtext" name="url" id="url" value="" size="22" tabindex="3" type="text"> </p> <!-- <p><small><strong>XHTML:</strong> You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike><strong> </small></p> --> <p> <label for="comment" class="com">Comment</label> <textarea class="comtext" name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea> </p> </fieldset> <fieldset> <p> <input name="submit" id="submit" tabindex="5" class="comsubmit" value="Submit Comment" type="submit"> <input name="comment_post_ID" value="74" type="hidden"> </p> <noscript> <p> <strong>Currently you have JavaScript disabled. In order to post comments, please make sure JavaScript and Cookies are enabled, and reload the page.</strong> <a href="http://www.google.com/support/bin/answer.py?answer=23852" rel="nofollow external">Click here for instructions</a> on how to enable JavaScript in your browser. </p> </noscript> </fieldset> </form> </div> </div> <!-- end comments --> </div> <div class="column span-3 last"> <div id="side_categories"> <h3 class="mast">Categories</h3> <ul class="cat"> <%con_categories%> </ul> </div> <div id="side_recent_comments"> <h3 class="mast">Recent Comments</h3> <ul class="reccom"> <!IoRangeList> <li><%inf_originalAuthorFullName%> on <a href="<%lst_recentComments%>" title="View all comments for <%hdl_headline%>"><%hdl_headline%></a></li> <!/IoRangeList> </ul> </div> </div> </div> <!-- start home_content --> <div id="footer" class="column span-14"> <div class="column span-7 first"> © 2009 Unofficial RedDot CMS blog. <a href="<%anc_subscribe%>"><img src="<%img_subscribe%>" alt="Entries (RSS)" style="margin: 2px 0pt 0pt 7px; vertical-align: top;"></a> </div> <div class="column span-7 last"> <div class="push-0"> <a href="http://wordpress.org/" title="Powered by WordPress"><img src="<%img_wordPress%>" alt="Powered by WordPress"></a> <a href="http://code.google.com/p/the-morning-after/" title="Design: The Masterplan"><img src="<%img_masterplan%>" alt="Theme by The Masterplan"></a> </div> </div> </div> </div> <!--end container--> <!-- WordPress theme by Arun Kale / www.themasterplan.in | Download it at http://code.google.com/p/the-morning-after/ --> <!-- Google Analytics for WordPress | http://yoast.com/wordpress/google-analytics/ --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script src="<%anc_js_googleAnalytics%>" type="text/javascript"></script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-5132063-1"); </script> <script type="text/javascript"> pageTracker._trackPageview(); </script> <!-- End of Google Analytics code --> <script type="text/javascript" src="<%anc_js_syntaxHighlighterCore%>"></script> <script type="text/javascript" src="<%anc_js_syntaxHighlighterCSharp%>"></script> <script type="text/javascript" src="<%anc_js_syntaxHighlighterPhp%>"></script> <script type="text/javascript" src="<%anc_js_syntaxHighlighterJScript%>"></script> <script type="text/javascript" src="<%anc_js_syntaxHighlighterVB%>"></script> <script type="text/javascript" src="<%anc_js_syntaxHighlighterSQL%>"></script> <script type="text/javascript" src="<%anc_js_syntaxHighlighterXML%>"></script> <script type="text/javascript" src="<%anc_js_syntaxHighlighterCSS%>"></script> <script type="text/javascript"> dp.SyntaxHighlighter.ClipboardSwf = '<%swf_clipboard%>'; dp.SyntaxHighlighter.HighlightAll('code'); </script> <!-- Piwik code inserted by Piwik Analytics Wordpress plugin by Jules Stuifbergen http://blog.jongbelegen/piwik --> <script language="javascript" src="<%anc_js_piwik%>" type="text/javascript"></script> <script type="text/javascript"> <!-- piwik_action_name = document.title; piwik_idsite = 1; piwik_url = '<%anc_piwik%>'; piwik_log(piwik_action_name, piwik_idsite, piwik_url); // --> </script><img src="<%img_piwik%>" alt="Piwik" style="border: 0pt none ;"> <object> <noscript> <p>Web analytics <img src="<%anc_piwik%>?idsite=1" style="border:0" alt="piwik" /></p> </noscript></object> <!-- /Piwik --> <!--end body--> </body> </html>
In RedDot CMS SmartTree it should now look like this:
SmartTree
The main advantages of this approach are both the speed (the sales team can create an example of your web site in RedDot very quickly this way) and simplicity of the implementation (hence why it is so good for training). The disadvantages, however, are numerous:
Handy Hint
The ¨Reference Link in Clipboard for All Content Class Instances¨and ¨Reference Page in Clipboard for All Content Class Instances¨ plugins provided byRedDotOpenText are hardcoded to work for the first 1000 instances per content class only. You should modify this to 2000.