I’m looking for tips and leads in how to create monochrome images based on the full-color ones uploaded on the Panel. From a quick search, this seems pretty straight-forward to automatize with PHP’s imagefilter() function.
So… what would then be the best way to incorporate this in Kirby? I think I’m looking for something similar to
thumb() as in a function that gets executed the first time the image is loaded in the frontend and is then cached. That way I can also keep my original file intact for other (non-transformed) uses. Is there a way to get
imagefilter() to act at that same time, by somehow extending the
Why not just use CSS…
filter: gray; // for old IE
filter: grayscale(100%); // proper browsers
Will save you some effort and storing extra images
The advantage of the CSS solution is that you can animate this, e.g. on hover, switch to the color version and no image manipulation necessary.
I think the thumb function has a black white option, too.
Why? Hmm… because I didn’t know it was possible to such extend Thanks, @jimbobrjames!
And actually, searching in the CSS direction, I found another approach: using CSS’s
background-blend-mode you can even play with the blend modes, which gives you a lot of control. Haven’t found a good fallback for IE, so I might perhaps combine both approaches for IE fallback.
Thanks, @texnixe. I did know the grayscale option of
thumb() but I was looking for more chromatic control. It can however come in very handy as a fallback option.
Maybe imagemagick has more options than just. the grayscale one that is used in the driver (or with more control), so you could create a custom thumbs driver… Or you just try if the image filter function gives you the results you need.
This generator is useful too.
@jimbobrjames, I am using Sass, so I will look into those options. Although I’d rather go with a JS-free option.
That generator seems to offer both of the things I need combined to achieve monochrome images: grayscale and blend mode. But I don’t get it to work, I don’t know why. Anyway, it uses
::before combined with
mix-blend-mode. I’ll further research into those.
OK, in case anyone is looking for exactly the same as me (making monochrome images in any colors using only CSS), this is what the generator suggested I use (haven’t tried it yet, but the preview looks satisfying). No actual CSS
filter or PHP grayscale transformation needed for this purpose.
background: rgba(253, 62, 62, 1);
<figure class="filter"> <img src="..."></figure>
I think i can feel a plugin coming on …
OMG, Philter even has a duo-tone option!!! I’m sold - I’m going for it! (Thanks for insisting)