Help with Placeholder?

[proimage]

I've been trying to figure out how to use the placeholder function, but the only way I can get it to output something vaguely useful is by using type: silhouette. Unfortunately, my client doesn't want a silhouette-type result, and vastly prefers something more akin to the Primitive or SQIP results demoed here: https://jmperezperez.com/svg-placeholders/

Questions:

1. Are such results possible with Imager 2?
2. Barring such results, is there a way to simply base64 encode an image with Imager? I used to make a tiny image transform with a width of 40px and base64 encode that, but the plugin I used to use for the encoding doesn't work in Craft 3 yet.
3. Could you add a bit more explanation to the placeholder function in the readme? It's unclear what most of those options actually do...

Thanks for any help you can give me!

• Michael C.

[aelvan]

Hi,

When I made the Craft 3 version, I looked at that svg placeholders article, and implemented the silhouette thingy, but couldn't find any PHP-based libraries that could do the more advanced stuff (without taking way more resources than what is readily available on any webserver), so left that out.

The plsaveholder is basically for outputting an empty placeholder with or without a color. You can create a red 200x100px SVG placeholder image with craft.imager.placeholder({ type: 'svg', width: 200, height: 100, color: '#ff0000' }). For placeholders of type svg and gif, these are the only relevant parameters, the others are for the silhouette thing.

But if you want to create a LQIP type of effect as outlined in question 2, you can easily do that without using the placeholder method at all:

{% set lqip = craft.imager.transformImage(localAsset2, { width: 4 }) %}
<div style="width: 200px; height: 100px; background: no-repeat center/100% url({{ lqip.getDataUri() }});"></div>

Hope this helps.

[proimage]

Ok, so excluding the silhouette feature, the placeholder function is essentially kinda like <div style="background-color: red; width: 200px; height: 100px;"></div> (but fitting inside <img> tags)? In other words, just a flat color?

And, I have no idea how I missed the getDataUri() function; that's exactly what I needed. Thanks!

[aelvan]

Ok, so excluding the silhouette feature, the placeholder function is essentially kinda like

(but fitting inside tags)? In other words, just a flat color?

Yeah. But I usually use the placeholder method with responsive images like this:

<img src="{{ craft.imager.placeholder({ type: 'gif', width: 1600, height: 900, color: '#ff0000' }) }}" 
     sizes="100vw" 
     srcset="{{ transformedImages | srcset }}" />

Anyways, I actually uncovered a bug in the placeholder method when testing my examples, so.. Thanks. ;)

[proimage]

Heh, glad to be of service! ;)

The problem with using the flat-color placeholder in an <img> tag with srcset like that is that browsers that don't support srcset will be stuck with the placeholder image.

Seems like this is what progressive JPGs were for... never understood why they got pooh-poohed.