Wrap data-attribute around all <img> inside a kirby block

Kirby 3 Solved ✅
1

I am using Kirby blocks for editing my blog posts. I would like to add to each that is being used in my block a data-id with the id of the image

The data-id-attribute should contain the image-id for static site generation in order to fetch the images automatically (with nuxt). My img tag should hence look more like this:

<img src=“imgurl/image” data-id=“general/0a0fa2bed2-1642700311/image.jpg”>

Here’s how I am outputting the json representation:

$data = [
  'text' => ['html' => $page->text()->toBlocks()->toHtml()],
];

echo json_encode($data);

What’s the best approach to modify the block? Using a regular expression or is there a smarter way of modifying each element inside the “block” object ?

2

I am basically stuck here:

$data = $page->text()->toBlocks()->map(function ($note) {
  return [
    $note->toHtml()
  ];
});
echo json_encode($data);

which outputs valid json, but I have no idea how to manipulate the image hence it’s not a collection anymore

{
  "data": {
    "7383d54b-8776-4e78-b0fd-49848c24d3cd": [
      "<p>some text and stuff</p>"
    ]
    "976a8b8f-03fb-481e-9b7c-0d89cd5b8b79": [
      "<figure data-ratio=\"auto\">\n    <img src=\"http://127.0.0.1:8000/media/pages/general/0a0fa2bed2-1642700311/image.jpg\" alt=\"\">\n  \n  </figure>\n"
    ]
  }
}
3

Wouldn’t it make sense to replace the image block snippet?

1 Like
4

Holy moly, that was easy! Thank you so much! For reference, here’s what I did: I’ve created image.php in snippets/blocks/ and made sure that data-id attribute is rendered correctly:

<?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;

if ($block->location() == 'web') {
    $src = $block->src()->esc();
} elseif ($image = $block->image()->toFile()) {
    $alt = $alt ?? $image->alt();
    $src = $image->url();
    $id = $image->id();
}

?>
<?php if ($src): ?>
<figure<?= attr(['data-ratio' => $ratio, 'data-crop' => $crop], ' ') ?>>
  <?php if ($link->isNotEmpty()): ?>
  <a href="<?= esc($link->toUrl()) ?>">
    <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
  </a>
  <?php else: ?>
  <img src="<?= $src ?>" data-id="<?= $id ?>" alt="<?= $alt->esc() ?>">
  <?php endif ?>

  <?php if ($caption->isNotEmpty()): ?>
  <figcaption>
    <?= $caption ?>
  </figcaption>
  <?php endif ?>
</figure>
<?php endif ?>