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