HOW-TO:Change the episode thumbnail in Confluence: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
mNo edit summary
 
(14 intermediate revisions by one other user not shown)
Line 115: Line 115:
</control></syntaxhighlight>
</control></syntaxhighlight>
D. Change every occurrence of '''<left>210</left>''' to '''<left>160</left>'''. This will move all the text a bit to the left so it matches how it looks when a movie is playing/paused.
D. Change every occurrence of '''<left>210</left>''' to '''<left>160</left>'''. This will move all the text a bit to the left so it matches how it looks when a movie is playing/paused.
==Change the recently added episode thumbnails to fanart on the Home screen==
==Change the recently added episode thumbnails to fanart or TV Poster on the Home screen==
<gallery widths=500px heights=280px>
<gallery widths=500px heights=280px>
File:Recentlyaddedepisodemod-1.png|Original ''Home screen''
File:Recentlyaddedepisodemod-1.png|Original ''Home screen''
File:Recentlyaddedepisodemodfanart.png|MOD
File:Recentlyaddedepisodemodfanart.png|MOD Fanart
File:Recentlyaddedepisodemodtvposter.png|MOD TV Poster
</gallery><br />
</gallery><br />


Line 204: Line 205:
</item>
</item>
</content></syntaxhighlight>
</content></syntaxhighlight>
B. Change every occurrence of ''Thumb'' to ''Fanart'' in the ''thumb'' sections, i.e.  
B1. Change every occurrence of ''Thumb'' to ''Fanart'' in the ''thumb'' sections, i.e.  
<syntaxhighlight lang="xml"><thumb>$INFO[Window.Property(LatestEpisode.1.Thumb)]</thumb></syntaxhighlight>
<syntaxhighlight lang="xml"><thumb>$INFO[Window.Property(LatestEpisode.1.Thumb)]</thumb></syntaxhighlight>
e.g. '''LatestEpisode.1.Thumb''' to '''LatestEpisode.1.Fanart'''<br/><br/>
e.g. '''LatestEpisode.1.Thumb''' to '''LatestEpisode.1.Fanart'''<br/><br/>
B2. Or change every occurrence of ''Thumb'' to ''ShowThumb'' in the ''thumb'' sections to get TV Posters, i.e.
<syntaxhighlight lang="xml"><thumb>$INFO[Window.Property(LatestEpisode.1.Thumb)]</thumb></syntaxhighlight>
e.g. '''LatestEpisode.1.Thumb''' to '''LatestEpisode.1.ShowThumb'''<br/><br/>
{{Note| Changing to TV Posters doesn't look that good. You'll get smaller posters than for movies (because of the double lines) and a lot of dead space. So to get a good looking ''recently TV Shows'' you'd have to use the same style as for movies, increase to five episodes and e.g. remove the episode title line which is a bit more complex than just changing to TV Posters.}}<br />
C. Find the following ''control'' section:
C. Find the following ''control'' section:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Line 215: Line 223:
</syntaxhighlight>
</syntaxhighlight>
D. Within the ''control'' section find '''<itemlayout height="220" width="240">'''<br />
D. Within the ''control'' section find '''<itemlayout height="220" width="240">'''<br />
E. Within the ''itemlayout'' section find:
E. Within the ''itemlayout'' section find:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Line 229: Line 238:
</syntaxhighlight>
</syntaxhighlight>
F. Change '''<aspectratio>scale</aspectratio>''' to '''<aspectratio>keep</aspectratio>'''<br />
F. Change '''<aspectratio>scale</aspectratio>''' to '''<aspectratio>keep</aspectratio>'''<br />
''Keep'' will make so the whole fanart is visible, with ''scale'' the  aspect ratio is kept and any portions that lie outside the box are being cropped off.<br />
''Keep'' will make so the whole fanart is visible (though decreasing the height of the box), with ''scale'' the  aspect ratio is kept and any portions that lie outside the box are being cropped off.<br />
F. Within the TV ''control'' section find '''<focusedlayout height="220" width="240">'''<br />
G. Within the TV ''control'' section find '''<focusedlayout height="220" width="240">'''<br />
G. Within the ''focusedlayout '' section find:
 
H. Within the ''focusedlayout '' section find:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
<control type="image">
<control type="image">
Line 238: Line 248:
<width>220</width>
<width>220</width>
<height>155</height>
<height>155</height>
<aspectratio>keep</aspectratio>
<aspectratio>scale</aspectratio>
<texture background="true">$INFO[ListItem.Icon]</texture>
<texture background="true">$INFO[ListItem.Icon]</texture>
<bordertexture border="5">folder-focus.png</bordertexture>
<bordertexture border="5">folder-focus.png</bordertexture>
Line 249: Line 259:
<width>220</width>
<width>220</width>
<height>155</height>
<height>155</height>
<aspectratio>keep</aspectratio>
<aspectratio>scale</aspectratio>
<texture>$INFO[ListItem.Icon]</texture>
<texture>$INFO[ListItem.Icon]</texture>
<bordertexture border="5">button-nofocus.png</bordertexture>
<bordertexture border="5">button-nofocus.png</bordertexture>
Line 256: Line 266:
</control>
</control>
</syntaxhighlight>
</syntaxhighlight>
H. Change '''<aspectratio>scale</aspectratio>''' to '''<aspectratio>keep</aspectratio>'''
I. Change '''<aspectratio>scale</aspectratio>''' to '''<aspectratio>keep</aspectratio>'''
 
 
[[Category:How-to]]
[[Category:How-to]]
[[Category:Skin_development]]

Latest revision as of 06:10, 29 August 2020

Home icon grey.png   ▶ Skinning ▶ Confluence ▶ HOW-TO:Change the episode thumbnail in Confluence


This tutorial will show how to change the episode thumbnail on the Info screen I, OSD M and Home screen. This is achieved by editing VideoFullScreen.xml, Home.xml and IncludesHomeRecentlyAdded.xml You'd want to do this because sometimes the thumbnails contain spoilers, also it looks better.

Change the episode thumbnail to a TV Show poster on the OSD & Info screen

A. Open the file VideoFullScreen.xml and find the following code. It's easiest found by searching for [VideoPlayer.Content(Movies) | VideoPlayer.Content(LiveTV)]

<control type="image" id="1"><br />
    <description>cover image</description>
    <left>20</left>
    <top>260r</top>
    <width>300</width>
    <height>230</height>
    <texture fallback="DefaultVideoCover.png">$INFO[Player.Art(thumb)]</texture>
    <aspectratio aligny="bottom">keep</aspectratio>
    <bordertexture border="8">ThumbShadow.png</bordertexture>
    <bordersize>8</bordersize>
    <visible>![VideoPlayer.Content(Movies) | VideoPlayer.Content(LiveTV)]</visible>
</control


B. Replace $INFO[Player.Art(thumb)] with $INFO[Player.Art(tvshow.poster)]
This changes the episode thumbnail to a TV Show poster.

C. Change:
<top>260r</top> to <top>350r</top>
<height>230</height> to <height>330</height>
This will make the TV Show poster the same size as movie posters.

Change the episode thumbnail to a TV Show poster on the Home screen

This is shown on the Home screen while pausing or playing an episode.

A. Open the file Home.xml and find the following code. It's easiest found by searching for <visible>VideoPlayer.Content(Episodes)

<visible>VideoPlayer.Content(Movies)</visible>
<control type="image">
	<description>Cover image</description>
	<left>20</left>
	<top>225</top>
	<width>180</width>
	<height>120</height>
	<aspectratio>scale</aspectratio>
	<texture fallback="DefaultVideoCover.png">$INFO[Player.Art(thumb)]</texture>
	<bordertexture border="8">ThumbBorder.png</bordertexture>
	<bordersize>5</bordersize>
</control>

B. Change:
<top>225</top> to <top>45</top>
<width>180</width> to <width>120</width>
<height>120</height> to <height>300</height>
<aspectratio>scale</aspectratio> to <aspectratio aligny="bottom">keep</aspectratio>
$INFO[Player.Art(thumb)] to $INFO[Player.Art(tvshow.poster)]
This will add the TV poster in the correct position.

Or just replace the above control section with this:

<control type="image">
	<description>Cover image</description>
	<left>20</left>
	<top>45</top>
	<width>120</width>
	<height>300</height>
	<aspectratio aligny="bottom">keep</aspectratio>
	<texture fallback="DefaultVideoCover.png">$INFO[Player.Art(tvshow.poster)]</texture>
	<bordertexture border="8">ThumbBorder.png</bordertexture>
	<bordersize>5</bordersize>
</control>

C. Find the following code. It's just below the above code.

	<control type="label">
		<description>TV Show Season Ep Label</description>
		<left>210</left>
		<top>265</top>
		<height>25</height>
		<width>1000</width>
		<label>$INFO[VideoPlayer.TVShowTitle] ($INFO[VideoPlayer.Season,$LOCALIZE[20373] , - ]$INFO[VideoPlayer.episode,$LOCALIZE[20359] ,])</label>
		<align>left</align>
		<aligny>center</aligny>
		<font>font12</font>
		<textcolor>white</textcolor>
		<shadowcolor>black</shadowcolor>
	</control>
	<control type="label">
		<description>Title label</description>
		<left>210</left>
		<top>285</top>
		<height>30</height>
		<width>1000</width>
		<label>$INFO[Player.Title]</label>
		<align>left</align>
		<aligny>center</aligny>
		<font>font13_title</font>
		<textcolor>white</textcolor>
		<shadowcolor>black</shadowcolor>
	</control>
	<control type="label">
		<description>Time Label</description>
		<left>210</left>
		<top>310</top>
		<height>30</height>
		<width>300</width>
		<label>$INFO[Player.Time]$INFO[Player.Duration,[COLOR=blue] / [/COLOR]]</label>
		<align>left</align>
		<aligny>center</aligny>
		<font>font12</font>
		<textcolor>white</textcolor>
		<shadowcolor>black</shadowcolor>
	</control>

D. Change every occurrence of <left>210</left> to <left>160</left>. This will move all the text a bit to the left so it matches how it looks when a movie is playing/paused.

Change the recently added episode thumbnails to fanart or TV Poster on the Home screen


A. Open the file IncludesHomeRecentlyAdded.xml. Find the following code. Easiest found by searching for LatestEpisode.1.EpisodeTitle

<content>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.1.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.1.ShowTitle)] - $INFO[Window.Property(LatestEpisode.1.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.1.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.1.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.1.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.2.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.2.ShowTitle)] - $INFO[Window.Property(LatestEpisode.2.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.2.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.2.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.2.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.3.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.3.ShowTitle)] - $INFO[Window.Property(LatestEpisode.3.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.3.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.3.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.3.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.4.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.4.ShowTitle)] - $INFO[Window.Property(LatestEpisode.4.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.4.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.4.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.4.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.5.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.5.ShowTitle)] - $INFO[Window.Property(LatestEpisode.5.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.5.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.5.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.5.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.6.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.6.ShowTitle)] - $INFO[Window.Property(LatestEpisode.6.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.6.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.6.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.6.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.7.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.7.ShowTitle)] - $INFO[Window.Property(LatestEpisode.7.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.7.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.7.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.7.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.8.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.8.ShowTitle)] - $INFO[Window.Property(LatestEpisode.8.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.8.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.8.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.8.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.9.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.9.ShowTitle)] - $INFO[Window.Property(LatestEpisode.9.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.9.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.9.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.9.EpisodeTitle))</visible>
	</item>
	<item>
		<label>$INFO[Window.Property(LatestEpisode.10.EpisodeTitle)]</label>
		<label2>$INFO[Window.Property(LatestEpisode.10.ShowTitle)] - $INFO[Window.Property(LatestEpisode.10.EpisodeNo)]</label2>
		<onclick>PlayMedia($ESCINFO[Window.Property(LatestEpisode.10.Path)])</onclick>
		<icon>-</icon>
		<thumb>$INFO[Window.Property(LatestEpisode.10.Thumb)]</thumb>
		<visible>!IsEmpty(Window.Property(LatestEpisode.10.EpisodeTitle))</visible>
	</item>
</content>

B1. Change every occurrence of Thumb to Fanart in the thumb sections, i.e.

<thumb>$INFO[Window.Property(LatestEpisode.1.Thumb)]</thumb>

e.g. LatestEpisode.1.Thumb to LatestEpisode.1.Fanart

B2. Or change every occurrence of Thumb to ShowThumb in the thumb sections to get TV Posters, i.e.

<thumb>$INFO[Window.Property(LatestEpisode.1.Thumb)]</thumb>

e.g. LatestEpisode.1.Thumb to LatestEpisode.1.ShowThumb

Note: Changing to TV Posters doesn't look that good. You'll get smaller posters than for movies (because of the double lines) and a lot of dead space. So to get a good looking recently TV Shows you'd have to use the same style as for movies, increase to five episodes and e.g. remove the episode title line which is a bit more complex than just changing to TV Posters.

C. Find the following control section:

<control type="group">
	<left>160</left>
	<top>50</top>
	<visible>Library.HasContent(TVShows)</visible>

D. Within the control section find <itemlayout height="220" width="240">

E. Within the itemlayout section find:

<control type="image">
	<left>10</left>
	<top>10</top>
	<width>220</width>
	<height>155</height>
	<aspectratio>scale</aspectratio>
	<texture background="true">$INFO[ListItem.Icon]</texture>
	<bordertexture border="5">button-nofocus.png</bordertexture>
	<bordersize>5</bordersize>
</control>

F. Change <aspectratio>scale</aspectratio> to <aspectratio>keep</aspectratio>
Keep will make so the whole fanart is visible (though decreasing the height of the box), with scale the aspect ratio is kept and any portions that lie outside the box are being cropped off.
G. Within the TV control section find <focusedlayout height="220" width="240">

H. Within the focusedlayout section find:

<control type="image">
	<left>10</left>
	<top>10</top>
	<width>220</width>
	<height>155</height>
	<aspectratio>scale</aspectratio>
	<texture background="true">$INFO[ListItem.Icon]</texture>
	<bordertexture border="5">folder-focus.png</bordertexture>
	<bordersize>5</bordersize>
	<visible>Control.HasFocus(8001)</visible>
</control>
<control type="image">
	<left>10</left>
	<top>10</top>
	<width>220</width>
	<height>155</height>
	<aspectratio>scale</aspectratio>
	<texture>$INFO[ListItem.Icon]</texture>
	<bordertexture border="5">button-nofocus.png</bordertexture>
	<bordersize>5</bordersize>
	<visible>!Control.HasFocus(8001)</visible>
</control>

I. Change <aspectratio>scale</aspectratio> to <aspectratio>keep</aspectratio>