Display of images in portrait


#21

Images are still displaying like this:

Is there a fix for this yet? It would really be appreciated if this issue is resolved. Thank you!


#22

Just checking for an update on this. As near as I can tell, it’s still broken.


#23

Having trouble fixing the profile page display.

I am not a CSS dev so this is out of my hands atm.


#25

OK, I know a little CSS, so I poked around a bit and here’s what I found.

In the default.css file (mine is named default-f789a3a049fb9e27f6e8.css but that may be some weird web-server artifact) there’s a style for the image thumbnail which is what everyone is seeing. In the original it’s

.media-gallery__item-thumbnail img {
    max-height:400px;
    width:100%
}

That means it’s going to scale the image to fill the max-width which is defined in a higher-level style of the column. So, instead of telling to scale to 100%, let it scale automatically via the “auto” value. To do that, replace the above CSS block with:

.media-gallery__item-thumbnail img {
    max-height: 400px;
    width: auto;
    height: auto;
}

This will make the portrait-mode images scale to be thin but still fit in the max-height of 400px. So, some of them will now be narrower than the space provided. In my test, they’re left-aligned, not centered, but that’s something that could be tweaked later if desired.

I’ve only tested this on Windows Chrome, but those CSS tags should be supported by all modern browsers. Also, it seems to work on the main Home page with the multiple columns (i.e. https://humblr.social/web/timelines/direct ) as well as a single user page (i.e. https://humblr.social/@cutissomnia ).

Let me know if that helps. I don’t know anything about a Mastodon install, so I don’t know how hard/easy it is to edit the CSS files. But if it’s some kind of template system, I could try and research it.

Best wishes, and thank you for all your efforts!
-Cutis Somnia


#26

OK, now it looks like the CSS block has been changed to

.media-gallery__item-thumbnail img {
    height:100%;
    width:100%
}

That still allows many portrait images to get cropped, especially when viewing them on profiles. Instead, height and width should be set to “auto”. Again, it should be:

.media-gallery__item-thumbnail img {
    max-height: 400px;
    width: auto;
    height: auto;
}

-Cutis Somnia


#27

Any chance of implementing the CSS fixes suggested in comments below?