Added profile picture of actors, the poster of movies, tv shows, season and episodes

[J0nan]

I have forked your repo and made some modifications. Also made some tweaks so anyone can chose how to customize their Jellyfin. Feel free to take a look and copy anything (https://github.com/J0nan/ZestyTheme).

I have added the profile picture of actors, the poster of movies, tv shows, season and episodes. If have not tested very much, but it kind of works. I small screens it will not show. I am not making you a PR because I have made many other changes as somethings I wanted them done in other ways.

Here is the lines of code in my fork https://github.com/J0nan/ZestyTheme/blob/8ef98457105ab378498d40c63b53a340471d4d29/theme.css#L74

And here the code:

.layout-desktop .detailImageContainer .card {
  position: absolute !important;
  top: -16vh;
  left: 65vw;
  /* max-height: 60vh; */
  padding-right: 4vw;
  width: 20em;
}

@media (max-width: 68.75em) {
  .layout-desktop .detailImageContainer .card {
      display: none;
  }
}

With this, I had to modify the Next episode, because in some cases they overlap. Here it is in my fork: https://github.com/J0nan/ZestyTheme/blob/8ef98457105ab378498d40c63b53a340471d4d29/theme.css#L2113

And here the code:

/* Moves TV shows Up Next to bottom right */
.layout-desktop .nextUpSection {
    border-radius: 34px;
    left: calc(70vw - 0.5em);
    margin-right: -30vw;
    margin-top: 25vh;
    margin-bottom: 1vh;
    padding-left: 2.5em;
    margin-right: 5vw;
    background-color: rgba(var(--darkest),.8);
    padding-top: .3em;
    backdrop-filter: blur(4px);
    position: absolute;
}

Feel free to close this issue as soon as you read this, or whenever you feel like it.

Thanks for the work!

[stpnwf]

Hey sorry for the delay in replying. I was busy and had an issue with my server and could only get it back up now.

I kinda eyeballed the Up Next tbh, but checked in a few different screen sizes and they looked fine. I will look into your code to see what it does. BTW, hat is your screen size? I may tweak the size rules to get your code to apply to your particular screen size.

Thanks for taking the time.

[J0nan]

Hey no worries.

I had to change the Up Next because it overlapped with the shows primary image I was able to add. Nevertheless my screen is Full HD at 24".

Fell free to tweak anything.

[stpnwf]

Sorry again, only now I took the time to actually look into your fork. I think I understand now why you opened this issue. I was a bit confused. It has to do with my call for help in displaying the poster image in the Things I'd like to do, if I can figure out how to (HELP WANTED) section right?

I am sorry I wasn't more clear, my goal is only to have the posters show up for Season posters and profile pictures, and not for the Movie and TV show posters. I haven't figured out a way to do that, bc as I understand it, there is no difference in the HTML between them (or at least none I could see). So you get an either/or situation. This was obvious to me bc in Ultrachromic, posters are displayed (albeit on the left), and Glassmorphism doesn't. The genesis of this theme was to combine the two themes. Now I realize this was only obvious to me in my head hahaha.

Sorry for the confusion. I will update the readme tomorrow to reflect this to avoid further confusion. Will close this once I do that. Thanks for opening this issue. And I like what you did with the theme.

Though looking at your repo, I saw there is an issue with the mobile gradient. It is supposed to blend in, but a Jellyfin update broke it. Zombie (another Zesty fork) had a fix for it, which I ended up copying.

This is the code block to fix it. You use mask-image instead of background-image. I took some inspiration from Zombie too, so Zesty's gradient is different now. You may have to tweak it to the previous design.

  .layout-mobile .itemBackdrop {
      position: relative;
      background-size: cover;
      height: 40vh;
      margin-top: 0;
      -webkit-mask-image: linear-gradient(to top, rgba(var(--dark-apparent),0) 2%, rgba(var(--dark-apparent),0.08) 11%, rgba(var(--dark-apparent),0.25) 20%, rgba(var(--dark-apparent),0.45) 28%, rgba(var(--dark-apparent),0.6) 33%, rgba(var(--dark-apparent),1) 48%);
      mask-image: linear-gradient(to top, rgba(var(--dark-apparent),0) 2%, rgba(var(--dark-apparent),0.08) 11%, rgba(var(--dark-apparent),0.25) 20%, rgba(var(--dark-apparent),0.45) 28%, rgba(var(--dark-apparent),0.6) 33%, rgba(var(--dark-apparent),1) 48%);
      background-position: 70%;
  }

BTW JellyTweaks sounds very useful. I will take a look a that.