TUTORIAL Changing TMDB Backdrop/Posters (autoads.php)

FelixSchrodinger

Well-known member
Joined
Jun 17, 2022
Messages
256
Awards
3
Offline
I spotted a request on here from @blackestflag and thought I'd do some digging to figure it out myself... Then thought instead of just posting the php file or instructions on what to copy/paste... Why not make a little video documenting how I figured it out and what tools I use to help rev-eng (so maybe someone here can learn too). For context I have next to no experience with php so anyone can do this.

This will show you how to change the posters from movies to series, how to remove info from the details bar (in this case, duration/runtime).

Screenshots loaded from browser in PC by going to 'yourhost.xyz/smarterspanel/api/autoads.php' . They appear differently in your app depending how its set up. Obviously replace yourhost.xyz/smarterspanel with your own domain/folder.

Movies - before edits

1709089286005.png

Series - with added overview/descripton

1709092707220.png


I don't show moving the ratings bar etc around but I mention where the lines are to change position etc.

What you need:

- A text editor (if you don't already have Notepad++, get it)
- Common sense

Tools I use for investigating:

- Notepad++ and its compare plugin. It's find/replace functions (Ctrl+F, it can find in files/folders to search any file for words).
- WinMerge - if I have 2 panels, they're built from the same source but have different features, I can use WinMerge to compare and single out differences. (didn't use it here but worth a mention).

To change from movies to series, find & replace (without quotes):

"/movie/" with "/tv/"
"/movie?" with "/tv?"
"data.release_date" with "data.first_air_date"
"data.title" with "data.name"

Vice versa to change back. If changing to series, you need to hide the runtime/duration info from the "subtitial-info" bar, it's not relevant to series.

Lines 241-254 in autoads.php:
PHP:
                       // Update movie subtitial
                        const releaseDate_full = data.first_air_date;
                        const genresArray = data.genres.map(genre => `🎬 ${genre.name}`).join(' ');
                        const origin_country = data.production_companies.map(production_companies => `${production_companies.origin_country}`).join(' ');
                        const duration = data.runtime;
                        const hours = Math.floor(duration / 60) + 'h';
                        const minutes = duration % 60 + 'm';
                        const fullSubtitial = ` 📀 ` + releaseDate_full + ` (${origin_country}) ` + ` | ` + genresArray + ` | ` + '🕝 ' + hours + ' ' + minutes;
                        mcategory.innerText = fullSubtitial;

                        const mrating = data.vote_average;
                        rtxratingbar.setAttribute("value", mrating);

To remove duration, delete " + ` | ` + '🕝 ' + hours + ' ' + minutes" from line 248 (shown as 8 here). Then comment out the duration, hours and minutes definitions (lines 245/6/7 or 5/6/7 here) by adding "// " before them, so it should look like this:
PHP:
                        // const duration = data.runtime;

                        // const hours = Math.floor(duration / 60) + 'h';

                        // const minutes = duration % 60 + 'm';

                        const fullSubtitial = ` 📀 ` + releaseDate_full + ` (${origin_country}) ` + ` | ` + genresArray;

To unhide/hide overview/description, just underneath the last snippet of code you'll see:

PHP:
// movieOverview.innerText = data.overview;

Uncomment this line to show them (delete the "// "

To move ratings etc around/change sizes, its all configured in lines 278-389. You'll have to tinker with positions/sizes, do some trial and error until you get it right for the app you've got.

Here's video of how I figured it out:

 
Last edited:

G-man

Well-known member
Joined
Apr 16, 2021
Messages
1,908
Awards
4
Offline
great piece m8 , i prefer it better when you show rather than spoon feed a solution :)
many thanks
could not work out where thefont color size etc is located ? any insight please ? not quite sure what to change yet but think something needs changing :)
EDIT : think i found where to change :)

Screenshot 2024-02-28 111412.jpg
 
Last edited:

G-man

Well-known member
Joined
Apr 16, 2021
Messages
1,908
Awards
4
Offline
After about 30 mins playing with the file I managed to get it to where I wanted it :) many thanks again for the tutorial
it showed me where to look :)
Screenshot 2024-02-28 120858.jpg
 

Attachments

  • Screenshot 2024-02-28 120814.jpg
    Screenshot 2024-02-28 120814.jpg
    1.5 MB · Views: 76

blackestflag

Well-known member
Joined
Oct 19, 2022
Messages
496
Awards
4
Offline
I spotted a request on here from @blackestflag and thought I'd do some digging to figure it out myself... Then thought instead of just posting the php file or instructions on what to copy/paste... Why not make a little video documenting how I figured it out and what tools I use to help rev-eng (so maybe someone here can learn too). For context I have next to no experience with php so anyone can do this.

This will show you how to change the posters from movies to series, how to remove info from the details bar (in this case, duration/runtime).

Screenshots loaded from browser in PC by going to 'yourhost.xyz/smarterspanel/api/autoads.php' . They appear differently in your app depending how its set up.

Movies - before edits

View attachment 8993

Series - with added overview/descripton

View attachment 8994


I don't show moving the ratings bar etc around but I mention where the lines are to change position etc.

What you need:

- A text editor (if you don't already have Notepad++, get it)
- Common sense

Tools I use for investigating:

- Notepad++ and its compare plugin. It's find/replace functions (Ctrl+F, it can find in files/folders to search any file for words).
- WinMerge - if I have 2 panels, they're built from the same source but have different features, I can use WinMerge to compare and single out differences. (didn't use it here but worth a mention).

To change from movies to series, find & replace (without quotes):

"/movie/" with "/tv/"
"/movie?" with "/tv?"
"data.release_date" with "data.first_air_date"
"data.title" with "data.name"

Vice versa to change back. If changing to series, you need to hide the runtime/duration info from the "subtitial-info" bar, it's not relevant to series.

Lines 241-254 in autoads.php:
PHP:
                       // Update movie subtitial
                        const releaseDate_full = data.first_air_date;
                        const genresArray = data.genres.map(genre => `🎬 ${genre.name}`).join(' ');
                        const origin_country = data.production_companies.map(production_companies => `${production_companies.origin_country}`).join(' ');
                        const duration = data.runtime;
                        const hours = Math.floor(duration / 60) + 'h';
                        const minutes = duration % 60 + 'm';
                        const fullSubtitial = ` 📀 ` + releaseDate_full + ` (${origin_country}) ` + ` | ` + genresArray + ` | ` + '🕝 ' + hours + ' ' + minutes;
                        mcategory.innerText = fullSubtitial;

                        const mrating = data.vote_average;
                        rtxratingbar.setAttribute("value", mrating);

To remove duration, delete " + ` | ` + '🕝 ' + hours + ' ' + minutes" from line 248 (shown as 8 here). Then comment out the duration, hours and minutes definitions (lines 245/6/7 or 5/6/7 here) by adding "// " before them, so it should look like this:
PHP:
                        // const duration = data.runtime;

                        // const hours = Math.floor(duration / 60) + 'h';

                        // const minutes = duration % 60 + 'm';

                        const fullSubtitial = ` 📀 ` + releaseDate_full + ` (${origin_country}) ` + ` | ` + genresArray;

To unhide/hide overview/description, just underneath the last snippet of code you'll see:

PHP:
// movieOverview.innerText = data.overview;

Uncomment this line to show them (delete the "// "

To move ratings etc around/change sizes, its all configured in lines 278-389. You'll have to tinker with positions/sizes, do some trial and error until you get it right for the app you've got.

Here's video of how I figured it out:

Thanks so much Felix!!

I thought I was close to getting it nailed down, and should have known to check out the data.release.date, etc

It's fun coming up with challenges, and I truly appreciate the effort, and sense of pride you have in helping all of us get better !
 

G-man

Well-known member
Joined
Apr 16, 2021
Messages
1,908
Awards
4
Offline
using the same method for Smarters it was almost identical to edit XCIPTV with IMDB with background and plot outline
i have previously done some work on the title placment but didnt realise how easy it was for plot outline ? :)
could probably raise the info a little but happy for now
means that i have SMARTERS ,XCIPTV and IBO in this format :)
great :) enjoyed a little tinkering this morning absolute gem of a tutorial :)
Sky Live XC_20240228_143702.jpg
 

FelixSchrodinger

Well-known member
Joined
Jun 17, 2022
Messages
256
Awards
3
Offline
Cheers @blackestflag and @G-man , appreciate the gratitude lads. I thought making the video wouldn't take long but it took longer than I expected 😅, I'm no video editing pro and wasn't trying to whip anything fancy up.

An interesting idea... would be to have it alternate between "tv" and "movie" in the script, like a dynamic variable. Have the variable as an if statement. Maybe show the movie poster, then change the variable to tv to preload the next poster with "tv" as the variables in the URL. So it alternates between movies and series every poster loaded. Or have it as movies for a time period, then switch to series (every 10minutes, 1 hour) or have it check the current date once a day to see if todays "DD" is an odd number, if it is, use "tv," if not, use "movie" to alternate daily. This is rough, I'll get help from ChatGPT, but something along the lines of this, replacing "tv" or "movie" with ${VODSTRING} in the API URL.

PHP:
// Not sure if this will even work being dynamic, considering "const" stands for constant lol and not variable
const VODSTRING = 'link to an if... if DD in currentDateString=odd then vod=tv, else vod=movie'

try {
        const response = await fetch(`https://api.themoviedb.org/3/discover/${VODSTRING}?api_key=${apiKey}-blahblah`);
        const data = await response.json();
        movieIds = data.results.map(movie => movie.id);
    } catch (error) {
        console.error(error);
    }
}

That would be a nice extra and if someone wanted to go that route, modifying the php script would be the ideal way for someone who is shifting the panel to punters.

Another way to do it... would be to have 3 autoads scripts on your host, one called autoads.php, one called autoadstv.php (series script) and the last autoadsmovie.php , then setup a simple cronjob on your host (or scheduled task if its Windows) to periodically copy&replace autoads.php with autoadstv.php or autoadsmovie.php. That would be simple to set up, but not practical for people selling the panel.

I'm gonna have a crack at it and post back here...
 

blackestflag

Well-known member
Joined
Oct 19, 2022
Messages
496
Awards
4
Offline
Cheers @blackestflag and @G-man , appreciate the gratitude lads. I thought making the video wouldn't take long but it took longer than I expected 😅, I'm no video editing pro and wasn't trying to whip anything fancy up.

An interesting idea... would be to have it alternate between "tv" and "movie" in the script, like a dynamic variable. Have the variable as an if statement. Maybe show the movie poster, then change the variable to tv to preload the next poster with "tv" as the variables in the URL. So it alternates between movies and series every poster loaded. Or have it as movies for a time period, then switch to series (every 10minutes, 1 hour) or have it check the current date once a day to see if todays "DD" is an odd number, if it is, use "tv," if not, use "movie" to alternate daily. This is rough, I'll get help from ChatGPT, but something along the lines of this, replacing "tv" or "movie" with ${VODSTRING} in the API URL.

PHP:
// Not sure if this will even work being dynamic, considering "const" stands for constant lol and not variable
const VODSTRING = 'link to an if... if DD in currentDateString=odd then vod=tv, else vod=movie'

try {
        const response = await fetch(`https://api.themoviedb.org/3/discover/${VODSTRING}?api_key=${apiKey}-blahblah`);
        const data = await response.json();
        movieIds = data.results.map(movie => movie.id);
    } catch (error) {
        console.error(error);
    }
}

That would be a nice extra and if someone wanted to go that route, modifying the php script would be the ideal way for someone who is shifting the panel to punters.

Another way to do it... would be to have 3 autoads scripts on your host, one called autoads.php, one called autoadstv.php (series script) and the last autoadsmovie.php , then setup a simple cronjob on your host (or scheduled task if its Windows) to periodically copy&replace autoads.php with autoadstv.php or autoadsmovie.php. That would be simple to set up, but not practical for people selling the panel.

I'm gonna have a crack at it and post back here...
Dude, I swear you are a mind reader....
Most excellent idea to have it alternate...

I just had one of my beta testers ask if would be possible to have a version that could be restricted by content rating. I see a content rating section over on the TMDB dev site, but don't see how it would apply to a movie poster that is well... um.... not ideal for a 5 year old to walk by and see on the TV... such as the poster for "Anyone but You". If either of you guys have any ideas, let me know

That's just spitballing but daaaaaam, alternate between TV and Movie would be mint !
 

FelixSchrodinger

Well-known member
Joined
Jun 17, 2022
Messages
256
Awards
3
Offline
Dude, I swear you are a mind reader....
Most excellent idea to have it alternate...

I just had one of my beta testers ask if would be possible to have a version that could be restricted by content rating. I see a content rating section over on the TMDB dev site, but don't see how it would apply to a movie poster that is well... um.... not ideal for a 5 year old to walk by and see on the TV... such as the poster for "Anyone but You". If either of you guys have any ideas, let me know

That's just spitballing but daaaaaam, alternate between TV and Movie would be mint !

That's setup in your TMDB account mate. Your own TMDB API key you can set your account to restrict adult content on posters.

1000042391.jpg
 

G-man

Well-known member
Joined
Apr 16, 2021
Messages
1,908
Awards
4
Offline
I have two versions of IBO player 3.8 and both are full screen imdb style but two very different versions behind the scenes
they both display a mix of tv shows and movies so its deffo possible will need to look as the files are named differently

have dm you on telegram m8 with a little file you may find usefull :)
 
Last edited:

betotun

Well-known member
Joined
May 28, 2021
Messages
361
Awards
4
Offline
In panel 3.8 published here in the forum there should be the tmdb files that exchange between movies and tvshow made by jbetbet
 

blackestflag

Well-known member
Joined
Oct 19, 2022
Messages
496
Awards
4
Offline
That's setup in your TMDB account mate. Your own TMDB API key you can set your account to restrict adult content on posters.

View attachment 9013
Thanks Felix, I was referring more to images such as the one below. It's not overly graphic, but a 5 yr old may think otherwise, lol.
This particular one does have an "R" rating, and not Adult (which I already have disabled)
There must be a way to actually set rating classification limits. I will look deeper into it as time permits

Again, appreciate ya !

1709742247193.png
 

FelixSchrodinger

Well-known member
Joined
Jun 17, 2022
Messages
256
Awards
3
Offline
Thanks Felix, I was referring more to images such as the one below. It's not overly graphic, but a 5 yr old may think otherwise, lol.
This particular one does have an "R" rating, and not Adult (which I already have disabled)
There must be a way to actually set rating classification limits. I will look deeper into it as time permits

Again, appreciate ya !

View attachment 9098

Only way I can think is programmatically in the script... With it being R rated, if you blocked based on rating, then there'd be lots that doesn't get through. You can't exclude results through the API, but you could have in the script something along the lines of "if genre_id=10749 (the ID for Romance) then skip". Just an idea.
 
Top