Umbraco, макрос, рендеринг содержимого в список из документа в часть шаблона сайта

Полный новый вопрос. Я искал везде (поскольку я не разработчик .NET, мне это сложно), чтобы создать макрос, который извлекает информацию из созданных элементов контента в список.

Вот информация, которую я хотел бы представить:

<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>

Я включил стиль (хотя это будет отдельная таблица стилей), проблема в том, что каждый раз, когда я создаю переменную для отображения нужных мне элементов, мне кажется, что я делаю из этого полный беспорядок.

Элементы, которые я хочу отобразить, представляют собой все типы документов «showcaseItem», которые я создал в папке «showcaseFolder» на корневом узле.

Свойства, которые я хочу отображать из каждого showcaseItem:

dojangName - текстовая строка

dojangUrl — текстовая строка

dojangDescription — простой редактор

dojangImage - Средство выбора изображений (из медиа)

Послушайте - очевидно, я запутался, в идеале это "своего рода" информация, которую я хотел бы представить......

<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>

НО я просто не знаю, куда идти отсюда, чтобы я мог:

1. Список каждого ребенка в родительской папке
2. Ограничьте список до 5 элементов, которые меняются случайным образом (желательный элемент)

Кто-нибудь может помочь?

Взгляните на мой фиктивный сайт http://propertymj.com (только для Chrome или Firefox).