Hi there,
I'm hoping somebody might be able to shed some light on how to solve this. I am trying to create a gallery of images. Each list item in the gallery has 2 images - a black & white image and a colour image that appears on hover. All the images are in an array, in alternating b&w and colour versions (I've attached a screenshot of the CMS for reference). In the .ss template I want to loop through the array, outputting odd and even URLs to the images. I have tried writing the loop a few different ways without success. Here is what I currently have:
...
<ul class="slides">
<% loop ClientGalleryImages %>
<li>
<a href="#">
<% if $Odd %>
<img src="$URL" alt="$Title" />
<% else_if $Even %>
<img src="$URL" class="color-img" alt="$Title" />
<% end_if %>
</a>
</li>
<% end_loop %>
</ul>
...
This outputs the following HTML:
...
<ul class="slides">
<li>
<a href="/unify/#">
<img src="/unify/assets/client-gallery-carousel/aztec-grey.png" alt="aztec grey" />
</a>
</li>
<li>
<a href="/unify/#">
<img src="/unify/assets/client-gallery-carousel/aztec.png" class="color-img" alt="aztec" />
</a>
</li>
...
This is an example of the output I am trying to generate:
...
<ul class="slides">
<li>
<a href="#">
<img src="assets/img/clients/hp_grey.png" alt="" />
<img src="assets/img/clients/hp.png" class="color-img" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="assets/img/clients/igneus_grey.png" alt="" />
<img src="assets/img/clients/igneus.png" class="color-img" alt="" />
</a>
</li>
...
I've obviously got the Silverstripe template syntax wrong, if there is a smarter way to achieve what I am trying - any insight would be much appreciated!