julienmonnerie/site/templates/home.twig

{% extends "base.twig" %}

{% block main %}
    <main>

        <section class="gallery" aria-label="{{ site.title }}'s artwork gallery">
            {% for galleryItem in galleryItems %}
                {% if galleryItem.main_image().isNotEmpty %}
                    {% set mainImage = galleryItem.main_image().toFile() %}
                    <figure class="gallery__item">
                        {% if galleryItem.related_image().isNotEmpty %}
                            {% set relatedImage = galleryItem.related_image().toFile() %}
                            <div class="splide">
                                <div class="splide__track">
                                    <ul class="splide__list">
                                        <li class="splide__slide">
                                            <img class="splide__image" src="{{ mainImage.url }}" srcset="{{ mainImage.srcset() }}" alt="{{ mainImage.alt_text }}">
                                        </li>
                                        <li class="splide__slide">
                                            <img class="splide__image" src="{{ relatedImage.url }}" srcset="{{ relatedImage.srcset() }}" alt="{{ relatedImage.alt_text }}">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        {% else %}
                            <img class="gallery__main-image" src="{{ mainImage.url }}" srcset="{{ mainImage.srcset() }}" alt="{{ mainImage.alt_text }}">
                        {% endif %}
                        {% if galleryItem.caption().isNotEmpty %}
                            {% set caption = galleryItem.caption() %}
                            <figcaption class="gallery__caption">{{ caption | raw  }}</figcaption>
                        {% endif %}
                    </figure>
                {% endif %}
            {% endfor %}
        </section>

    </main>
{% endblock %}