Размещение одного изображения на целевой странице

Question

У меня есть страница галереи, которая отображает множество карточек с домашними животными, внутри каждой карточки есть полный пост с несколькими картинками и подробностями о конкретном питомце. У меня вопрос на странице галереи, где находятся маленькие карточки, я бы хотел, чтобы там была миниатюра, показывающая одно изображение внутри полной карточки, чтобы пользователи заранее знали, как выглядит домашнее животное, а не принуждают. им на самом деле открыть карту, чтобы увидеть детали и изображения.

                <div class="card" data-aos="flip-left" data-aos-duration="1200">
                      <!-- spot where image should go -->
                    <h1><%=post.name %></h1>
                    <span><%=post.fee %></span>
                    <span><%=post.description %></span>
                    <span><%= post.location%></span>  
                    <div><a href="/gallery/pet/<%=post.id %>">View More</a></div>
                </div>
            </div>

Ниже приведен код со страницы показа карты, содержащей полный массив изображений:

    <% post.images.forEach(function(image) { %>
        <img src="<%=image.url %>" alt="Turtle Image" >

    <% }) %>