Getting meta data form a currently shown image

Hey,
i’m working on a website where the background color should change for every image, that is currently shown. In those tamplates, where this should happen are only one image visible at the time because of an image slider.

so here are my thoughs about it:

  1. I would build a field in the image-name.jpg.txt file with e.g. the name backgroundcolor: #fff

  2. I guess it would be a good idea to work with a page model here. So i think something like
    $current-image->backgroundcolor() as backgrundcolor
    Probebly there is no funktion like that but perhaps there is a more komplax way to target the current image meta data.
    Perhaps i can use js to give an id to the currently shown image, and than target the image with kirby by that id?

  3. I would implement it into the wrapper:
    <div class="someclass" style="background-color:<?= $backgrundcolor() ?>;">

another thought was to work with tags, but the problem would be also would to get the currently shown image tag.

On the site i use the siema image slider. I guess that it is important, because there is shurely some js included for a solution, right?
But first things first – maybe there is a way in kirby to do it or anyone can surggest a sturctur for a solution.

Thanks for reading and maybe contributing to find a way!

If you have the image object, e.g.

$image = $page->image();

You can call the meta data field, e.g. backgroundcolor:

$bgColor = $image->backgroundcolor();

OK, got the meta data, but the color is always picked from only the first image in the folder. it has no effect to eg. just put them on display:none or something.

Well, $page->image() was only an example and yes, it gets the first image in the page. You have to change that to get your image object.