Featured Content Bar

[TheDreadPirate]

You have to be in the directory where make.sh is located. It should be in the root directory of the extracted the contents of the source.

Or maybe you don't have python3 installed?

[SethBacon]

I have updated slideshow.html

-Much improved sourcing and randomness, only selects 20 items per mainpage load(variable)
-Configuration variables grouped at the top
-Now discards slides which don't have Logo Or Backdrop

Issues still; we move from the slide to the media item by an href call, which is not in line with regular jellyfin button navigation, and doesnt give the right referral for the app's back button. The slides or the frame itself needs to be a button, cant figure out how. Needs work. May be due to our hackey iframe injection and possibly could be solved by making this a proper real plugin.

[M0RPH3US]

I have updated slideshow.html

-Much improved sourcing and randomness, only selects 20 items per mainpage load(variable)
-Configuration variables grouped at the top
-Now discards slides which don't have Logo Or Backdrop

Issues still; we move from the slide to the media item by an href call, which is not in line with regular jellyfin button navigation, and doesnt give the right referral for the app's back button. The slides or the frame itself needs to be a button, cant figure out how. Needs work. May be due to our hackey iframe injection and possibly could be solved by making this a proper real plugin.

Awesome.. It works perfectly now. I added my tweaks gradients and stuff. Works like a charm

[Hectik]

Is this still compatible with 10.9.6?

[Hectik]

As a newbie. I don't know where to find the avatar folder to paste the slideshow.html . Can someone give me a little guide?

If the folder isn't already there you need to create this yourself .

In my case,  I'm using Jellyfin in docker LSIO version. I added this volume mapping to my docker compose file with a local folder named avatars containing the slideshow.html and list.txt files.

  volumes:
    - ./localpath/avatars:/usr/share/jellyfin/web/avatars

---

Is this still compatible with 10.9.6?

Nevermind just tested myself and it is!

[M0RPH3US]

I have updated slideshow.html

-Much improved sourcing and randomness, only selects 20 items per mainpage load(variable)
-Configuration variables grouped at the top
-Now discards slides which don't have Logo Or Backdrop

Issues still; we move from the slide to the media item by an href call, which is not in line with regular jellyfin button navigation, and doesnt give the right referral for the app's back button. The slides or the frame itself needs to be a button, cant figure out how. Needs work. May be due to our hackey iframe injection and possibly could be solved by making this a proper real plugin.

@SethBacon your pm is disabled. Saw your message. For sure we can jump over.

[Canadane]

Any chance of this eventually becoming a plugin for easier installation?
For the single brain cell users such as myself.

[Sash]

Hi, first of all thank you for this.
I'm good at following instructions but the guide has been so confusing. Btw, I'm on windows and I have basic knowledge of HTML, and coding.

So I got Ubuntu from Microsoft Store, and also turned on the Windows Subsystem for Linux feature from "Turn Windows features On or Off" since Ubuntu wasn't working without this or I'd get "WSLRegisterDistribution Failed with Error: 0x8007019e"

1. I downloaded the repo from here, but what do I do with it? It says few that a files from that repo zip "slideshow.html featuredstyles.css and featuredscripts.js" will stay in C:\Program Files\Jellyfin\Server\jellyfin-web\

But at what point do I copy them in that directory? after downloading it or after running the commands mentioned in the next steps?

2. I ran these commands in Ubuntu
sudo apt install jq python3
cd "/mnt/c/Program Files/Jellyfin/Server/jellyfin-web/"
ls | grep home-html

3. I found
home-html.YOURSWILLHAVENUMBERSHERE.chunk.js

and added this line in that json
<style>.featurediframe { width: 89vw; height: 300px; display: block; border: 1px solid #000; margin: 0 auto}</style> <iframe class="featurediframe" src="/web/avatars/slideshow.html"></iframe>

I also got my user id and api key for this to work, I added my api key, and user id in pull.py on line 8, line 10 & I also did the same in make.sh file on line 18, 19, 27, & 28.

I did not understand anything after that esp the point 7b from the guide could you please elaborate the steps from 7b to 10?

And after doing all of this I did get the featured bar but sometimes it was all blank, and sometimes the left, and right buttons below the featured bar would break it and cause the images to disappear, Most of the time the featured bar was blank.

Does the featured bar pick random media from library or do I have to enter the movies I want to be shown in the featured bar?

It would also be helpful if you could show screenshots or gifs from step 5 to 10, and the directory C:\Program Files\Jellyfin\Server\jellyfin-web\avatars

Thanks!

[Ted Hinklater]

Hi, first of all thank you for this.
I'm good at following instructions but the guide has been so confusing. Btw, I'm on windows and I have basic knowledge of HTML, and coding.

You can do it like this on Windows

• Download slideshow.html
  
• Enter your UserId into line 11 of slideshow.html (Get your UserID by going to the Jellyfin Dashboard, go to the Users tab, click your username. Your UserId is the last string in the address bar after the = sign)
  
• Enter your API key into line 12 of slideshow.html (Go to Dashboard, API Keys tab, click the + and create a key for FeaturedSlideshow)
  
• Go to your jellyfin-web folder (C:\Program Files\Jellyfin\Server\jellyfin-web) and create a folder named avatars and drop slideshow.html in that folder
  
• (Important: Open Notepad with Administrator rights, or use Notepad++ for this) In the jellyfin-web folder, open the file home-html.RANDOMSTRINGHERE.chunk.js
  
• Ctrl+F and search for data-backdroptype="movie,series,book"> Paste this after the >
  Code:

  <style>.featurediframe { width: 89vw; height: 300px; display: block; border: 1px solid #000; margin: 0 auto}</style> <iframe class="featurediframe" src="/web/avatars/slideshow.html"></iframe>
• Save the file.
  
• Empty your browser's cached web content (Ctrl+F5 or empty it from your browser's Cookies and Site Data settings section)
  

[Sash]

Hi, first of all thank you for this.
I'm good at following instructions but the guide has been so confusing. Btw, I'm on windows and I have basic knowledge of HTML, and coding.

You can do it like this on Windows

• Download slideshow.html
  
• Enter your UserId into line 11 of slideshow.html (Get your UserID by going to the Jellyfin Dashboard, go to the Users tab, click your username. Your UserId is the last string in the address bar after the = sign)
  
• Enter your API key into line 12 of slideshow.html (Go to Dashboard, API Keys tab, click the + and create a key for FeaturedSlideshow)
  
• Go to your jellyfin-web folder (C:\Program Files\Jellyfin\Server\jellyfin-web) and create a folder named avatars and drop slideshow.html in that folder
  
• (Important: Open Notepad with Administrator rights, or use Notepad++ for this) In the jellyfin-web folder, open the file home-html.RANDOMSTRINGHERE.chunk.js
  
• Ctrl+F and search for data-backdroptype="movie,series,book"> Paste this after the >
  Code:

  <style>.featurediframe { width: 89vw; height: 300px; display: block; border: 1px solid #000; margin: 0 auto}</style> <iframe class="featurediframe" src="/web/avatars/slideshow.html"></iframe>
• Save the file.
  
• Empty your browser's cached web content (Ctrl+F5 or empty it from your browser's Cookies and Site Data settings section)
  

Hey thanks! I have already read your guide on this from over here: https://github.com/tedhinklater/finality

Nice theme btw, I'm using it. 

I've did everything that was mentioned but the featured bar is still blank most of the times. I have about 40 movies in my library, and I want to know if it picks random movies or I have to make a text file for it or something. 

Thanks again.