Umbraco, macro, render content into list from doc onto site template part

Question

Complete newby question - I've looked everywhere (as I'm not a .NET dev finding it hard) to create a macro that pulls information from content items create into a list.

Here is the information I would like to present:

<style>
ul#showcase {
  position: absolute;
  left: 0px;
  list-style: none;
  margin: 0px;
  padding: 0px;
  text-align: right;
}

.showbox {
  border: 2px solid #ffd83d;
  border-color: #ffd83d;
  border-radius: 2px;
  background-color: #660000;
  padding: 1em 2em;
  width: 190px;
  height: 152px;
  margin-left: -110px;
  box-shadow: 4px 4px 4px -1.5px rgba(62,99,125,.8);
}
.showbox a{
  color: #ffd83d;
  text-align: right;
}
.showbox:hover {
  -moz-transition: margin-left,background-color;
  -moz-transition-duration: 3s;
  -webkit-transition: margin-left,background-color;
  -webkit-transition-duration: 3s;
  -o-transition: margin-left,background-color;
  -o-transition-duration: 3s;
  transition: margin-left,background-color;
  transition-duration:3s;
  margin-left: 0px;
  background-color:#ffd83d;
}

.showbox:hover a  {
  position: relative;
  -moz-transition: color;
  -moz-transition-duration: 3s;
  -webkit-transition: color;
  -webkit-transition-duration: 3s;
  transition: color;
  transition-duration:3s;
  color: #333333;
}

.showbox a:hover  {
  -moz-transition: color;
  -moz-transition-duration: 1s;
  -webkit-transition: color;
  -webkit-transition-duration: 1s;
  -o-transition: color;
  -o-transition-duration: 1s;
  transition: color;
  transition-duration:1s;
  color: #660000;
}

.showbox-inner {
  position: relative;
  border: 0px solid red;
  border-radius: 4px;
  background-color: #333333;
  width: 110px;
  height: 120px;
  padding: 0px 90px 0px 10px;
  margin: 0px 0px 0px 0px;
}
.showbox-inner:hover {
  -moz-transition: margin-left,background-color;
  -moz-transition-duration: 3s;
  -webkit-transition: margin-left,background-color;
  -webkit-transition-duration: 3s;
  -o-transition-: margin-left,background-color;
  -o-transition--duration: 3s;
  transition: margin-left,background-color;
  transition-duration:3s;
  margin-left: 0px;
  background-color:#333333;
}

.showbox-inner p  {
  float: left;
  width: 75px;
  margin-left: 5px;
  padding: 5px 10px 5px 0px;
  margin: 0px 15px 5px 0px;
  text-align: left;
  color: white;
    }
  .showbox-image img{
  position: absolute;
  margin: 5px -10px;
  padding: 0px -10px;
   }

.showbox-inner:hover p {
  -moz-transition:color;
  -moz-transition-duration: 3s;
  -webkit-transition: color;
  -webkit-transition-duration: 3s;
  -o-transition-: color;
  -o-transition--duration: 3s;
  transition: color;
  transition-duration:3s;
  margin-left: 0px;
  color:#ffd83d;
}



</style>

<div>
  <ul id="showcase">
</li>
    <li>
      <div class="showbox"><a href="http://www.moomookwan.org"      target="blank">MooMooKwan</a>
      <div class="showbox-inner">
  <p>Korean MooMooKwan Hapkido Association Australia</p>
      <div class="showbox-image"><img src="../media/11698/MMK.png" width=110px height=110 /></div>
      </div>
      <a href="http://www.moomookwan.org" target="blank">Click to Visit</a>
            </div></li>
    <li>
      <div class="showbox"><a href="http://www.hapkido.co" target="blank">H.I.A</a>
      <div class="showbox-inner">
  <p>Hapkido International Association Australia</p>
      <div class="showbox-image"><img src="../media/11692/HIA-Logo.png" width=110px height=110 /></img></div>
      </div>
      <a href="http://www.hapkido.co" target="blank">Click to Visit</a>
            </div></li>
<li>
      <div class="showbox"><a href="http://www.martialartsgoldcoast.net" target="blank">Warrior Hapkido</a>
      <div class="showbox-inner">
      <p>Warrior Hapkido GoldCoast, QLD</p>
      <div class="showbox-image"><img src="../media/11710/warriorhapkido.png" width=110px height=110 /></div>
      </div>
      <a href="http://www.martialartsgoldcoast.net" target="blank">Click to Visit</a>
            </div></li>
<li>
      <div class="showbox"><a href="http://www.steveshapkido.com.au" target="blank">Steve's Hapkido</a>
      <div class="showbox-inner">
      <p>Steve's Hapkido Brisbane, QLD</p>
      <div class="showbox-image"><img src="../media/11704/SHA-Bris.png" width=110px height=110 /></div>
      </div>
       <a href="http://www.steveshapkido.com.au" target="blank">Click to Visit</a>
        </div></li>
  </ul> 
</div>

I've included the style (even though this would be a seperate stylesheet) the issue i have is that every time i create a variable to display the items i want i just seem to make a complete mess of it.

The items i want to display are all "showcaseItem" document types i have created under a "showcaseFolder" off the root node.

The properties i want to display from each showcaseItem are:

dojangName - textstring

dojangUrl - textstring

dojangDescription - simple editor

dojangImage - Image Picker(from media)

Look - obviously i'm lost, ideally this is the "sort" of information i would like to present......

<li>
<div class="showbox"><a href="http://@showcaseItem.dojangUrl" target="blank">showcaseItem.dojangName</a>
<div class="showbox-inner">
<p>showcaseItem.dojangDescription</p>
<div class="showbox-image"><img src="showcaseItem.dojangImage" width=110px height=110 />    </div>
</div>
<a href="http://@showcaseItem.dojangUrl" target="blank">Click to Visit</a>
</div></li>

BUT i just don't know where to go from here so that i can:

List each child under the parent folder
Limit the list to 5 items that change at random (wish item)

Can anyone help?

Have a look at my dummy site http://propertymj.com (chrome or firefox only).

Douglas Ludlow Douglas Ludlow · Accepted Answer · 2012-08-19T03:46:28

Something like this should work:

@{
// Get showcaseFolder:
var showcaseFolder = Library.NodeById(folderId);

// For debugging, output the name:
@showcaseFolder.Name

// Get five children at random:
var showcaseItems = showcaseFolder.Children.Random(5);

// For debugging, output the count:
@showcaseItems.Count()

// Iterate through items:
<ul>
@foreach (var item in showcaseItems)
{
    <li>
        <div class="showbox"><a href="http://@item.dojangUrl" target="blank">@item.dojangName</a>
            <div class="showbox-inner">
                <p>@item.dojangDescription</p>
                <div class="showbox-image"><img src="@Library.MediaById(item.dojangImage).umbracoFile" width=110px height=110 /></div>
            </div>
            <a href="http://@item.dojangUrl" target="blank">Click to Visit</a>
        </div>
    </li>
}
</ul>
}

Have a look at this answer for some good resources on learning more about Umbraco's Razor syntax.

Umbraco, macro, render content into list from doc onto site template part

1 Answers