Jump to content

4:3 Thumbnails Resize


Oxide
 Share

Go to solution Solved by bfir3,

Recommended Posts

I have some older shows in my collection and the thumbnails that are in 4:3 aspect ratio don't fit well as seen below:

57831a7d4b63a_43.jpg

 

What would be nice is if they were "Resized" to 16:9 as below:

57831afcf0495_169.jpg

 

or made full with in 4:3 ratio as below:

57831b232188c_43full.jpg

 

I see there is some css that seems to control this:
.detailPage169Card .cardPadder {
    padding-bottom: 75.25%;
}

is there .detailPage43Card for 4:3 ratio images?

 

Link to comment
Share on other sites

Most people get very upset when we distort or crop the images like that so we try to respect the aspect of the image whenever possible.

 

Imagine if it weren't a screen capture but, rather a poster or case.

Link to comment
Share on other sites

Deathsquirrel

That would be really confusing when Emby was suggesting I had widescreen episodes and they played back at 4X3.

Link to comment
Share on other sites

You can do this with CSS: (this will only affect episode images on the season page because of the .childItemEpisodeContainer selector)

 

If you want the image scaled and the resolution to be maintained:

.childItemEpisodeContainer .cardImage {
    background-size: cover !important;
    background-repeat: no-repeat;
}

If you want the image to be stretched to fill the card:

.childItemEpisodeContainer .cardImage {
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}

That's what I do. I don't get confused when I play a series that has 16:9 thumbs and the video is 4:3. And by the way, having a video with different resolution from episode image pictures is not so uncommon. Take basically any series that was recently given the "HD treatment" and their episode images will still be 4:3 on thetvdb so scraping for metadata will yield 4:3 images even though your videos may be 16:9.

 

This is the case for me with many series, for example The Wire. I have the blu-ray edition ripped which is in 16:9 but all my episode images for the series are pulled from thetvdb so they are still in 4:3. If it's so confusing to have different aspect ratio for images and video, how should Emby handle these situations?

Edited by bfir3
  • Like 1
Link to comment
Share on other sites

@@shorty1483 this worked for me on the Dev branch, it's doesn't alter any images except 4:3, let me know if you see any side effects

.cardImage {
     background-position: center top !important;
     background-size: cover !important;
}

Thanks @@bfir3 for pointing us in the right direction :)

  • Like 1
Link to comment
Share on other sites

  • Solution

They may have changed the container name, or potentially could have changed from background-image to img tag, I'm not sure. Someone who is running the latest server can probably chime in, but until then it's worth trying:

.cardImage {
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center center;
}

It might just be a matter of the container being changed, but keep in mind doing it like this will apply it to all images with the cardImage class. I also added the background-position property to keep the image in the center when scaling it. Make sure you use the background-position: center center; because it will position the image better.

 

edit: Ah, @@Oxide beat me to it. They have also suggested to use the background-position tag but center top. The reason I did center center is because it will result in an even amount of cropping along each side of the image. If you prefer the image to be aligned at the top or bottom (so that the top or bottom of the image is completely retained, and twice the amount of the opposite side is cropped out) then use the center top or center bottom.

Edited by bfir3
  • Like 2
Link to comment
Share on other sites

For me stretched images is also no problem.

.cardImage {
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}

did the trick for me, since the above solutions cut off the images. Thanks guys.

Link to comment
Share on other sites

For me stretched images is also no problem.

.cardImage {
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}

did the trick for me, since the above solutions cut off the images. Thanks guys.

 

Yeah, agreed about the cut off images. It's no good when there's text near the edges because if text gets cut off it doesn't look very good. But since episode images don't often have text, I actually prefer to maintain the aspect ratio and lose some of the image because it's hard to tell that the image is getting cut off and the stretching can sometimes be more evident.

Link to comment
Share on other sites

Yeah, agreed about the cut off images. It's no good when there's text near the edges because if text gets cut off it doesn't look very good. But since episode images don't often have text, I actually prefer to maintain the aspect ratio and lose some of the image because it's hard to tell that the image is getting cut off and the stretching can sometimes be more evident.

 

I use Coverart with rounded edges treatment buddy :P

Link to comment
Share on other sites

Just fyi, the methods above also stretch the images of Collections view. This looks ugly and makes the change obsolete imo.

Edited by shorty1483
Link to comment
Share on other sites

Just fyi, the methods above also stretch the images of Collections view. This looks ugly and makes the change obsolete imo.

 

There should be a more specific selector that will only apply the style to episodes in Season view. I'm not running the latest server version so I can't tell you what that selector would be, but if you inspect the elements you should be able to find a unique container class or a class that is applied to each episode div. Try .childrenItemsContainer .cardImage {} maybe.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...