Jellyfin Forum
In need of a collection library thumbnail - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: In need of a collection library thumbnail (/t-in-need-of-a-collection-library-thumbnail)

Pages: 1 2

In need of a collection library thumbnail - Avatar3379 - 2024-12-13

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

RE: In need of a collection library thumbnail - phaelax - 2024-12-29

Would something like this work for ya?

https://imgur.com/a/media-collection-icon-jellyfin-kJjixxj

RE: In need of a collection library thumbnail - NanoNano - 2025-01-26

[Image: L2EH7Gk.gif]

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.

RE: In need of a collection library thumbnail - Druidblack - 2025-01-26

Your design looks amazing.

RE: In need of a collection library thumbnail - NanoNano - 2025-01-27

(2025-01-26, 06:35 PM)Druidblack Wrote: 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
[Image: okmhsl.jpg]
[Image: 6r5rda.jpg]
[Image: d0vhkt.jpg]
[Image: zpdkzz.jpg]
[Image: zgrsjt.jpg]
[Image: vjlxna.jpg]
[Image: gtrmnk.jpg]
[Image: xo01ps.avif]
[Image: tljbvh.jpg]
[Image: ct58mc.jpg]

RE: In need of a collection library thumbnail - NanoNano - 2025-01-27

Poster
[Image: k3m0o1.jpg]
[Image: bej6vm.jpg]
[Image: pg60u0.jpg]
[Image: xgrr2v.jpg]
[Image: sucory.jpg]

Layout
[Image: nlo096.avif]
[Image: gpqtn9.jpg]
[Image: ak4vaa.jpg]
[Image: opm2le.jpg]

Thumb
[Image: whrdc0.jpg]

RE: In need of a collection library thumbnail - Skytbest - 2025-05-20

(2025-01-26, 06:39 AM)NanoNano Wrote: [Image: L2EH7Gk.gif]

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?

RE: In need of a collection library thumbnail - Hectik - 2025-05-27

(2025-01-27, 03:49 AM)NanoNano Wrote: Layout
[Image: nlo096.avif]
[Image: gpqtn9.jpg]
[Image: ak4vaa.jpg]
[Image: opm2le.jpg]

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?

RE: In need of a collection library thumbnail - NanoNano - 2025-05-29

(2025-05-20, 08:26 PM)Skytbest Wrote:
(2025-01-26, 06:39 AM)NanoNano Wrote: 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.


(2025-05-20, 08:26 PM)Skytbest Wrote:
(2025-01-26, 06:39 AM)NanoNano Wrote: 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?

(2025-05-27, 11:15 AM)Hectik Wrote:
(2025-01-27, 03:49 AM)NanoNano Wrote: 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


RE: In need of a collection library thumbnail - NanoNano - 2025-05-29

more:
Show Content