Question

I’m using Umbraco for the first time to design a website for a client. Each page consists of repeating content panels – each panel contains an image, title and body text.

I’ve got the document type and template working perfectly for the content panel. But, I can’t work out how to add multiple panels to a web page – I’m assuming I set my main page doc type to allow the content panel as a child node – then need a macro to iterate the child nodes and render each using the content panel template.

Also, I would like to allow the client to be able to add and remove panels from each page as well.

Can someone give me an example of macro code to do this? Any help much appreciated!

Answer 1

If you look at the Blog4Umbraco package, you can see a very detailed example of what you are trying to do. (don’t want to past the whole macro here, but you can find it here )Think of each “panel” as a blog post, and look at the XSLT/macro that shows the most recent 10 blog posts on a single screen – you could adapt that pretty easily to what you are doing. You would create a doctype and template for the ‘panels’, the user would create content for as many panels as you want, and a modified version of the XSLT would loop thru each and display the information on your page.

If you prefer (as I do), you can use an asp.net custom control to do the same thing just as easy (especillay if you are more familiar with .net than XSLT).

Create a template with code like this: (this example is for a simple blog control):

  <ItemTemplate>
    <div class="blogTitle"><a href="<%# DataBinder.Eval(Container.DataItem, "Url") %>"> <%# DataBinder.Eval(Container.DataItem, "NodeName") %> </a></div>
    <div class="blogDate">Post Date: <%# String.Format("{0:D}", Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "Post Date")))%></div>
    <div class="blogContent"><%# DataBinder.Eval(Container.DataItem, "Content") %></div>
  </ItemTemplate>

and then in the code behind page load, you can bind the children to that repeater like this:

        //To get the nodes as a datatable so you can use it for DataBinding use this method
    var children = currentNode.ChildrenAsTable();

    rptPosts.DataSource = children;
    rptPosts.DataBind();