HOW-TO:Change the episode thumbnail in Confluence

From Official Kodi Wiki
Revision as of 12:03, 9 September 2015 by Uixtung (talk | contribs)
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. This is achieved by editing VideoFullScreen.xml and Home.xml. You'd want to do this because sometimes the thumbnails contain spoilers, also it looks better.

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

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.

Changing the episode thumbnail to fanart on the Home screen