Need help to create custom kirbytag

Kirby 2 Solved āœ…
1

Iā€™m struggling to create a custom kirbytag who looks something like this:

<figure class="content-img">
    <?php if($image = $data->image()): ?>
		<img src="<?php echo thumb($image, array(
				'width' => 480,
				'quality' => 1
			))->url(); ?>"
			 data-src="<?php echo $image->resize(1140)->url() ?>"
			 alt=""
			 title=""
             class="lazyload blur-up" />
	<?php endif ?>
</figure>

Any help is much appreciated!

2

I guess you want to pass the image filename to the Kirbytag and then print the markup you posted, right?
What exactly are you struggling with? I will try to help.

3

Hello Lukas,

yes exactly!

I got this gist https://gist.github.com/mbecher/0106039f494258728d52 but Iā€™m not sure how to start with my much simpler example.
It would be really nice to point me in the right direction :slight_smile:

4

Try something like this (untested):

<?php

kirbytext::$tags['figure'] = [
  'html' => function($tag) {
    $attr = $tag->attr('figure');
    
    $image = $tag->file($attr);
    if(!$image) return '';
    
    $figure = new Brick('figure');
    $figure->addClass('content-img');
    
    $img = new Brick('img');
    $img->attr('src', thumb($image, array('width' => 480, 'quality' => 1))->url());
    $img->attr('data-src', $image->resize(1140)->url());
    $img->attr('alt', '');
    $img->attr('title', '');
    $img->attr('class', 'lazyload blur-up');
    
    $figure->append($img);
    return $figure;
  }
];
1 Like
5

Awesome, thanks Lukas!

Works perfectly ā€¦