Oxide 139 Posted July 11, 2016 Share Posted July 11, 2016 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: What would be nice is if they were "Resized" to 16:9 as below: or made full with in 4:3 ratio as below: 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 More sharing options...
ebr 14912 Posted July 11, 2016 Share Posted July 11, 2016 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 More sharing options...
Deathsquirrel 741 Posted July 11, 2016 Share Posted July 11, 2016 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 More sharing options...
bfir3 114 Posted July 11, 2016 Share Posted July 11, 2016 (edited) 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 July 11, 2016 by bfir3 1 Link to comment Share on other sites More sharing options...
shorty1483 452 Posted July 11, 2016 Share Posted July 11, 2016 @@bfir3 Doesnt do anything on my Dev Server unfortunately... Link to comment Share on other sites More sharing options...
Oxide 139 Posted July 11, 2016 Author Share Posted July 11, 2016 @@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 1 Link to comment Share on other sites More sharing options...
Solution bfir3 114 Posted July 11, 2016 Solution Share Posted July 11, 2016 (edited) 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 July 11, 2016 by bfir3 2 Link to comment Share on other sites More sharing options...
shorty1483 452 Posted July 12, 2016 Share Posted July 12, 2016 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 More sharing options...
bfir3 114 Posted July 12, 2016 Share Posted July 12, 2016 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 More sharing options...
shorty1483 452 Posted July 13, 2016 Share Posted July 13, 2016 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 Link to comment Share on other sites More sharing options...
shorty1483 452 Posted July 13, 2016 Share Posted July 13, 2016 (edited) Just fyi, the methods above also stretch the images of Collections view. This looks ugly and makes the change obsolete imo. Edited July 13, 2016 by shorty1483 Link to comment Share on other sites More sharing options...
bfir3 114 Posted July 14, 2016 Share Posted July 14, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now