Creating a custom image tag

The CMS Questions
1

The code I’m using where images are added through a template (site > templates > home.php):

<div class='responsive-image'>
      <div class='placeholder' style='padding-bottom: <?= number_format(100 / $page->image()->ratio(), 5, '.', '') ?>%'></div>

      <img class='lazy lazyload' data-sizes='auto'
          data-src='<?= $page->image()->url() ?>'
          data-srcset='<?= $page->image()->srcset([400, 800, 1020, 2040]) ?>'
          alt='<?= $page->title()->html() ?>'
          width='100%' height='auto'/>
</div>

I would like to get about the same output as I would with the code above when I’m adding images with kirbytag (but probably instead of div class=‘responsive-image’ use a figure class=‘responsive-image’). I’ve figured out how to generate an image but struggling with adding the placeholder. My code in plugins > custom-tags > index.html:

<?php

$originalTag = Kirby\Text\KirbyTag::$types['image'];
Kirby::plugin('your/image', [
  'tags' => [
    'image' => [
      'attr' => array_merge(
        $originalTag['attr'],
        [
          'srcset',
          'sizes',
        ]),

      'html' => function($tag) use ($originalTag)  {

        $file    = $tag->file($tag->value());
        $srcset  = option('srcsets.' . $tag->srcset);
        $sizes   = option('srcset-sizes.' . $tag->sizes);
        $result  = $originalTag['html']($tag);

        if (! $file === true || is_null($srcset) === true || is_null($sizes) === true) {
          return $result;
        };

        $pattern = '/<img.*?>/i';

        $image = Html::img($tag->src, [
          'data-src' => $tag->src,
          'width'  => '100%',
          'height' => 'auto',
          'class'  => 'lazy lazyload',
          'title'  => $tag->title,
          'alt'    => $tag->alt ?? ' ',
          'data-sizes'  => 'auto',
          'data-srcset' => $file->srcset($srcset),
        ]);

        $result = preg_replace($pattern, $image , $result);
        return $result;
      },
    ],
  ],
]);

Help would be very appreciated

2

This is mine, for lazyload and use of srcset like you, maybe you can inspire from it :

<?php

Kirby::plugin('your/plugin', [
    'tags' => [
        'image' => [
            'attr' => [
                'alt',
                'caption',
                'class',
                'height',
                'imgclass',
                'link',
                'linkclass',
                'rel',
                'target',
                'title',
                'width'
            ],
            'html' => function($tag) {
                if ($tag->file = $tag->file($tag->value)) {

                    $tag->src     = $tag->file->url();
                    $tag->alt     = $tag->alt     ?? $tag->file->alt()->or(' ')->value();
                    $tag->title   = $tag->title   ?? $tag->file->title()->value();
                    $tag->caption = $tag->caption ?? $tag->file->caption()->value();
                    $tag->ratio   = $tag->file->ratio();
                        
                    $html = 
                    '<figure>
                        <div class="container" style="padding:0;background:rgb(250,250,250);position:relative;height: 0;display:block;padding-bottom:calc(100% / '. $tag->ratio .')">
                            <img class="lazyload" data-sizes="auto" data-srcset="' . $tag->file->srcset() . '" alt="' . $tag->alt . '">
                        </div>
                        <figcaption>'. kt($tag->caption) . '</figcaption>
                    </figure>';

                    $html = str_replace(array("\r", "\n"), '', $html);

                    return $html;
                } 
            }
        ]
    ]
]);
1 Like
3

Your solution is beautiful. Thank you for taking the time :slight_smile: