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!

You're pretty close already, while overall I'd recommend organising the images into a single object or a nested array, but to stick with the template question you'll want something more like this:

<ul class="slides"> 
    <% loop ClientGalleryImages %> 
    <% if $Odd %> 
        <li> 
            <a href="#"> 
                <img src="$URL" alt="$Title" /> 
    <% else_if $Even %> 
                <img src="$URL" class="color-img" alt="$Title" /> 
            </a> 
        </li> 
    <% end_if %> 
    <% end_loop %> 
</ul> 
 

Hey Stephenmcm,
Thank you for the speedy reply! This arrangement has done the trick perfectly.

Out of interest, please could you explain how you would organise the images into a single object or a nested array? I think the requirement that the client make sure the images are uploaded in the correct order may be too prone to human error

For reference, here is the successful output:

<li>
  <a href="/unify/?flushtoken=b207008e864c6d4a0c2ba691dbe29faa&flush=1#">
    <img src="/unify/assets/client-gallery-carousel/aztec-grey.png" alt="aztec grey" />
    <img src="/unify/assets/client-gallery-carousel/aztec.png" class="color-img" alt="aztec" />
  </a>
</li>
<li>
  <a href="/unify/?flushtoken=b207008e864c6d4a0c2ba691dbe29faa&flush=1#">
    <img src="/unify/assets/client-gallery-carousel/cisco-grey.png" alt="cisco grey" />
    <img src="/unify/assets/client-gallery-carousel/cisco.png" class="color-img" alt="cisco" />
  </a>
</li>