XF 2.3 How to get the images in Articles to scale properly in Preview?

[FoP]

We're thinking of introducing Articles on our forum and I am playing with the options in a XF demo. It looks nice and I think will work well for us. However, I can't get the images to scale properly in Preview. So I'm only seeing part of an image (zie pics).

I'm sure I'm missing something, but I can't find what it is, so would appreciate a bit of help. Thanks.

On the iPad:


Desktop:

 

[FoP]

Anybody?

 

[Old Nick]

Unfortunately this is not something you can easily control, I already put together something quite similar but it was more or less forgotten... The only thing you can do is to have like first image of the discussion in an adequate format, i.e. approximately 4/3.

XF 2.3 Thread 'Image for article and featured content'

Jun 14, 2024

The same image is not displayed in the same way, the featured content is badly displayed IMHO.

Article forum



Featured content

• Old Nick
• Replies: 8
• Forum: Styling and customization questions

• 

 

[FoP]

Unfortunately this is not something you can easily control, I already put together something quite similar but it was more or less forgotten... The only thing you can do is to have like first image of the discussion in an adequate format, i.e. approximately 4/3.

That is unfortunate indeed. It looks bad. And I get different results, depending on the device I am on. And looking at your screenshots apparently it also depends on where Articles appear on a site? Featured content should look its very best, especially the images (very important for a photography forum!). First impressions are everything.

This is a scaling error and it should be fixed.

Appreciate your response, Nick. Thank you.

 

[Kirby]

This is a scaling error and it should be fixed.

It can't (without fundamentally changing how cover images work).

This is just how object-fit: cover works - the browser resizes and crops the image so it fully covers the container.
It is not really possible to exactly control how the browser does that.

If you want 100% perfect images in every case you'd have to create different images for exery possible aspect ratio and use art direction via <picture> tag to select the desired image depending on display conditions.

 

[Old Nick]

It can't (without fundamentally changing how cover images work).

But what about this behaviour?
- https://xenforo.com/community/threads/image-for-article-and-featured-content.222376/

 

[FoP]

It can't (without fundamentally changing how cover images work).

This is just how object-fit: cover works - the browser resizes and crops the image so it fully covers the container.
It is not really possible to exactly control how the browser does that.

If you want 100% perfect images in every case you'd have to create different images for exery possible aspect ratio and use art direction via <picture> tag to select the desired image depending on display conditions.

Yeah? I don't know. Doesn't forum software instruct browsers how to display images?

But if you're right about this object-fit: cover then maybe it's possible to give us the ability to shift the pic so that at least that what matters most in an image is placed centre stage. In my example of a cat, I could then move the cat's face into the centre so we wouldn't just see the top of his head with his ears. That would be an improvement.

 

[Old Nick]

object-fit: contain; seems the most appropriate for your use. This will certainly leave some white space (but it may change to black) but at least the photos won't be awkwardly cropped.

 

[Kirby]

It's easy to change, but if that would look better?

object-fif: contain



object-fit: cover



Unfortuntely there is no silver bullt to make a single image look perfect in every aspect ratio - as said before, that's where art direction comes into play.

 

[Old Nick]

It's easy to change, but if that would look better?

For photography purposes and a black background, why not?

 

[FoP]

It's easy to change, but if that would look better?

object-fif: contain

So this would give us the option to shift the image within the container, so we can choose which part of the image will be centre stage?

Easy to change, how?

Please be aware, our forum is just 8 months old and although I'm learning you could fill volumes with what I don't know.

 

[Kirby]

So this would give us the option to shift the image within the container, so we can choose which part of the image will be centre stage?

No. But you could do that with object-position.

Easy to change, how?

Put

.message--articlePreview .articlePreview-image > img
{
    object-fit: contain;
}

in extra.less if you want to test if object-fit: contain produces "better" results.

My best advice would be:
Only use landscape images that can be cropped to 4:3 from the center without loosing important details.

 

[FoP]

No. But you could do that with object-position.


Put

.message--articlePreview .articlePreview-image > img
{
    object-fit: contain;
}

in extra.less if you want to test if object-fit: contain produces "better" results.

My best advice would be:
Only use landscape images that can be cropped to 4:3 from the center without loosing important details.

Thank you so much for this. Very helpful.
I hear you on the landscape images and 4:3 from the centre, but it's not that simple of course. Composition is crucially important in photography and you don't meddle with that. Still, there will be enough content in Articles where the images would be instructive, like in tutorials or in gear reviews in which composition is of little importance. So I am going to experiment with this.

Thank you again. Much appreciated.