Image filters in Kirby

Kirby 2 Solved ✅
1

Hello,

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 thumb() function?

Cheers!

2

Why not just use CSS…

.blackandwhite {
    filter: gray; // for old IE
    filter: grayscale(100%); // proper browsers
}

Will save you some effort and storing extra images :slight_smile:

1 Like
3

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.

1 Like
4

Why? Hmm… because I didn’t know it was possible to such extend :roll_eyes: 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.

5

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. :slightly_smiling_face:

6

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.

7

If you happen to be using sass in your project, you can do some neat stuff just with CSS to mess with colors. For example there is a Sass library to get Instagram style images filters in pure CSS. There are others - google around :slight_smile: Philter is pretty neat, but does rely on javascript.

This generator is useful too.

8

@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.

9

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.

CSS

.filter {
  position: relative;
}
.filter::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: color;
  background: rgba(253, 62, 62, 1);
}

MARKUP

<figure class="filter">  <img src="..."></figure>

02
Screen Shot 2018-10-24 at 16.54.02.jpg884×662 180 KB

10

Cool… dont completly discount Philter though - yes it uses javascript but it works by turning data attributes on the image into the required css… can you see where i’m going?? You can wire those attributes into custom fields in the panel and make your own interactive generator :slight_smile: means you don’t have to make a bunch of classes up manually in ur css if you want different effects… make a custom image kirby tag to spit those attributes out and ur laughing.

I think i can feel a plugin coming on …

11

OMG, Philter even has a duo-tone option!!! I’m sold - I’m going for it! (Thanks for insisting)

1 Like