George Mason University Antonin Scalia Law School

How to Create a Cascade Format in Velocity for a Carousel

This is the context page from template for reference:

<system-data-structure>
  <carousel>yes</carousel>
    <slide>
      <image type="file">
      <content></content>
      <path>/_images/paintbrush.jpeg</path>
      <link>site://DEV-Donny/_images/paintbrush.jpeg</link>
      <site>DEV-Donny</site>
      <name>paintbrush.jpeg</name>
     <file-size>330352</file-size>
     <width>1920</width>
     <height>1280</height>
     </image>
     <heading>Paintbrushes</heading>
     <alt>Paintbrushes</alt>
   </slide>
   <slide>
     <image>
     <path>/</path>
     </image>
     <heading/>
     <alt><alt/>
   </slide>
   <slide>
     <image type="file">
     <content></content>
     <path>/_images/computer-coffee.jpeg</path>
     <link>site://DEV-Donny/_images/computer-coffee.jpeg</link>
     <site>DEV-Donny</site>
     <name>computer-coffee.jpeg</name>
     <file-size>174729</file-size>
     <width>1920</width>
     <height>1080</height>
     </image>
     <heading>Computer &amp; Coffee</heading>
     <alt>Computer and Coffee</alt>
  </slide>
  <editor>This is my first page.</editor>
</system-data-structure>

Create Cascade format using Velocity:

#set($array = $currentPage.getStructuredDataNodes("slide"))
#set($slides = [])
#foreach($item in $array)
#if($item.getChild("image").asset.path)
#set($dummy = $slides.add($item))
#end
#end
#if($slides.size() > 0 && $currentPage.getStructuredDataNode("carousel").textValue == "yes" )
<header class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($slideNumber = $foreach.index)
<li class="${class}" data-slide-to="${slideNumber}" data-target="#myCarousel"></li>
#end
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($image = $slide.getChild("image").asset.link)
#set($heading = $slide.getChild("heading").textValue)
<div class="item ${class}">
<div class="fill" style="background-image:url('[system-asset]${image}[/system-asset]');"></div>
<div class="carousel-caption">
<h1>$_EscapeTool.xml($heading)</h1>
</div>
</div>
#end
</div>
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" data-slide="next" href="#myCarousel">
<span class="icon-next"></span>
</a>
</header>
#end

This is the transformation result:

#set($array = $currentPage.getStructuredDataNodes("slide"))
#set($slides = [])
#foreach($item in $array)
#if($item.getChild("image").asset.path)
#set($dummy = $slides.add($item))
#end
#end
#if($slides.size() > 0 && $currentPage.getStructuredDataNode("carousel").textValue == "yes" )
<header class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($slideNumber = $foreach.index)
<li class="${class}" data-slide-to="${slideNumber}" data-target="#myCarousel"></li>
#end
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($image = $slide.getChild("image").asset.link)
#set($heading = $slide.getChild("heading").textValue)
<div class="item ${class}">
<div class="fill" style="background-image:url('[system-asset]${image}[/system-asset]');"></div>
<div class="carousel-caption">
<h1>$_EscapeTool.xml($heading)</h1>
</div>
</div>
#end
</div>
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" data-slide="next" href="#myCarousel">
<span class="icon-next"></span>
</a>
</header>
#end