Best way to 'extend' Toolkit HTML functions?

Kirby 2 Solved ✅
1

I would like some help with the following. In the Kirby Toolkit, there’s the HTML API which generates tags for common HTML elements. I would like to alter one of them (the tag) so I can use a certain lazy-load plugin.

This is the public static function in the HTML Class in the Toolkit:


      public static function img($src, $attr = array()) {
        $attr = array_merge(array('src' => $src, 'alt' => pathinfo($src, PATHINFO_FILENAME)), $attr);
        return static::tag('img', null, $attr);
      }

The only thing I really need to do, is changing the 'src' in the array_merge(array) part to 'data-img-src' . What is the correct way to extend or alter this and where do I put the override, without touching the (in my case: ‘git-submoduled’) Toolkit? Or is it better to create a custom one and if so: how? :slightly_smiling:

On a similar note: I would like to edit the HTML generated by the standard image tag as well. I’ve found out that I can copy the whole kirbytext::$tags['image'] in a new site/tags/image.php file, but I only need to change this bit (the $figure->addClass() part):


    if(kirby()->option('kirbytext.image.figure') or !empty($caption)) {
        $image  = $_link($_image($tag->attr('imgclass')));
        $figure = new Brick('figure');
        $figure->addClass($tag->attr('class'));
        $figure->append($image);
        if(!empty($caption)) {
          $figure->append('<figcaption>' . html($caption) . '</figcaption>');
        }
        return $figure;
      } else {
        $class = trim($tag->attr('class') . ' ' . $tag->attr('imgclass'));
        return $_link($_image($class));
    }

Is there a way to just override this section, or do I need to duplicate the whole defintion for the image tag?

If someone can push me in the right direction, that would be great :slightly_smiling:

2

The img method is just a helper for a common usecase. You can directly call the tag method with your custom attributes:

echo Html::tag('img', null, array('data-img-src' => $src, 'alt' => $alt));

That’s unfortunately not possible. PHP doesn’t allow parts of a function to be changed (that would actually be quite complex). Overwriting it completely from your config.php or a plugin is the recommended way.

3

@lukasbestle,

Wow, thanks for the quick reply! I was looking in the img method, because I would like to alter the default output in HTML when a user drags a image file to a textarea in the panel (so when there’s a (image: image.ext) in the field, it outputs the <figure><img src="image.ext" /></figure> and I would like to change that to img-data-img-src=. The <figure> can stay :slight_smile: Can I change that with your code snippet as well?


    echo Html::tag('img', null, array('data-img-src' => $src, 'alt' => $alt));
4

You can’t overwrite methods of existing PHP classes unfortunately.

But since you want to create your own version of the image Kirbytag anyway, you can change the function call to your custom one there without any extra modifications.

5

You’re right! I will mark this topic as solved. Thanks for the help! :slight_smile: