valentin_le_moignandClaude Opus 4.8
b579febb87
- Vidéo en média d'en-tête de la fiche projet quand elle existe (comme la vignette d'index), sinon première image. La grille inclut la 1re image quand l'en-tête est une vidéo pour ne pas la perdre. - Diaporama : images en HD (srcset @Nx via jquery.lazy) au lieu de la version SD 640px ; affichage plein écran sans rognage (object-fit contain, dimensions viewport). - Diaporama : clic sur le fond ferme, navigation clavier (flèches + Échap). Indexation robuste par URL (data-src/src) corrigeant l'ouverture systématique sur l'image d'en-tête. - Cartes projet mobile/tablette : titre ferré à gauche sous l'image au lieu d'être centré. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
60 lines
2.6 KiB
Twig
60 lines
2.6 KiB
Twig
{% extends 'partials/base.html.twig' %}
|
|
|
|
{% block content %}
|
|
{% set class_suffix = page.parent.title|lower %}
|
|
<div id="reader" class="content" data-barba="container" data-barba-namespace="reader">
|
|
<div id="header-project">
|
|
<h2 class="info-project-{{ class_suffix }}">
|
|
<span data-text="{{ page.title }}">{{ page.title }}</span>
|
|
</h2>
|
|
</div>
|
|
<a href="{{ page.parent.parent.url }}"><div id="close-project" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div></a>
|
|
{% set cover_video = page.media.videos|first.url %}
|
|
<figure id="cover-image-mobile" class="{{ class_suffix }}">
|
|
{% if cover_video != null %}
|
|
<video autoplay muted loop playsinline src="{{ cover_video }}" type="video/mp4"></video>
|
|
{% else %}
|
|
<img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
|
|
{% endif %}
|
|
</figure>
|
|
<div id="info-project" class="info-project-{{ class_suffix }}">
|
|
<h2 id="main-project-title">{{ page.title }}</h2>
|
|
<div>
|
|
{% for tag in page.taxonomy.tag %}
|
|
{{ tag }},
|
|
{% endfor %}
|
|
{{ page.date|date("Y") }}
|
|
</div>
|
|
</div>
|
|
<figure id="cover-image" class="{{ class_suffix }}">
|
|
{% if cover_video != null %}
|
|
<video autoplay muted loop playsinline src="{{ cover_video }}" type="video/mp4"></video>
|
|
{% else %}
|
|
<img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
|
|
{% endif %}
|
|
</figure>
|
|
<hr>
|
|
<div id="project-description">
|
|
{{ page.content|raw }}
|
|
</div>
|
|
|
|
<div id="project-images-grid">
|
|
{% for image in page.media.images %}
|
|
{# quand l'en-tête est une vidéo, la 1re image n'est pas affichée ailleurs : on l'inclut dans la grille #}
|
|
{% if cover_video != null or image != page.media.images | first %}
|
|
<figure class="{{ class_suffix }}">
|
|
<img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
|
|
</figure>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% block related_pages %}
|
|
{% include 'partials/relatedpages.html.twig' %}
|
|
{% endblock %}
|
|
{% block carousel %}
|
|
{% include 'partials/carousel.html.twig' %}
|
|
{% endblock %}
|
|
</div>
|
|
{% endblock %}
|