In our previous quest to master the branding of a Kentico site, we covered the installation of the necessary files, we created few page templates and one master page and then we created the home page and the search page. Now, we will take the quest farther by creating the Tag page that handles the tag results.
Create a Tag results page
Under the main Augusta site, create a new page (Page (menu item)) and call it Tag. Go to Augusta page template category and select Augusta-Tag page template and Save the page.
Still on the Tag results page, click on Design tab and start adding the necessary web parts.
Start with the Breadcrumbs. On the ZoneBreadcrumbs add a Breadcrumbs web part and customize it as follows and make sure you Save & Close.
Starting path: /
HTML Envelope:
<a href="/">Home</a> > Tag
Under the ZoneSideNav add a CSS list menu web part, customize it the way you want and make sure you Save & Close.
Under ZoneContentTitle add a Static Text web part and add this code in the Content/Text area and make sure you Save & Close.
{%{%CurrentDocument.DocumentName@%}: {%If(QueryString.tagid!=""){foreach(g IN SiteObjects.TagGroups){foreach(t IN g.Tags){if(t.TagID==ToInt(QueryString.tagid)){return t.TagName;}}}}#%} {?tagname?}@%}
Under ZoneContent we need to add a Repeater web part with the following properties:
Site name: Augusta
WHERE condition:
('{?ToInt(tagid, "")?}' = 0 AND '{?tagname?}'='') OR (DocumentID IN (SELECT DocumentID FROM CMS_DocumentTag WHERE TagID = {?ToInt(tagid, "")?} )) OR (DocumentID IN (SELECT DocumentID FROM CMS_DocumentTag WHERE TagID IN (SELECT TagID FROM CMS_Tag WHERE TagName = '{?tagname?}' AND TagGroupID = {?ToInt(groupid, "")?} )))
For Transformation: create a new transformation called AugustaTags, Transformation type: ASCX use the following code and Save the transformation.
<div class="tagItem">
<p>
<a href="<%# GetDocumentUrl() %>"><%# HTMLHelper.HTMLEncode(Convert.ToString(Eval("MenuItemName"))) %><%# Eval("BlogPostTitle",true) %></a>
<br />
<%# StripTags(Eval("MenuItemSummary")) %><%# Eval("BlogPostSummary") %>
<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />
</p>
</div>
Back to the Repeater properties, make sure you check the Enable paging option, Navigation buttons is set to None, deselect Show first and last buttons and Save.
Here’s how the Repeater web part properties should look like:
That’s all for the tag page. Now, if you followed the steps properly you should have the tag results page showing like this:
If for any reasons, you ended up on this page first and have no idea what’s going on, make your way to the first step of our Kentico branding tutorial.
I didn’t add any tutorials on creating other pages based on the templates created in the first part of the tutorial (RightSidebar, LeftSidebar, NoSidebar, Blog) because I thought it is self-explanatory, but if enough requests are received in the comments below, I might oblige. Until then stay tuned for more Kentico branding goodies.