HOW-TO:Change the episode thumbnail in Confluence

From Official Kodi Wiki
Jump to navigation Jump to search
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 (when playing/paused). This is achieved by editing VideoFullScreen.xml and Home.xml. You'd want to do this because sometimes the thumbnails contain spoilers.

Changing 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.

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

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> <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.

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>. It moves all the text a bit to the left so it matches how it looks when a movie is playing/paused.