Display of images in portrait


#7

This has been my NUMBER ONE pet grievance with Humblr, so it would be incredible if it could be ironed out, and then I can post some of my extra hot portrait content without fear of heads being chopped off!

Mods and admins, have you seen this thread?


#8

It is in the works along with a dozen other tweeks with the interface.


#9

Thanks for the update. Great to know.

Thanks for engaging Admin!


#10

I think if this will be solved by a tweak for the audience, it wont be a good solution as it will always be posible to see content in a different way from what the uploader have in mind.

I think it will work great if it is an option for the uploader.
If the uploader prefer his/her content to be seen as portrait instead of landscape, it should be seen this way.

It will be great if we can always have more and better tools as HumblrERS not only as audience.


#11

I’ve never had an option… but that’s a good idea. Not sure I would ever choose to display a portrait image in landscape, but I can imagine circumstances where others might.


#12

Tried using stylish to mod the CSS and fix the portrait images, but then the landscape image was borked. Hoping that fix you’re planning will preserve the aspect ratio of each image post. Thanks


#13

The following changes have been applied. Thanks for feedback and code suggestions

/* Media Gallery */
.media-gallery {
    max-width: 100%;
    max-height: 400px;
    height: inherit !important;
}

.media-gallery__item {
    max-width: 100%;
    max-height: 400px;
    height: inherit !important;
    }


.media-gallery__gifv {
    max-height: 400px;
}

.media-gallery__item-gifv-thumbnail {
  transform: translateY(0%);
  max-height: 400px;
}

#14

Yes! This is perfect! And especially so for captioned images!


#15

Sorry, my CSS is a little rusty.

Does this mean that Humblr will display full portrait images now - or do we have to insert that code somewhere to enable that functionality?


#16

Humblr will display portrait now yes.


#17

Thank yooooooouuuuuu!

:pray::pray::pray::pray:


#18

Um, when I click directly on my profile, here: https://humblr.social/@sophisticatedsmut

…portrait orientation images are still being cropped to landscape, like so:


#19

Is there a way to fix how the portrait image is displaying above?


#20

This is often the first view that visitors have of Humblr, so I agree. On my page people not logged in see mostly Sensitive Content warnings anyway, but some sites would not. I think the best way I’ve seen to manage the public view is what DeviantArt does. To see sensitive content, the viewer must either fill out a consent form or login. Once either is done the images are normal size.


#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?