Generate thumbnail in content text?

In the text content in the panel it’s possible to drag in images like this:

(image: stugor1.jpg)
(image: stugor2.jpg)
(image: stugor3.jpg)

It generates a figure and an image element inside it. I want to resize them as thumbnails:

  • If it’s three images in a row I want them as some predefined width + height.
  • If it’s two images in a row I want them as some other predefined width + height.

Do I need to explode the figure elements and then do some crazy regex on this or is there a simpler solution?

1 Like

I don’t know if it can help, but I use this plugin for this:

Figure Plugin

1 Like

You can overwrite the image Kirbytag with your own and make it output the code you need.

1 Like

@Constantin @lukasbestle

Now I’ve read about kirbytext tags and it seems like the best fit to do it well. It’s really good info that the image can be overwritten.

I guess that the tags are not aware of where the other tags are so I probably will solve it something like this:

(image: stugor1.jpg size: 3)
(image: stugor2.jpg size: 3)
(image: stugor3.jpg size: 3)

Then the image will know that it should use a third of the full size. I have not tried it yet.

1 Like

Yes, exactly, you would need a parameter, so some sort of input from the user side is required.

1 Like

And here is the final solution for others who need it.

(image: stugor1.jpg size: 3)
(image: stugor2.jpg size: 3)
(image: stugor3.jpg size: 3)
<?php
kirbytext::$tags['image'] = array(
	'attr' => array(
		'size'
	),
	'html' => function($tag) {
		$wrap = 720;
		$gutter = 10;
		$space = $gutter * $tag->attr('size') - $gutter;
		$width = $wrap - $space;
		$size = $width / $tag->attr('size');
		
		$p = $tag->page();
		$image = $p->image( $tag->attr('image') );

		$thumb = thumb(
			$image,
			array(
				'width' => $size,
				'height' => $size,
				'crop' => true
			)
		);

		return $thumb;
	}
);

4 Likes

@jenstornell Thank you !

Hm, flirting with the idea of a summer vacation in Sweden now …:wink:

Yea, why not rent all the three houses and we can throw a releaseparty here in Sweden for Kirby 2.3. :wink:

I should probably stop referencing this site. Else I’ll might get banned for spam abuse. :slightly_smiling:

Digging in the forum…
So, this custom image tag overwrites the regular one, and the usual attributes like width or link are no longer available.

But is it possible to extend a kirbytag? Like adding an attribute to image without having to copy all the code in a new tag?

1 Like

You could do something like this:

$oldFunction = kirbytext::$tags['image']['html'];
kirbytext::$tags['image'] = [
  'attr' => [...],
  'html' => function($tag) use($oldFunction) {
    $result = call($oldFunction, $tag);
    
    // extend the result with your own code
    // ...
    
    // return the new result
    return $result;
  }
];
3 Likes

Ooo very clever! Thank you @lukasbestle

Now I’m at this again, when I discovered that my site was not thumbnailing my content images.

I’ve written a small plugin based on the @lukasbestle solution. Thanks to @texnixe for improving the code.

<?php
$oldFunction = kirbytext::$tags['image']['html'];
kirbytext::$tags['image'] = [
  'html' => function($tag) use($oldFunction) {
    $oldFilepath = $tag->page()->contentUrl() . '/' . $tag->attr('image');

    $image = $tag->file($tag->attr('image'));
    $thumb = thumb($image, 'content');

    $tag->attr('image', $thumb->url());

    $result = call($oldFunction, $tag);
    $result = str_replace($oldFilepath, $thumb->url(), $result);
    
    return $result;
  }
];

Some things to know before using this solution:

  • The width and height are hardcoded. A better way would probably be thumbnail presets in the long run.
  • All the images are placed in the root of the thumbnails folder.

Question

If there is a to use nested page folders, or prefixed image filenames, I would like to hear about it. When having all images placed in the root they could possibly be overwritten by other images with the same name in other pages.

@jenstornell Maybe I’m missing something, but why do you create a new Asset?

It’s the only way I could make it work without too much hacking.

Return just the $media object does not work (I have tried it). Also using $tag->attr('image'); as first param to thumb did not work.

But you are really smart, so I guess you have already figured out a better solution? :slight_smile:

You can get the image object like this:

$image = $tag->file($tag->attr('image'));
1 Like

Oh yes. That’s much better! Thanks! :slight_smile:

Somewhere there already exists a plugin that creates responsive thumbs… Can’t remember who created this and I modified it for my purposes.

$oldFunction = kirbytext::$tags['image'];
$attr = ['crop'];
kirbytext::$tags['image'] = [
    'attr' => array_merge($oldFunction['attr'], $attr),
    'html' => function ($tag) use ($oldFunction) {
        $image = $tag->file($tag->attr('image'));

        if (!$image) {
            return $result = call($oldFunction['html'], $tag);
        }

        $widths = c::get(
            'responsiveimage.widths',
            [
                2400,
                2200,
                2000,
                1800,
                1400,
                1200,
                1000,
                800,
                600,
                400,
                320,
            ]
        );

        $srcset = [];
        foreach ($widths as $width) {
            if ($image->width() < $width) {
                continue;
            }
            $imageResized = $image->resize($width);
            if($tag->attr('crop')) {
              $imageResized = $image->focusCrop($width, $width/$tag->attr('crop'));
            }

            $srcset[] = $imageResized->url() . ' ' . $imageResized->width() . 'w';
        }

        $result = call($oldFunction['html'], $tag);
        $result = str_replace('<img', '<img srcset="' . implode(', ', $srcset) . '"', $result->toString());

        return $result;
    }
];

Edit: Found the source: https://github.com/Pascalmh/kirby-responsiveimage/blob/master/kirby-responsiveimage.php

Would make sense to mix and match the two approaches. Because while this creates the srcset attribute, it doesn’t replace the original image.

1 Like