Is there some way to get the placeholder image that works automatically with the Vue dato image component to respect the the Imgix params for the image?
We have a sepia filter on our images (which is a very cool feature our clients love) but the blurred placeholders load in colour which looks pretty weird.
Example of the query:
image {
id
responsiveImage(imgixParams: { duotone: "92442E,DCCDB3", fit: crop, w: 400, h: 400, q: 70, con: 30 }) {
sizes
title
width
alt
base64
src
aspectRatio
}
}
At the moment we have just used :use-placeholder="false" but if there was a way to substitue in the blurUpThumb or something like that it would be a much nicer experience.
Interesting idea… can I convert this into a feature request for you? Unfortunately, right now our blurhashes are generated when the image is first uploaded, so it has no awareness of Imgix parameters. I’m not sure if this is something we can easily add to our image pipeline, but it would be a great feature request.
For now, though, a few potential workarounds:
The least disruptive way would probably be to fake a duotone effect with CSS filters and blend modes on the thumbnails (the blur hash images) https://cssduotone.com/
The downside is that it’s not really based on your Imgix params; it’s just a fake filter that looks close enough. You’d have to manually write the CSS for each different set of params (or at least write a function to convert the params into CSS).
Imgix itself actually does let you generate blurhashes after parameters have been applied. For example, on a sample image like this:
Adding the params &skip-default-optimizations=true&fm=blurhash will get you the string e3HcG*_M%MxtV[V[WBDjIBoyfQM{M{fkV[xttQ%fx[t7oft7j[RjRQ, which looks like this:
The downside of this second approach is that you’ll have to make a separate API fetch for each blurhash thumbnail this way (whereas normally they’d all just be inline strings with your CDA response) =/ So it’s a lot more calls.
If you’re mathematically inclined, you can probably manipulate the blurhash string itself and apply the filters directly to it, but you’d have to be able to understand its algorithm and know how to manipulate the colors after the fact. (Sorry, that’s beyond my programming ability! ChatGPT can get you halfway there, but it wasn’t quite perfect in my tests…)
What do you think? Would any of those workarounds suffice? If not, let’s convert this to a feature request and hope for the best?
I also found some odd behavior with the blurUpThumb param, as distinct from blurhash. It seems like it used to accept some Imgix parameters, but in my tests I couldn’t get it to accept any of them, possibly the result of an algorithm change last year…?
Let me check with the devs on that. If we can get that part working, it might be easier than any of the above workarounds.
OK, sorry… I was partially confused earlier To clarify:
The blurUpThumb (same as the base64) and blurhash are different.
Although they both give you small blurry thumbnails, the blurUpThumb and base64 are tiny JPEG files inside a data URL. In contrast, blurhash gets you a base-88 string that can be decoded separately.
Separate from the CSS, it seems to me that you ought ro be able to apply Imgix params to the b64 too, as it shows in the playground, but that behavior is currently not fully working (it turns out some params, like sat for saturation, DO work. But not duotone.) Checking to see if that’s a bug.
I’ll report back once I get more clarity on that.
Thanks @roger - yeah after I posted I had the same idea with CSS filter and gave that crack which looks ok…
It looks like blurUpThumb does take Imgix Params but, as you say, doesn’t seem to handle all of them for some reason, including duotone.
I think if the base64 images will always be generated at upload, for me the ideal solution would be:
a) blurUpThumb respects the same params as responsiveImage
b) the vue/react image components have a prop for ‘placeholder-file’ (or similar) where we can specify and override if we’d like to if we don’t want to use the base64 where we could slot in the blurUpThumb
But I can get by with the CSS filter for now as we only have the one filter for this site.
Great, glad the CSS works for now! Still waiting on a dev to investigate the situation with the blurUpThumb params.
I believe you can do that just by overriding the base64 param with your own data URL string (embedding your own JPEGs). You can also pass along a CSS classname or an inline style. Does that work?
If you need something entirely different, you can of course also make your own component (or fork ours) with the exact setup that you need.
Regardless, I’ll chime back in once I hear from the devs.
To clarify: