How to display first image of gallery?

Question

I have a container of images populated when the page is requested with the images available in a certain directory (so number of images is variable) using the Thymeleaf rendering framework:

<div id="lightgallery">
    <a th:each="i : ${content.images}}"><img th:src="i"></a>
</div>

When doing that all images are displayed on the page below each other (while I would like to only display the first image as a place holder). When I click on one of them, the light gallery opens with the images as thumbnails.

I would like to now hide all images except the first one, which will be the place holder for the gallery. Clicking it will then open the gallery, where the placeholder image becomes the first image of the gallery. Kind of like such:

<div id="lightgallery">
    <a><img src="first.png"></a>
    <a th:each="img, i : ${content.images}}" th:if="${i > 0}"><img th:src="i"></a>
</div>

Answer 1

You can make it cleaner by rendering the first image together with the loop. Consider declaring a CSS class 'hidden' for display: none and use the it for second images onwards

<div id="lightgallery">
    <a th:each="image, iter : ${content.images}" th:class="${!iter.first} ? hidden">
        <img th:src="${image}">
    </a>
</div>

Answer 2

You can use the property ${i.first} to tell if it's the first image. Here is how I would do it:

<div id="lightgallery">
    <a th:href="${content.images[0]}"><img th:src="${content.images[0]}" /></a>
    <a th:href="${image}"
        style="display: none;"
        th:each="image, i: ${content.images}"
        th:unless="${i.first}"><img th:src="${image}" /></a>
</div>