How to add attribute to an image

Kirby 2 Solved ✅
1

Hi,

i would like to add data-src attribute to images, so it could be vissible in the panel (after clicking on an image) and I would be also able to add a link into the data-src field. I need the data-src attribute, because I want to grab it via javascript later.

<img id="slide" src="<?= $slide->image()->url() ?>" alt="<?= $slide->caption() ?>" data-is-mobile=1 data-src="<?= $slide->url() ?>">

For now data-src attribute is visible in the code in a browser inspector, but not in the panel. In the panel I only have a public link visible. Any help would be appreciated!

2

Hm, I don’t really understand your question. Where would you expect this data-src link to be visible in the Panel? Or do you want to add a meta data field that you can fill in in the Panel? Like a caption field etc.?

https://getkirby.com/docs/panel/blueprints/file-settings

3

Untitled
Untitled.png558×773 10.9 KB

I want to have the data-src attribute visible in the panel for example below Public link and I also would like it to behave like Public link (which I assume is src attribute) and to be editable.

I dont want to have it as a meta data field. So in this case, do I have to create a custom tag? I tried, but it’s not working.

<?php

kirbytext::$tags['image'] = array(
  'attr' => array(
    'url',
    'mobile',
    'data'
  ),
  'html' => function($tag) {

    $url     = $tag->attr('image');
    $mobile     = $tag->attr('data-is-mobile');
    $data     = $tag->attr('data-src');

    return '<img src=' . $url . ' '. $mobile .' '.$data.' >';

  }
);
````
4

That’s not possible, the data attribute is not an intrinsic property of an image. And if you don’t want it as meta data field either, you can’t have it.

The only way to adding additional fields that are editable is via a meta data field.

You can create a custom tag, but that doesn’t help you with displaying the data attribute in the file view. With your extended version of the image tag, you can add a data attribute to images you add in a textarea field.

5

If you call your attributes mobile and data, then you have to get their values via this attribute names, not suddenly use other names further down in your code.