Overridding Image Tags More Elegantly?

For the convenience of the editors, I’m overriding the Kirby image tag: Images in Text are automatically scaled down in 2 sizes, additional HTML for lazyloading is being generated, all is well.

Here’s the working approach:

  1. opening kirby/extensions/tags.php and copying the whole code under //image tag in a custom php file under site/tags.
  2. building new image paths vars via thumb() handling of $file = $tag->file($url);
  3. shoving this into the image builder function which in turn returns a different <img> object.

Now obviously, this is not hacking core but feels pretty rough anyway – is there a less aggressive solution; say by overriding the image builder only?
Or am I missing another functionality and would be better off with a post/preprocessing plugin or some sort of meta-template?

What you did is actually a good way of overriding core tags. Since the image tag (and every other tag) is one complex function, you can’t replace or change only parts of it, so implementing your own makes sense.

Thanks – marked as answered!

Do you mind if I take a look at your img tag? Im trying to get lazy load but I need to change the src and a new attr to my kirbytext images. Thanks!

Hello – this is too much code to handle inside the forum, so I set up a gist:

Gist: figure.php

Note that this has additional modifications like a different caption fallback and a ratio checker. But the basic logic goes like this: Create new tag (I called it figure.php) under /site/tags and start overriding.

Steps taken:

  1. scale image (note that I generate different scales depending on the ratio; no need to be that complicated)
  2. I kept the original $_image() function to use in a <noscript> fallback and created a second $_imageLazy() one to handle the new image tag.
  3. Those are glued together in the last part; the Kirby toolkit supplies a jQuery-like syntax to generate HTML elements (they are called “bricks”) which is pretty easy to use.
1 Like

Hey Thanks so much!

I was going to use Unveil so this saves me a lot of time!!

I got working last night. Great stuff! Thanks for a inline notes.

PS you Empty call on captions doesn’t work on anything below PHP 5.5

You’re right; fixed+tested on PHP 5.3 & PHP 5.4!