TV - SERIES - Cover Art from guide provider not fitting into image frame properly but does in other Emby apps

[unisoft 272]

Upgraded to 4.6.0.50 and think this was there before the upgrade, but the cover art for SERIES that I have decided to record does not resize within the image frame. The cover art comes from the guide data provider (Emby's) and it does resize for example, in the Android Emby app.

See picture where you can see the images from the guide provider have top and bottom borders (Britain's Biggest Dig, Call The Midwife, Dad's Army, Dinnerladies, Fawlty Towers, Inside The Factory)

Edited May 21, 2021 by unisoft

[Luke 37065]

Hi, thanks for reporting. We'll take a look.

[visproduction 122]

The aspect ratios for the poster images are different. There are several ways to deal with this:

CSS styling options for images inside a div area.

1. If the style setting for the area is height:auto; then the image will fill the height and automatically cut a little from the left and right of the image to make the height work. Not being used.
2. Style width could just force a fit, which would give a false aspect ratio and people would look squeezed.  This is obviously not good. Not being used
3. Style width keeps original aspect ratio and causes black bars top and bottom, so the image still looks correct.  You can adjust the style to have only a black bar at the bottom or at the top.  Currently the image is set to be centered. This always shows a correct image. This is being used.

To solve the top and bottom black bars with the current style code, you need to edit the poster image to fit the available area.  Currently, I believe for portrait posters, that ratio is 1:1.5.  To automatically crop the poster image with a style change using custom CSS is possible, but that could crop out edges of actors faces or put the media title right to the edge of the frame.  This would get very extreme if a poster happens to be square or wide.  You would have to force a preferred image into the poster to get something that far off, but it's possible.

For a real professional look, it is up to the site admin to decide which image is ideal and looks perfect for the media.  In that case, the current style choice is correct and if you want to fix your posters, open each image and crop it or add colored top and or bottom areas to make the format correct to 1:1.5.

If you look on Netflix or Prime or Hulu, they don't have black top and bottom, but they also professionally edit each image correctly, so it is never automatically cropped.  I think you are pulling images either online or doing them from a scan of a DVD cover which is not the same aspect ratio, which is 1:1.4.

[unisoft 272]

14 hours ago, visproduction said:

The aspect ratios for the poster images are different. There are several ways to deal with this:

CSS styling options for images inside a div area.

1. If the style setting for the area is height:auto; then the image will fill the height and automatically cut a little from the left and right of the image to make the height work. Not being used.
2. Style width could just force a fit, which would give a false aspect ratio and people would look squeezed.  This is obviously not good. Not being used
3. Style width keeps original aspect ratio and causes black bars top and bottom, so the image still looks correct.  You can adjust the style to have only a black bar at the bottom or at the top.  Currently the image is set to be centered. This always shows a correct image. This is being used.

To solve the top and bottom black bars with the current style code, you need to edit the poster image to fit the available area.  Currently, I believe for portrait posters, that ratio is 1:1.5.  To automatically crop the poster image with a style change using custom CSS is possible, but that could crop out edges of actors faces or put the media title right to the edge of the frame.  This would get very extreme if a poster happens to be square or wide.  You would have to force a preferred image into the poster to get something that far off, but it's possible.

For a real professional look, it is up to the site admin to decide which image is ideal and looks perfect for the media.  In that case, the current style choice is correct and if you want to fix your posters, open each image and crop it or add colored top and or bottom areas to make the format correct to 1:1.5.

If you look on Netflix or Prime or Hulu, they don't have black top and bottom, but they also professionally edit each image correctly, so it is never automatically cropped.  I think you are pulling images either online or doing them from a scan of a DVD cover which is not the same aspect ratio, which is 1:1.4.

Its the Emby EPG pictures not my own that are at fault under "Series" that I have for Recording. My own are all in correct ratio (the ones that are filling the frame!)

Seeing as its the provider, and I doubt they can change it as they probably supply many other systems, I think Emby should stretch to fit to it doesn't look so odd, it is such a small amount top and bottom, I don't think distortion would be noticeable. It's more noticeable as it is right now.

Edited June 2, 2021 by unisoft

[visproduction 122]

Unisoft, Well it's a CSS custom setting that is possible to change by adding it into your settings.  I notice any image stretching and any wrong video aspect ratio immediately probably because I've worked as a photographer and video editor.  For me it's as bad as finger nail scratching on a blackboard.  Does anyone still remember that?  There is no professional online site that allows image stretching.  Sure you can overlook a strange looking thumbnail, but I personally cannot watch a film with the aspect ratio wrong, even a few pixels off.

[unisoft 272]

17 hours ago, visproduction said:

Unisoft, Well it's a CSS custom setting that is possible to change by adding it into your settings.  I notice any image stretching and any wrong video aspect ratio immediately probably because I've worked as a photographer and video editor.  For me it's as bad as finger nail scratching on a blackboard.  Does anyone still remember that?  There is no professional online site that allows image stretching.  Sure you can overlook a strange looking thumbnail, but I personally cannot watch a film with the aspect ratio wrong, even a few pixels off.

I prefer widescreen if the crop is done intelligently. Most TV content when broadcast originally in the UK had a 10% margin around the edges to allow CRTs for overscan, so cropping for widescreen intelligently doesn't generally lose anything of value and SD PAL is better than SD NTSC due to resolution anyway and better colour accuracy. I don't just mean stretch the horizontal. If a picture is low bit rate then its best to leave at 4:3 because it will just look bad if an anamorphic flag is set for 16:9.

The CSS setting only works for the web app not other Emby apps.

Frankly, I'd prefer a tiny amount of stretching in the frame for the image because it looks a mess at the moment. I have pictures used that are in my library that fill the screen and images from the Guide EPG data provider that don't. It looks a complete mish-mash. The stretching amount is so small its unlikely to be noticeable unless a purist looking at it. Right now, its far more noticeable in its current view to anyone.

Edited June 6, 2021 by unisoft

[visproduction 122]

Unisoft, you point is understandable. If the black bars in the thumbs are a bother, why not just change the image to one that is cropped to ratio 1.5:1.  You can adjust these thumbs in any photoshop type app or even the app that comes free with the computer.  It takes me about 1 - 2 minutes to grab a photo from a collection and then go in with the editor, find the height of the thumb, run height / 1.5 to find the width and then crop the width down to the right aspect ratio.  You new thumb will fit without black bars for web and any apps.  It's more how comfortable you are with image editing.  I think given an hour, I could probably fix 30 or so.  How many do you need to fix.  Are there thousands?

[unisoft 272]

17 hours ago, visproduction said:

Unisoft, you point is understandable. If the black bars in the thumbs are a bother, why not just change the image to one that is cropped to ratio 1.5:1.  You can adjust these thumbs in any photoshop type app or even the app that comes free with the computer.  It takes me about 1 - 2 minutes to grab a photo from a collection and then go in with the editor, find the height of the thumb, run height / 1.5 to find the width and then crop the width down to the right aspect ratio.  You new thumb will fit without black bars for web and any apps.  It's more how comfortable you are with image editing.  I think given an hour, I could probably fix 30 or so.  How many do you need to fix.  Are there thousands?

My own library images are fine, but the images in the Series under Live Tv are not always mine. They are often taken from the Emby EPG provider's image stock. Editing each one every time I want to record a programme or series is not viable. Whenever I schedule a recording, it will take the image from the EPG data for that part of Emby.

[visproduction 122]

You could custom CSS take away the background image color of the thumbnails, then the shorter ones would float on top of whatever background is there and not show the extra black.   You can also change the CSS align to put the image at the top, so the only extra space is at the bottom of each image.  Perhaps one or both of those tweaks might solve it for your preference.  Then you wouldn't have to stretch the image.  That should be also possible with custom CSS some combo of autofill and image width overflow hidden.   There would be several different custom CSS solutions.  Are you doing any custom CSS now?  Sometimes the trick is to limit changes only to the pages you want. A general class CSS style can wreck havoc with other pages.  I've done a lot of custom CSS.  Let me know if I can help.