THUMBS AND POSTER DOESNT SHOw

[zasfan]

THUMBNAİLS FOR THE SHOW AND POSTER Doesnt show with the latest css.

[kiralR]

hi, same problem here :'(

[prayag17]

I am currently not maintaining JellyFlix as I am busy with other projects... If someone wants to take up the development they can fork this repo and create a PR

[FajnB]

I am currently not maintaining JellyFlix as I am busy with other projects... If someone wants to take up the development they can fork this repo and create a PR

@prayag17 Could you please add this to the main page of the project so that people can see it?
I'd add to the warning something like this:
"If you want to help and maintain this project fork it and create PRs."

Or you can also change it completely to something like this:
"Due to time constrains I can no longer maintain this project. If you want to help, fork it and create a PRs"

I feel like your work is worth of keeping alive as it looks gorgeous!

[slowbrained]

Sorry if this approach is inefficient, or just downright distasteful. I don't know how to code and used ChatGPT to help me with a solution. This worked for me, but it definitely needs some work. For example, the poster is shown at the top way above all the movie info.

`@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css");

/* remove the left padding on detail pages */ #itemDetailPage .detailPageContent { padding-left: 0 !important; } #itemDetailPage .detailPagePrimaryContent { padding-left: 0 !important; }

/* --- 0) make sure poster/backdrop elements actually render --- / #itemDetailPage .detailImageContainer, #itemDetailPage .detailImageContainer > .card, #itemDetailPage .primaryImageWrapper, #itemDetailPage .primaryImageWrapper img { display: block !important; visibility: visible !important; opacity: 1 !important; } / some themes hide the whole poster column / #itemDetailPage .detailImageContainer > .card { position: static !important; } / some themes kill the big backdrop / #itemDetailPage .backdropContainer { display: block !important; } / remove any height clamp that can clip the header / #itemDetailPage .detailPagePrimaryContainer { height: auto !important; min-height: 0 !important; } / --- 1) anchor for absolute positioning --- / #itemDetailPage .detailPagePrimaryContainer { position: relative !important; / parent for absolute poster / } / --- 2) put poster in the top-right (desktop) --- / #itemDetailPage .primaryImageWrapper { position: absolute !important; top: 1rem; right: 2rem; width: 18rem; z-index: 3; } #itemDetailPage .primaryImageWrapper img { width: 100% !important; height: auto !important; object-fit: contain !important; border-radius: var(--rounding) !important; box-shadow: 0 4px 12px rgba(0,0,0,.6); } / keep text from overlapping it / #itemDetailPage .detailPagePrimaryContent { margin-right: 20rem !important; } / --- 3) mobile: stack poster above text --- */ @media (max-width: 900px) { #itemDetailPage .primaryImageWrapper { position: relative !important; top: auto; right: auto; width: 100% !important; margin: 0 0 1rem 0; z-index: 1; } #itemDetailPage .detailPagePrimaryContent { margin-right: 0 !important; width: 100% !important; } }

/* =========================
Jellyfin detail page fixes
========================= */

/* A) never hide the poster/backdrop layers */
#itemDetailPage .detailImageContainer,
#itemDetailPage .detailImageContainer > .card,
#itemDetailPage .primaryImageWrapper,
#itemDetailPage .primaryImageWrapper img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* B) kill the black overlay that was covering the backdrop */
#itemDetailPage .backgroundContainer,
#itemDetailPage .backgroundContainer.withBackdrop {
background: transparent !important;
background-color: transparent !important;
opacity: 0 !important;
pointer-events: none !important;
}

/* C) make sure the backdrop layer can show (new DOM: .backdropContainer/.backdropImage) /
#itemDetailPage .backdropContainer {
display: block !important;
position: fixed !important; / pin to viewport /
inset: 0 !important;
z-index: 0 !important; / behind content */
pointer-events: none !important;
}
#itemDetailPage .backdropContainer .backdropImage {
position: absolute !important;
inset: 0 !important;
background-size: cover !important;
background-position: center !important;
opacity: 1 !important;
filter: none !important;
}

/* D) poster in the top-right on desktop; content shifts left */
#itemDetailPage .detailPagePrimaryContainer { position: relative !important; }
#itemDetailPage .primaryImageWrapper {
position: absolute !important;
top: 1rem;
right: 2rem;
width: 18rem;
z-index: 3;
}
#itemDetailPage .primaryImageWrapper img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
border-radius: var(--rounding) !important;
box-sha
`