Shrinking the Banner/Wallpaper, or providing option.

[gbyrne2024]

Is your feature request related to a problem? Please describe.
Not really a problem, but when I go into say a movie for example, the banner/wallpaper is fairly big and fills out most of the page.

Describe the solution you'd like
Maybe provide a way to set, large, medium, small?

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

As you can see here, it fills out most of the page, would be nice to not have it as big.

[KBH-Reeper]

Hey @gbyrne2024,

The behaviour of the background banners by Jellyfin to render as best as they can with the available width of the screen. However, some adjustments can be made to the placement of the details and banner images (if that may help your design needs)

Example1:

Example 2:

[gbyrne2024]

Thank you for coming back to me. Example 2 isn't that bad, it doesn't fill out the screen as much.

Is there something I can add to enable that?

Thanks again, much appreciated

[KBH-Reeper]

Hopefully, or it may require the need to use the raw css code and edit the elements as needed.
I am just finalising the code so that it is persistant in the movies section. Do you also want this to be the same within TV Series?
Example below also includes a potential change to the series posters to be scrollable left to right.

[gbyrne2024]

Added to TV shows also, please and thanks

[KBH-Reeper]

Update @gbyrne2024
I am still tweaking this as an additional option. It appears to not play well with music albums so some additional conditions are either required, but still looking at this one.

[gbyrne2024]

Update @gbyrne2024 I am still tweaking this as an additional option. It appears to not play well with music albums so some additional conditions are either required, but still looking at this one.

Appreciate your hard work. Thank you 😊

[Rand0mB0y]

Hey @KBH-Reeper may I ask what is your CSS strategy to select elements exclusively in series or music pages? Do you use :has or :not conditions, or something else?
I'm also trying to reduce the top space in several pages, but I could only achieve this partially.
Here's some code that removes quite a bit of top space from the movie and series pages (mind that I have a 125% OS scaling and 90% zoom set on my browser, so if someone copy/pastes this, those numbers may need tweaking):

/* Reduce space between header and LOGO in item page in TV view */
.layout-tv .detailLogo, .layout-tv .detailPageWrapperContainer {
    margin-top: -125px !important;
}
/* Reduce space between header and PEOPLE's name in People page in TV view */
.layout-tv .detailPageWrapperContainer {
    margin-top: -150px !important;
}
/* Reduce space between header and ITEM's LOGO in item page in DESKTOP view */
.layout-desktop .detailLogo {
    top: calc(100vh -30vh - var(--clearLogoBottomSpace) - var(--primaryItemPageNegativeSpace)) !important;
}
/* Reduce space between ITEM's LOGO and ITEM DESCRIPTION in item page in DESKTOP view */
.layout-desktop .itemBackdrop {
    height: calc(100vh - 67vh - var(--primaryItemPageNegativeSpace)) !important;
}
/* Reduce top space in: PEOPLE, ARTIST, BOOKS pages in Desktop view */
.layout-desktop .detailPageWrapperContainer:has(.detailsGroupItem.writersGroup.hide) {
    margin-top: -120px !important;
}

I got stuck while trying to shrink the space above the people's picture in People pages (actors, directors, etc) without altering also the movie pages. I have tried several :has and :not methods (example: .layout-desktop .detailPageWrapperContainer:has(#itemBirthday), but the :has seems to be always catching classes/IDs elements even if they do not seem to exist in a page (like the #itemBirthday in a movie page).
I still did not attempt working with music/books items either.

EDIT: I figured it out, and added to the code above.
EDIT2: I figured a better way and updated the code, so that now addresses also music and book pages. This means that every item pages' top spaces are now "shrunk"

[Rand0mB0y]

@gbyrne2024 Feel free to try out if this code works for you. Just place it underneath everything in your branding CSS screen.
As I wrote in the post above, my OS resolution is scaled to 125% and my web browser has a zoom set to 90%, so you may need to tweak a bit the values, but I wrote comments so that (hopefully) it is clear what each line of code does.

/* Reduce space between header and LOGO in item page in TV view */
.layout-tv .detailLogo, .layout-tv .detailPageWrapperContainer {
    margin-top: -125px !important;
}
/* Reduce space between header and PEOPLE's name in People page in TV view */
.layout-tv .detailPageWrapperContainer {
    margin-top: -150px !important;
}
/* Reduce space between header and ITEM's LOGO in item page in DESKTOP view */
.layout-desktop .detailLogo {
    top: calc(100vh -30vh - var(--clearLogoBottomSpace) - var(--primaryItemPageNegativeSpace)) !important;
}
/* Reduce space between ITEM's LOGO and ITEM DESCRIPTION in item page in DESKTOP view */
.layout-desktop .itemBackdrop {
    height: calc(100vh - 67vh - var(--primaryItemPageNegativeSpace)) !important;
}
/* Reduce top space in: PEOPLE, ARTIST, BOOKS pages in Desktop view */
.layout-desktop .detailPageWrapperContainer:has(.detailsGroupItem.writersGroup.hide) {
    margin-top: -120px !important;
}

[Macleykun]

Any reason to keep this one open :) ?

[KBH-Reeper]

@Macleykun I was going to revist this one as an optional styling CSS and do a bit more work on making it bit more dynamic/variable on user needs like a 25,50 and 75% shrink option