Как отобразить первое изображение галереи?

Question

У меня есть контейнер изображений, заполняемый при запросе страницы с изображениями, доступными в определенном каталоге (таким образом, число изображений является переменным) с использованием структуры рендеринга Thymeleaf:

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

При этом все изображения отображаются на странице друг под другом (хотя я хотел бы отображать только первое изображение в качестве заполнителя). Когда я нажимаю на одну из них, открывается световая галерея с изображениями в виде миниатюр.

Я бы хотел скрыть все изображения, кроме первого, которое будет заполнять галерею. Нажав на нее, вы откроете галерею, где изображение-заполнитель станет первым изображением галереи. Вроде как такой:

<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

Вы можете сделать это чище, отрисовав первое изображение вместе с циклом. Подумайте об объявлении CSS-класса «скрытым» для отображения: none и используйте его для вторых изображений и далее

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

Answer 2

Вы можете использовать свойство ${i.first}, чтобы определить, является ли это первое изображение. Вот как бы я это сделал:

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