feat: added image text block

site/blueprints/blocks/image-text.yml

@@ -3,11 +3,14 @@ icon: page
 preview: fields
 
 fields:
+  headline:
+    width: 2/3
+    type: text
   image:
     extends: fields/image
     width: 1/3
   text:
-    extends: fields/writer/default
+    extends: fields/writer/simple
     width: 2/3
     required: true
   imagePosition:

site/snippets/blocks/imageText.php

@@ -0,0 +1,39 @@
+<?php if(isset($block)): ?>
+  <?php
+    $image = $block->image()->toFile();
+    $imagePosition = $block->imagePosition();
+
+    $imageColumns = $imagePosition == 'left' ? 'md:col-start-1' : 'md:col-start-7';
+    $textColumns = $imagePosition == 'left' ? 'md:col-start-6' : 'md:col-start-1';
+    ?>
+
+  <div class="col-span-4 md:col-start-2 md:col-span-10 mb-xxl md:grid md:grid-cols-10">
+    <?php if ($block->headline()->isNotEmpty()): ?>
+      <?php snippet('components/text', [
+          'text' => $block->headline(),
+          'variant' => 'headline-3',
+          'class' => 'mb-m md:col-span-5 '.$textColumns,
+          'tag' => 'h3',
+      ]) ?>
+    <?php endif; ?>
+
+    <div class="<?= $textColumns ?> mb-m md:col-span-5 md:row-start-2">
+      <?php snippet('components/richtext', slots: true) ?>
+        <?= $block->text() ?>
+      <?php endsnippet() ?>
+    </div>
+
+    <figure class="md:row-start-2 md:col-span-4 <?= $imageColumns ?>">
+      <img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>" class="w-full">
+
+      <?php if ($image->caption()->isNotEmpty()): ?>
+        <figcaption class="mt-s">
+          <?php snippet('components/text', [
+              'text' => $image->caption(),
+              'variant' => 'copy-small',
+          ]) ?>
+        </figcaption>
+      <?php endif; ?>
+    </figure>
+  </div>
+<?php endif; ?>

site/snippets/image.php

@@ -2,6 +2,9 @@
 /* Defaults */
 
 $loading = $loading ?? 'lazy';
+
+$thumb = $image->thumb($src);
+
 /*
   snippet('image', [
     'image' => $image,
@@ -26,7 +29,9 @@
 <?php if (isset($image) && isset($src)): ?>
     <img
         alt="<?= $image->alt() ?>"
-        src="<?= $image->thumb($src)->url() ?>"
+        width="<?= $thumb->width() ?>"
+        height="<?= $thumb->height() ?>"
+        src="<?= $thumb->url() ?>"
         loading="<?= $loading ?>"
         <?php if (isset($srcset)): ?>srcset="<?= $image->srcset($srcset) ?>"<?php endif ?>
         <?php if (isset($sizes)): ?>sizes="<?= $sizes ?>"<?php endif ?>