julienmonnerie/site/templates/home.twig

{% extends "base.twig" %}

{% block main %}
    <main class="home">

        <h1 class="home__title">{{ page.title }}</h1>

        <section class="home__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="home__gallery-item">
                        {% if galleryItem.related_image().isNotEmpty %}
                            {% set relatedImage = galleryItem.related_image().toFile() %}
                            <div class="home__carousel 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="home__main-image"
                                 src="{{ mainImage.url }}"
                                 srcset="{{ mainImage.srcset() }}"
                                 alt="{{ mainImage.alt_text }}">
                        {% endif %}
                        {% if galleryItem.caption().isNotEmpty %}
                            {% set caption = galleryItem.caption() %}
                            <figcaption class="home__image-caption">{{ caption | raw  }}</figcaption>
                        {% endif %}
                    </figure>
                {% endif %}
            {% endfor %}
        </section>

    </main>
{% endblock %}