studio-variable/index-main
4
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity Actions

feat: responsive images for investigation template

Browse source 
Add srcsets in config:
- cover-hero: 940px fixe ≥1000px, 90vw en dessous
- body-full: 100vw (1 colonne)
- body-half: 50vw ≥768px, 90vw en dessous (2 colonnes)

Apply in templates/snippets:
- Cover hero → snippet picture + cover-hero
- Body 1-col images → snippet picture + body-full
- Body 2-col images → snippet picture + body-half
- gallery.php → snippet picture (sizes/srcset paramétrables)
- beforeafter.php → srcset/sizes sur <img> (pas de <picture> pour ne pas
  casser le JS du slider)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-27 13:51:48 +01:00
parent 7bdc58a346
commit df31382a97
4 changed files with 72 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

30
site/templates/investigation.php
View file

@ -49,7 +49,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
<!-- HERO IMAGE (cover) -->
<div id="investigation__hero">
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $page->title()->esc() ?>">
<?php snippet('picture', [
'file' => $cover,
'alt' => $page->title()->value(),
'sizes' => '(min-width: 1000px) 940px, 90vw',
'srcsetName' => 'cover-hero',
'lazy' => false,
]) ?>
</figure>
<?php if ($page->heroCaption()->isNotEmpty()): ?>
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
@ -199,7 +205,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
<?php $image = $block->image()->toFile(); ?>
<?php if ($image): ?>
<figure>
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
<?php snippet('picture', [
'file' => $image,
'alt' => $image->alt()->value(),
'sizes' => '100vw',
'srcsetName' => 'body-full',
'lazy' => true,
]) ?>
</figure>
<?php if ($image->caption()->isNotEmpty()): ?>
<p class="caption"><?= $image->caption()->html() ?></p>
@ -209,7 +221,11 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
<?php elseif ($block->type() === 'beforeafter'): ?>
<div class="media">
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
<?php snippet('blocks/' . $block->type(), [
'block' => $block,
'imgSizes' => '100vw',
'imgSrcset' => 'body-full',
]) ?>
</div>
<?php elseif ($block->type() === 'video'): ?>
@ -242,7 +258,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
<?php $image = $block->image()->toFile(); ?>
<?php if ($image): ?>
<figure>
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
<?php snippet('picture', [
'file' => $image,
'alt' => $image->alt()->value(),
'sizes' => '(min-width: 768px) 50vw, 90vw',
'srcsetName' => 'body-half',
'lazy' => true,
]) ?>
</figure>
<?php if ($image->caption()->isNotEmpty()): ?>
<p class="caption"><?= $image->caption()->html() ?></p>