Source Image Fit not working with Poster 1

Hello Jannis and Stuart (@habitualshaker),

this is just an info, less a problem. I wanted to be lazy and have all ‘header’ images displayed the same size in the Poster (1) list view despite them having different aspect ratio. So my thought was that the Source ‘Image Fit’ with a fixed height would do the trick …

However, I just recently learnt from Jannis that not every stack inside a poster item can be properly displayed (unless its pure HTML). Well, it seems that the ‘Image Fit’ stack doesn’t fit the requirements. Below image shows that the images are displayed ‘not being cropped’ hence overlapping neighbouring content.

To be fair - the much simpler solution is to be a bit more diligent and simply provide the ‘header’ images in the same aspect ratio and everything works right away ;) Hence, this is just a piece of info for you and possibly others, and for complete disclosure I haven’t tried it yet with Poster 2.

This should work. Please send us a link to a published page showing this. Thanks.

Let me strip down my test project to the bare minimum, then I should be able to provide a live link, thanks.

P.S. I actually also used RWML in the shown example case, maybe this combination causes the issue. let me try it even simpler

I haven’t tried in Poster 1 but I was playing with it in Poster 2 just yesterday and could see that there is some image size overriding going on. Image Fit would be a good solution to get your header images the same size so we will get this to work…

Hello again, here is a published example

The effect is visible as soon as I try to limit the height of the image within ‘Image Fit’ to a fixed value (here the standard 250 px). I removed the RWML stacks to avoid any complications.

I simply used some ‘Unsplash’ images without any optimisation … sorry for the load.

On a side note: I was playing with showing the header image in the ‘detail view’ as hero banner image using Source Container plus’ background image. It works when taking Poster 1 outside of a standard container. The only issue is, that the title (and possibly other entries under the title) are then no longer bound to the max-width. I presume, one could provide a margin for the title via CSS, or is there possibly any other trick ? Poster 2’s template could possibly be an easy solution here, but I haven’t tried it yet ;)

Poster adds the following css that applies to any image added inside Poster:

#id img {
    max-width: 100%;
    height: auto;

this overrides what image fit is set up to do. i’ll speak with @Jannis and see what we can do.

In fact it can be easily sorted just by hiding the overflow on the image fit item. I’ll add this into the stack but you can add this css in the meantime:

	overflow: hidden

Let me know if that does what you need it to.


I am always amazed how a single line of CSS can do the trick. It’s like magic, and you guys are the wizards !

The above link was updated with a duplicate page using your CSS code … and there we go ;)

1 Like

Ha! Good news.

p.s. I’d take the Image Fit stack out of the Source Container. Don’t think it is needed.

Not entirely sure I follow what you are describing here but I think it will very likely be possible in Poster 2 if not P1.

You’re (almost) right - the container stack was used from my attempts to try to get it to work …

… however, there is another reason for it (as long as I don’t use any other CSS snippets again ;): the Image Fit stack doesn’t give me access to set margins/ padding, hence I put it into a container … I presume using your CSS classes might allow me to achieve this within the Image Fit stack, too, but I am just not that advanced ;)

1 Like

I presume that Poster 2 indeed will give me the total freedom with the templates (however, there might be issues with multilingual pages and the use of RWML … different topic)

In Poster 1, I can use the ‘Poster Hide/Show’ stack to define how I want to have the header image displayed in ‘list view’ and in ‘detail view.’ In order to use the same header image in ‘detail view’ as a hero banner, I am using your ‘Container Plus’ stack with background image and the full width applied to the ‘outer container’. The ‘outer container’ is the Poster stack in this case. Hence, when I put the Poster stack into a normal Source container, it’s width is the base width, and not the full screen width typically used for banner images. I therefore moved the Poster stack out of a Source container, which gives me the correct banner width (see the examples in the link above). However, as a consequence the automatically placed poster item title is then shown all the way at the left screen edge, since no margins/ padding has been automatically applied.

That calls for the freestyle template…

I know … everything seems to scream for ‘Poster 2,’ lol