Customising Image Upload screen in Panel to show a background colour

Kirby 2 Solved ✅
1

I have an idea that would really enhance the CMS for my client, but I’m not sure if it’s even possible. I’m using iandoe’s wonderful ‘dominant color’ plugin to extract a color from an image uploaded. The intent is to use this colour as a background-color in the frontend, but it would be really great to see a “preview” of what this would look like from within the panel.

The idea is that the hatched transparent background in the panel from the specific image would use the color from the ‘dominant color’ field, and ideally update with the color is change using the color picker plugin. I would know how to do this with javascript, so I don’t need any help there.

Is this even possible? If so, where should I begin implementing such a change?

Thanks for any help/suggestions!
Jamie

2

By “preview”, do you mean before saving the page, whilst still editing it?. i dont believe you can add custom javascript to the panel, for security reasons im pretty sure you can only load custom css in the panel.

You would probably have to make a preview custom field, similar to this one.

3

Saving the page first would also work.

4

Are you talking about the image view in the panel where you add the file meta data? Or what is the “hatched transparent background”?

If so, that is not easily possible, because, as @jimbobrjames mentioned, you can’t load custom JavaScript unless you add it via a field. So a way of achieving this would be via some sort of custom field you then add to the single file view.

5

Here’s what I have (complete with my client’s strange art)

image
image.png2142×1290 465 KB

I’d like the grey and white squared background to actually be set to be the ‘Dominant Color’ (#c07a92 in this example). It would be fine if the page needed to be saved before seeing the result.

6

You’d have to change the .fileview-image background via JavaScript. I think it’s doable with a custom field that listens to the value of your dominant color field and injects that as an inline style.

7

Thank you, I’ll look into custom fields.

8

If you are not familiar with custom fields, you can find lots of example in our plugins repo: https://github.com/texnixe/kirby-plugins/issues?q=is%3Aissue+is%3Aopen+label%3A"Has%3A+field"

9

Quick update, but I managed to get this working! It’s maybe too hacky to turn into a proper plugin/field for download (I used @jenstornell’s deprecated boiler field:https://github.com/kirby-deprecated-plugins/kirby-boiler-field), but it works for what I need and I’m pretty proud of my first Kirby field! :blush:

46

2 Likes