How to max Width to the edge of post

I’m trying to make sure a “portrait” image is not sized when posted… I want the full width to be accounted for… how do I do that… ?

2 Likes

Provide the page maybe someone will check into it specifically, otherwise play around with whatever browser feature you have for inspecting a page, add object-fit contain/fill etc, or some margins, maybe aspect-ratio etc with whatever element you’re working on and you’ll figure it out I bet :+1:

Like this

And of course the marketplace approach if you have a few dollars or bitcoin to offer up can not be overlooked :hugs:

2 Likes

You can search image on site settings and play with those. But I think you can’t get what I reckon you are looking for. Sure, with plugins and themes can be done strange and wonderful things, but based what we have I have a feeling that is not that easy, or even possible.

But I’ve been wrong earlier. A couple times :crazy_face:

3 Likes

Would the min ratio to crop admin setting help with this?

2 Likes

This theme-component may help as well. Just keep in mind it is still in the experimental phase. But also used here on Meta on some theme

1 Like

I tried this - its not that. - still looking for a solution.

Did you check the other image settings as Jagster suggested? Especially max image width

1 Like

I did - changing to 1200 makes no difference… the only way I found to change it is by changing in the actual photo.

I just want the “portrait image” to take the full width of the post.

This component is unstable as even with the most updated discourse installed, it shift everything to the left side (no padding) - broke my staging theme.

Maybe those images exceed max image height before max image width?

In general, I like that images are limited in size. On smaller screens, like my tablet, otherwise the image would be larger than my screen.

2 Likes

Strange. Tablets should scale no matter a site suggests. iPad anyway works that way, and one… I think it was some Samsung. But every phones can.

Anyway. Handling images is one weak spot of Discourse. An awful mess.

1 Like

It seems to be a simple thing… the image when posted as portrait should take the full width of the post width container… (if not as default but an easy way to set this up).

I reckon everyone trust on lightboxing here.

If max image height is higher than my screen, it won’t fit onto the screen without scrolling. Why should the tablet resize the image inside the post?


With the default value it looks like this:

I can see the whole image without scrolling.

Different screen dimensions is something to keep in mind when changing the max image height

1 Like

Because mobiles are more user friendly than desktops?

1 Like

Yeah that is a risk with the experimental. As for padding though you could add a custom component to augment it adding overrides & add padding etc.

When you own a Photography forum, images are king and it’s not like they are posting all photos portrait but when they do, they don’t mind the bit where they need to scroll.

So you would want to stretch an image to the full-width, even when the intrinsic image size is smaller than the page width?

I wouldn’t recommend this, because you probably will lose on quality but:

Have you tried a combination of the setting the max image height and max image width settings to a high value and using css to set:

.cooked img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
    width: 100%;
    max-width: 100%;
}

That seems to do what you describe on my end.

2 Likes

Photography forum would not show small images, I reckon. Again, I don’t know, but I think the issue is automatic downscaling. All images are like 800xsomething and then there will be empty space even there could be shown something like 1500xsomething.

But I reckon that is basically only issue with desktops, because mobiles has tendecy guess what an user can or cannot do.

Photographers almost never post “small” photos… the process is simple:

1) Upload photo

If photo is smaller than width of post width dimensions:
Maintain ratio and stretch width to take the full post width dimensions.

If photo is equal or larger:
Maintain image ratio but take the full post width dimensions.