By Paul Sterling, 6/26/2008
Rating
Description
How to to include multiple instances of a macro in a single template when each macro instance uses different configuration data.
Download
Download item
Downloaded 8 time(s).
Snippet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple Instances of a Macro in</title>
<style type="text/css">
*{line-height:130%;}
a{text-decoration:none;}
a{font-weight:inherit;text-decoration:none;color:#4563b9;}
</style>
</head>
<body>
<p><a href="http://paulsterling.spaces.live.com/">
<span class="postTitle" id="ea83c4e3-2f48-4002-ba36-9194a8b83941" contentEditable="true" style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px">
Multiple Instances of a Macro in a Single Umbraco Template</span></a></p>
<p>I assume it's not an uncommon requirement to include multiple instances of a
macro in a single template, but I hadn't encountered it until this week.
In this case, a new site design dictated including multiple category listings on
a single page. The problem was that our category listing controls were
designed to render a single category listing determined by a query string
parameter - though it doesn't look this way due to a Url Rewriting Rule.
</p>
<p>I borrowed a solution put forward by David Conlisk in this
<a target="_blank" href="http://forum.umbraco.org/yaf_postst4482_Basic-Question-Accessing-Umbraco-content-from-a-UserControl-using-the-API.aspx">
forum post</a> termed "Resource Nodes." In essence what I've done is
to create non-visible content nodes to contain the data used by the visible
node. I simply added the properties I needed to the underlying Document
Type. Again, I'm certain this is not an uncommon approach to Umbraco
configuration and has the added benefit of providing a consistent model to our
site editors.</p>
<p>Following is a snippet from the Template underlying the visible Content node
where the Macro parameter <em>resourceNode</em> is of the MediaPicker Data Type
and the parameter <em>ResourceNode</em> is of the ContentPicker Data Type.
When adding the Macros to the Template the creator simply selects the relevant
Media node (for the Random Image Macro) and Content node (for the Category
Listing Macro).</p>
<div>
<pre style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 8pt; PADDING-BOTTOM: 0px; MARGIN: 0em; OVERFLOW: visible; WIDTH: 100%; COLOR: black; BORDER-TOP-STYLE: none; LINE-HEIGHT: 12pt; PADDING-TOP: 0px; FONT-FAMILY: consolas, 'Courier New', courier, monospace; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; BORDER-BOTTOM-STYLE: none"><div <span style="COLOR: #0000ff">class</span>="prodImage">
<?UMBRACO_MACRO macroAlias="GetRandomImage" resourceNode="2211">
</?UMBRACO_MACRO>
</div>
<?UMBRACO_MACRO macroAlias="categoryList" ResourceNode="2545">
</?UMBRACO_MACRO>
<div <span style="COLOR: #0000ff">class</span>="prodImage">
<?UMBRACO_MACRO macroAlias="GetRandomImage" resourceNode="1813">
</?UMBRACO_MACRO>
</div>
<?UMBRACO_MACRO macroAlias="categoryList" ResourceNode="2543">
</?UMBRACO_MACRO></pre>
</div>
<p> </p>
<p>For a straightforward example of a Random Image Macro have a look at this
<a target="_blank" href="http://forum.umbraco.org/yaf_postst5124_Unique-Random-Images--Solution.aspx">
forum post</a>. Mine is implemented as a .NET User Control, but I think
the XSLT solution is a bit more elegant.</p>
<p>From here each Macro (.NET User Controls) retrieves the relevant
configuration information from the specified <em>ResourceNode</em> and renders
accordingly. Following is a snippet of the public property definition and
usage from the User Control.</p>
<pre class="code">...(we create a public property to hold the NodeId)...</pre>
<pre class="code"> <span style="COLOR: rgb(0,0,255)">private</span> <span style="COLOR: rgb(0,0,255)">int</span> resourceNode = -1;
<span style="COLOR: rgb(0,0,255)">public</span> <span style="COLOR: rgb(0,0,255)">int</span> ResourceNode
{
<span style="COLOR: rgb(0,0,255)">get</span> { <span style="COLOR: rgb(0,0,255)">return</span> resourceNode; }
<span style="COLOR: rgb(0,0,255)">set</span> { resourceNode = <span style="COLOR: rgb(0,0,255)">value</span>; }
}</pre>
<pre class="code">...(and then we get the value(s) from the related Node)...</pre>
<pre class="code"> <span style="COLOR: rgb(43,145,175)">Node</span> pageNode = <span style="COLOR: rgb(0,0,255)">new</span> <span style="COLOR: rgb(43,145,175)">Node</span>(resourceNode);
categoryID = <span style="COLOR: rgb(0,0,255)">int</span>.Parse(pageNode.GetProperty
(<span style="COLOR: rgb(163,21,21)">"categoryID"</span>).Value.ToString());</pre>
<p><a href="http://11011.net/software/vspaste"></a> </p>
<p>In this manner I can add any number of instances of the same Macro to a
Template and allow site editors to have control over the order and content of
each Macro. </p>
</body>
</html>
Comments
Add a comment (requires log-in)