host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Set up home style and Splide carousel

Browse source
This commit is contained in:
Paul Nicoué 2025-05-23 17:17:38 +02:00
parent 750f457488
commit 9afaa44c4b
14 changed files with 222 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

3
site/templates/base.twig
View file

@ -32,6 +32,9 @@
{% block header %}
<header>
<div class="header__logo">
{{ svg('icons/logo.svg') | raw }}
</div>
</header>
{% endblock %}

26
site/templates/home.twig
View file

@ -1,33 +1,43 @@
{% extends "base.twig" %}
{% block main %}
<main>
<main class="home">
<section class="gallery" aria-label="{{ site.title }}'s artwork gallery">
<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="gallery__item">
<figure class="home__gallery-item">
{% if galleryItem.related_image().isNotEmpty %}
{% set relatedImage = galleryItem.related_image().toFile() %}
<div class="splide">
<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 }}">
<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 }}">
<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 }}">
<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="gallery__caption">{{ caption | raw }}</figcaption>
<figcaption class="home__image-caption">{{ caption | raw }}</figcaption>
{% endif %}
</figure>
{% endif %}