Poster2 and Srcerer (webp) macro {{header.image.src}}

Shaking The Habitual STH Support
1

Hi everyone, I’m looking for help to understand how to insert, through Srcerer (webp), the background image of a webp in the header of a Poster2 post.

  • Used to display the Header Content Item image inside a Containr in the Grid Item. Required to set the image macro {{header.image.src}} as a background image.

    <style>
# {{id}} .list-grid {
background-image: linear-gradient (rgba (0, 0, 0, 0.0), rgba (0, 0, 0, 0)), url ('{{header.image.src}}');
     background-size: cover;
     background-position: center center;
}
</style>

through Srcerer (webp) the webp file is not read, the background is displayed only from the Fallback (gif, png, jpg).

Can you give me some advice?

2

Is this code inserted inside the HTML document or a CSS file?

The mustache tags are only replayed when they appear inside the HTML document.

Please share a link with an example.

3

Have you added list-grid into the class for the grid or container you want the BG to appear?

4

Can your system display webP images?

5

The Srcerer stack uses the <picture> element and so the url etc is all in the html. I presume though that if the Srcerer stack is added as the ‘Header content’ in Poster then only the single default image source is passed into the {{header.image.src}} macro. If so then the srcset attributes won’t get transferred across.

I’d think you would be best just using Srcerer stack in Poster’s Main Content section - that way it should work as you hope. If you want an image in the list view too then just add that separately to the Header content - and have it so that the Header content is not also used in the Detail.

3 Likes
6

Perfect thanks, what you suggested, use Srcecer stack in the header, it’s like I had already set up the Blog and it works perfectly.
I was asking to understand and you were very clear. I thought there was the element.
Thanks again.

7

Thanks for your help

8

Thanks for your help.

9

True 👍

10

I always do small tests, for example:
I replaced, in the Header Content, Srcerer (WebP) with Image Fit (Source) by setting an animated webp file as warehoused image. Now it works and the animated WebP is read as the centered background of the Poster2 post / grid.
Can I create a Fallback for Image Fit (in case the browser doesn’t read or find the webp)?

… if I asked a stupid question, I apologize …

11

No - it’s this kind of scenario where you would use a specialised image stack - like Srcerer.

I don’t think there will be a way with any stack (or even code) to pass the required image data across from Poster’s header content to make this work. Unless…

You could potentially hack/use Poster’s ‘Custom metadata’ field for this purpose and add the webP image url into that. You could then maybe use the Srcerer WebP stack - adding {{header.image.src}} as the fallback and {{custom.metadata}} as the webP url.

1 Like
12

👍 Thanks!