close #46 : optimisation des images en reprenant le template du snipet pour les blocks image

assets/css/src/article.css

@@ -36,6 +36,14 @@ article h3 {
   margin-bottom: calc(1 * var(--unit--vertical));
 }
 
+article li, article ol{
+  margin-left: var(--unit--horizontal);
+}
+
+article figure img{
+  max-width: 100%;
+}
+
 @media screen and (min-width: 640px) {
   article #main-content {
     max-width: auto;

assets/css/src/reset.css

@@ -6,7 +6,8 @@ h3,
 h4,
 h5,
 p,
-ul {
+ul,
+figure {
   margin: 0;
   padding: 0;
 }

assets/css/src/texts.css

@@ -28,7 +28,8 @@ h4 *,
 h5,
 h5 *,
 p,
-p *:not(strong) {
+p *:not(strong),
+figcaption {
   font-weight: var(--font-weight-light);
   line-height: 1;
 }
@@ -168,7 +169,7 @@ a:not(.no-underline) {
   text-decoration-thickness: 0.5px;
 }
 
-article p:not(:last-child) {
+article p:not(:last-child), article ul:not(:last-child), article figure:not(:last-child){
   margin-bottom: var(--unit--vertical);
 }
 

site/blueprints/fields/bodyBlocks.yml

@@ -33,4 +33,4 @@
         text:
           extends: fields/body
           label: false
-    image: true
+    image: true

site/blueprints/pages/linear.yml

@@ -42,7 +42,7 @@ tabs:
               isArchiveMode: false
           body:
             extends: fields/body
-            help: Anciens champs conservés pour archive (ne pas remplir pour les nouveaux articles)
+            help: Anciens champs conservés pour archive (ne pas remplir pour les nouveaux articles). Ce champs ne sera utiliser en front que si le champs "corp" normal est vide.
             width: 3/4
             when:
               isHtmlMode: false

site/snippets/blocks/image.php

@@ -0,0 +1,37 @@
+<?php
+
+/** @var \Kirby\Cms\Block $block */
+$alt     = $block->alt();
+$caption = $block->caption();
+$crop    = $block->crop()->isTrue();
+$link    = $block->link();
+$ratio   = $block->ratio()->or('auto');
+$src     = null;
+$srcset  = null;
+
+if ($block->location() == 'web') {
+    $src = $block->src()->esc();
+} elseif ($image = $block->image()->toFile()) {
+    $alt = $alt->or($image->alt());
+    $src = $image->url();
+    $srcset = $image->srcset([300, 600, 900, 1200, 1800]);
+}
+
+?>
+<?php if ($src): ?>
+<figure<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?>>
+  <?php if ($link->isNotEmpty()): ?>
+  <a href="<?= Str::esc($link->toUrl()) ?>">
+    <img src="<?= $src ?>" alt="<?= $alt->esc() ?>"<?php if ($srcset): ?> srcset="<?= $srcset ?>" sizes="min(60vw, 45rem)"<?php endif ?> loading="lazy">
+  </a>
+  <?php else: ?>
+  <img src="<?= $src ?>" alt="<?= $alt->esc() ?>"<?php if ($srcset): ?> srcset="<?= $srcset ?>" sizes="min(60vw, 45rem)"<?php endif ?> loading="lazy">
+  <?php endif ?>
+
+  <?php if ($caption->isNotEmpty()): ?>
+  <figcaption>
+    <?= $caption ?>
+  </figcaption>
+  <?php endif ?>
+</figure>
+<?php endif ?>

site/templates/linear.php

@@ -32,6 +32,8 @@
       <?php endif ?>
       <?php if ($page->isHtmlMode()->isTrue()): ?>
       <?= $page->htmlBody()->kt() ?>
+      <?php elseif ($page->bodyBlocks()->isNotEmpty()): ?>
+      <?= $page->bodyBlocks()->toBlocks() ?>
       <?php else: ?>
       <?= $page->body() ?>
       <?php endif ?>