Jump to content


Photo

4:3 Thumbnails Resize

4:3 16:9 thumbnails

Best Answer bfir3 , 11 July 2016 - 01:43 PM

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.

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 179 posts
  • Local time: 09:24 PM
  • LocationDarkest Africa

Posted 11 July 2016 - 12:08 AM

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?

 



#2 ebr ONLINE  

ebr

    Chief Bottle Washer

  • Administrators
  • 46993 posts
  • Local time: 02:24 PM

Posted 11 July 2016 - 08:50 AM

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.



#3 Deathsquirrel OFFLINE  

Deathsquirrel

    Advanced Member

  • Members
  • 2001 posts
  • Local time: 12:24 PM

Posted 11 July 2016 - 10:27 AM

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



#4 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 08:24 PM

Posted 11 July 2016 - 12:26 PM

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, 11 July 2016 - 12:31 PM.

  • Oxide likes this

#5 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1378 posts
  • Local time: 09:24 PM
  • LocationGermany

Posted 11 July 2016 - 01:18 PM

@bfir3 Doesnt do anything on my Dev Server unfortunately... :(



#6 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 179 posts
  • Local time: 09:24 PM
  • LocationDarkest Africa

Posted 11 July 2016 - 01:41 PM

@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 :)


  • shorty1483 likes this

#7 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 08:24 PM

Posted 11 July 2016 - 01:43 PM   Best Answer

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, 11 July 2016 - 01:46 PM.

  • Oxide and shorty1483 like this

#8 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1378 posts
  • Local time: 09:24 PM
  • LocationGermany

Posted 12 July 2016 - 09:37 AM

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.



#9 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 08:24 PM

Posted 12 July 2016 - 04:34 PM

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.



#10 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1378 posts
  • Local time: 09:24 PM
  • LocationGermany

Posted 13 July 2016 - 10:08 AM

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



#11 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1378 posts
  • Local time: 09:24 PM
  • LocationGermany

Posted 13 July 2016 - 03:32 PM

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


Edited by shorty1483, 13 July 2016 - 03:33 PM.


#12 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 08:24 PM

Posted 13 July 2016 - 11:22 PM

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.







Also tagged with one or more of these keywords: 4:3, 16:9, thumbnails

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users