Refactor blocks architecture to modular approach
- Restore "1/2, 1/2" layout for flexible column combinations - Simplify beforeafter block: remove toggle and text field, keep only image comparison - Create new video block with URL support (YouTube/Vimeo/direct files) - Create horizontal-gallery block for scrollable image galleries - Add H4 heading level support - All blocks now modular: combine with text blocks in 2-column layouts Blocks available: - Text, Heading (h2-h4), Image, Video - Before/After comparison (no text) - Horizontal gallery (with text below) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
6251d8f09f
commit
561932724b
23 changed files with 539 additions and 252 deletions
|
|
@ -1,121 +1,98 @@
|
|||
<?php
|
||||
/** @var \Kirby\Cms\Block $block */
|
||||
$isBeforeAfter = $block->isBeforeAfter()->toBool();
|
||||
$image = $block->image()->toFile();
|
||||
$imageBefore = $block->imageBefore()->toFile();
|
||||
$imageAfter = $block->imageAfter()->toFile();
|
||||
$caption = $block->caption()->value();
|
||||
$text = $block->text()->value();
|
||||
?>
|
||||
|
||||
<div class="subsection-w-media">
|
||||
|
||||
<div class="media">
|
||||
<?php if ($isBeforeAfter && ($imageBefore || $imageAfter)): ?>
|
||||
<!-- Mode avant/après : slider -->
|
||||
<div class="container slider-before-after">
|
||||
<div class="image-container">
|
||||
<?php if ($imageBefore): ?>
|
||||
<img class="image-before slider-image"
|
||||
src="<?= $imageBefore->url() ?>"
|
||||
alt="<?= $imageBefore->alt()->or('Image avant')->esc() ?>" />
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($imageAfter): ?>
|
||||
<img class="image-after slider-image"
|
||||
src="<?= $imageAfter->url() ?>"
|
||||
alt="<?= $imageAfter->alt()->or('Image après')->esc() ?>" />
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value="50"
|
||||
aria-label="Pourcentage de la photo avant affichée"
|
||||
class="slider"
|
||||
/>
|
||||
<div class="slider-line" aria-hidden="true"></div>
|
||||
<div class="slider-button" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<line
|
||||
x1="128"
|
||||
y1="40"
|
||||
x2="128"
|
||||
y2="216"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<line
|
||||
x1="96"
|
||||
y1="128"
|
||||
x2="16"
|
||||
y2="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<polyline
|
||||
points="48 160 16 128 48 96"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></polyline>
|
||||
<line
|
||||
x1="160"
|
||||
y1="128"
|
||||
x2="240"
|
||||
y2="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<polyline
|
||||
points="208 96 240 128 208 160"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<?php elseif (!$isBeforeAfter && $image): ?>
|
||||
<!-- Mode simple : une seule image -->
|
||||
<div class="container-figure fig-simple">
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>" />
|
||||
</figure>
|
||||
</div>
|
||||
<?php if ($imageBefore || $imageAfter): ?>
|
||||
<div class="container slider-before-after">
|
||||
<div class="image-container">
|
||||
<?php if ($imageBefore): ?>
|
||||
<img class="image-before slider-image"
|
||||
src="<?= $imageBefore->url() ?>"
|
||||
alt="<?= $imageBefore->alt()->or('Image avant')->esc() ?>" />
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($caption): ?>
|
||||
<p class="caption"><?= $caption ?></p>
|
||||
<?php if ($imageAfter): ?>
|
||||
<img class="image-after slider-image"
|
||||
src="<?= $imageAfter->url() ?>"
|
||||
alt="<?= $imageAfter->alt()->or('Image après')->esc() ?>" />
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
<?php if ($text): ?>
|
||||
<div class="subsection-txt">
|
||||
<?= $text ?>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value="50"
|
||||
aria-label="Pourcentage de la photo avant affichée"
|
||||
class="slider"
|
||||
/>
|
||||
<div class="slider-line" aria-hidden="true"></div>
|
||||
<div class="slider-button" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<line
|
||||
x1="128"
|
||||
y1="40"
|
||||
x2="128"
|
||||
y2="216"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<line
|
||||
x1="96"
|
||||
y1="128"
|
||||
x2="16"
|
||||
y2="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<polyline
|
||||
points="48 160 16 128 48 96"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></polyline>
|
||||
<line
|
||||
x1="160"
|
||||
y1="128"
|
||||
x2="240"
|
||||
y2="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<polyline
|
||||
points="208 96 240 128 208 160"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
</div>
|
||||
|
||||
<?php if ($caption): ?>
|
||||
<p class="caption"><?= $caption ?></p>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue