Does an image-with-alt Kirby field plugin exist?

Plugins Kirby 3 plugin 🧩
1

Hey, I was just thinking of writing a plugin but I wanted to check to verify this doesn’t already exist, cause I couldn’t find it…

So frequently, I find myself needing to have the user specify what image goes in a particular place, so I do that with the file selector, but then ALSO I want to let the user define an alt tag…

So the result ends up looking like this…

label: Image
type: structure
max: 1
fields:
  pic:
    label: Pic
    type: files
    multiple: false
    required: true
    query: page.images
    width: 1/2
  alt:
    label: Alt Text
    type: text
    help: (for accesibility & SEO)
    width: 1/2

I was thinking about formalizing this structure, but first I was curious if this was already a solved problem and I’m not aware of the “normal” way to do it.

2

I usually put the alt etc information into the image metadata

3

I like that as a structural way to save the data, but the UI feels a tiny bit clumsy. Like, to select the image I want, I’d use the on-page selector in the page, but then in order to give it an alt, I’d have to click on the image itself and then save it that page, and go back.

Is there a way to edit the image’s metadata without leaving the page blueprint?

4

I don’t think so, but the disadvantage of saving the metadata in other places than with the image itself is that you would have to add the same data again when the image is remove from this particular structure and then used in other places. While more cumbersome, from my point of view, it makes the most sense to store file metadata in the file metadata files.

5

Yeah, that’s a great point, hadn’t considered that.

Does the file selector have a hook? Would it be possible to do something like uhhh…

hero_image:
    label: Hero Image
    type: files
    multiple: false
    query: page.images
    width: 1/2
  hero_image_alt:
    label: Hero Alt Text
    type: text
    width: 1/2
    query: hero_image/alt

Just wondering if I could get a field to write to that file directly…

6

There is no particular field hook, only the page.update:after it, but of course you can check in such a hook if a particular field value was added/changed.