In need of a collection library thumbnail

[Avatar3379]

Preferably in the style of the first 4 of these: https://imgur.com/a/jellyfin-gradient-li...rs-VFCzPXc

[phaelax]

Would something like this work for ya?

https://imgur.com/a/media-collection-ico...in-kJjixxj

[NanoNano]

The CSS:

Code:

/* ANIME */
.card[data-id='0c31907140d8021217e2cd79e123']:hover .cardImageContainer, .card.show-animation[data-id='0c31907140d8021217e2cd79e123 ']:focus .cardImageContainer { background-image: url("/Items/0c31907140d8021217e2cd79e123 /Images/Logo?maxWidth=480&tag=0c31907140d8021217e2cd79e123 &quality=90") !important;

}

Change the ID to your own library ID using inspect element in web browser.

Upload the transparent (PNG / GIF) for the label as "Primary Image" if u wish a label.
Upload the Animated image (GIF, WEBP, AVIF) as "LOGO" for the animation.

in my case i use AVIF because is smaller in size, just rename the file to jpg.

[Druidblack]

Your design looks amazing.

[NanoNano]

Your design looks amazing.

Thanks, here some animated poster u can use in jellyfin, just rename the image according to poster and put inside the directory.

Poster

[NanoNano]

Poster






Layout





Thumb

[Skytbest]

The CSS:

Code:

/* ANIME */
.card[data-id='0c31907140d8021217e2cd79e123']:hover .cardImageContainer, .card.show-animation[data-id='0c31907140d8021217e2cd79e123 ']:focus .cardImageContainer { background-image: url("/Items/0c31907140d8021217e2cd79e123 /Images/Logo?maxWidth=480&tag=0c31907140d8021217e2cd79e123 &quality=90") !important;

}

Change the ID to your own library ID using inspect element in web browser.

Upload the transparent (PNG / GIF) for the label as "Primary Image" if u wish a label.
Upload the Animated image (GIF, WEBP, AVIF) as "LOGO" for the animation.

in my case i use AVIF because is smaller in size, just rename the file to jpg.

This is very cool. I'm wondering if you know whether it is possible to do something similar but with the video thumbnails themselves and not the library thumbnails.

Basically I want the video thumbnails in my library to "come alive" similar to how you have it when you mouse over the Library. I want it to start playing a preview of the video in the thumbnail before selecting the video. Similar to youtube or other video sites.

It's fine if this is just a slideshow of stills from the video too. I'm thinking since Trickplay is already a thing that compiles stills from your video can you utilize those images to play on the thumbnail at the video selection screen instead of in the video scrubber?

[Hectik]

Layout

I'm very interested on how you generated these! I would love to apply it to all my libraries. Would you mind sharing more or how?

[NanoNano]

The CSS:

Code:

/* ANIME */
.card[data-id='0c31907140d8021217e2cd79e123']:hover .cardImageContainer, .card.show-animation[data-id='0c31907140d8021217e2cd79e123 ']:focus .cardImageContainer { background-image: url("/Items/0c31907140d8021217e2cd79e123 /Images/Logo?maxWidth=480&tag=0c31907140d8021217e2cd79e123 &quality=90") !important;
}

Change the ID to your own library ID using inspect element in web browser.
Upload the transparent (PNG / GIF) for the label as "Primary Image" if u wish a label.
Upload the Animated image (GIF, WEBP, AVIF) as "LOGO" for the animation.
in my case i use AVIF because is smaller in size, just rename the file to jpg.

This is very cool. I'm wondering if you know whether it is possible to do something similar but with the video thumbnails themselves and not the library thumbnails.
Basically I want the video thumbnails in my library to "come alive" similar to how you have it when you mouse over the Library. I want it to start playing a preview of the video in the thumbnail before selecting the video. Similar to youtube or other video sites.
It's fine if this is just a slideshow of stills from the video too. I'm thinking since Trickplay is already a thing that compiles stills from your video can you utilize those images to play on the thumbnail at the video selection screen instead of in the video scrubber?

If i understand correctly what u wanted then, Just put the image into the each folder, in your case thumb.jpg (avif), for example u can try the demon slayer image i posted above and save is as thumb.jpg put it into your one of your movie/series folder.

The CSS:

Code:

/* ANIME */
.card[data-id='0c31907140d8021217e2cd79e123']:hover .cardImageContainer, .card.show-animation[data-id='0c31907140d8021217e2cd79e123 ']:focus .cardImageContainer { background-image: url("/Items/0c31907140d8021217e2cd79e123 /Images/Logo?maxWidth=480&tag=0c31907140d8021217e2cd79e123 &quality=90") !important;

}

Change the ID to your own library ID using inspect element in web browser.

Upload the transparent (PNG / GIF) for the label as "Primary Image" if u wish a label.
Upload the Animated image (GIF, WEBP, AVIF) as "LOGO" for the animation.

in my case i use AVIF because is smaller in size, just rename the file to jpg.

This is very cool. I'm wondering if you know whether it is possible to do something similar but with the video thumbnails themselves and not the library thumbnails.

Basically I want the video thumbnails in my library to "come alive" similar to how you have it when you mouse over the Library. I want it to start playing a preview of the video in the thumbnail before selecting the video. Similar to youtube or other video sites.

It's fine if this is just a slideshow of stills from the video too. I'm thinking since Trickplay is already a thing that compiles stills from your video can you utilize those images to play on the thumbnail at the video selection screen instead of in the video scrubber?

Layout

I'm very interested on how you generated these! I would love to apply it to all my libraries. Would you mind sharing more or how?

U can easily create those from any video files save it as .avif to reduce the size then just rename it as .jpg to be recognized by jellyfin.
in my case i use photoshop to edit the video.

more posters:

Show Content

Spoiler

[NanoNano]

more:

Show Content

Spoiler