Artwork/Accessing with skins and JSON-RPC - Revision history

Rmrector: /* Kodi-encoded URL */ adjust example to match

2024-01-26T19:11:28Z

Kodi-encoded URL: adjust example to match

← Older revision		Revision as of 19:11, 26 January 2024
Line 106:		Line 106:
	The final URL will look like		The final URL will look like

	<nowiki>http://kodihost:8080/image/image%3A%2F%2Fnfs%253a%252f%~~252fCUBER~~%252fmedia~~%252fpreserved~~%252fTVShows%252fV%2520(2009)%252fposter.jpg%2F</nowiki>		<nowiki>http://kodihost:8080/image/image%3A%2F%2Fnfs%253a%252f%252fSERVER%252fmedia%252fTVShows%252fV%2520(2009)%252fposter.jpg%2F</nowiki>

	You can also turn the "image://" URL into a more traditional looking path/URL (https:// or smb:// or H:\) by chopping off the "image://" up front and the slash at the end, then decoding the rest as a URI component.		You can also turn the "image://" URL into a more traditional looking path/URL (https:// or smb:// or H:\) by chopping off the "image://" up front and the slash at the end, then decoding the rest as a URI component.



	= Access "parent" artwork =		= Access "parent" artwork =

Rmrector: format initial examples and small adjust JSON-RPC result example

2024-01-26T18:05:54Z

format initial examples and small adjust JSON-RPC result example

← Older revision		Revision as of 18:05, 26 January 2024
Line 8:		Line 8:

	= From skins =		= From skins =
	Skins can access library artwork for media items in a list with "ListItem.Art(<arttype>)" and artwork for the currently playing item with "Player.Art(<arttype>)". "Container.Art(<arttype>)" can also be filled in some instances. Some examples are:		Skins can access library artwork for media items in a list with "ListItem.Art(<arttype>)" and artwork for the currently playing item with "Player.Art(<arttype>)". "Container.Art(<arttype>)" can also be filled in some instances. Some examples are: <code>Player.Art(poster)</code>, <code>Player.Art(fanart)</code>, <code>ListItem.Art(banner)</code>, <code>ListItem.Art(tvshow.clearlogo)</code>.
	<~~syntaxhighlight lang="json"~~>
	~~{{code\|~~Player.Art(poster)}}
	{{code\|Player.Art(fanart)}}
	{{code\|ListItem.Art(banner)}}
	{{code\|ListItem.Art(tvshow.clearlogo)}}
	</~~syntaxhighlight~~>


Line 82:		Line 76:
	{		{
	"art": {		"art": {
	"season.banner": "image://nfs%3a%2f%~~2fCUBER~~%2fmedia~~%2fpreserved~~%2fTVShows%2fV%20(2009)%2fseason02-banner.jpg/",		"season.banner": "image://nfs%3a%2f%2fSERVER%2fmedia%2fTVShows%2fV%20(2009)%2fseason02-banner.jpg/",
	"season.landscape": "image://nfs%3a%2f%~~2fCUBER~~%2fmedia~~%2fpreserved~~%2fTVShows%2fV%20(2009)%2fseason02-landscape.jpg/",		"season.landscape": "image://nfs%3a%2f%2fSERVER%2fmedia%2fTVShows%2fV%20(2009)%2fseason02-landscape.jpg/",
	"season.poster": "image://nfs%3a%2f%~~2fCUBER~~%2fmedia~~%2fpreserved~~%2fTVShows%2fV%20(2009)%2fseason02-poster.jpg/",		"season.poster": "image://nfs%3a%2f%2fSERVER%2fmedia%2fTVShows%2fV%20(2009)%2fseason02-poster.jpg/",
	"thumb": "image://video@nfs%3a%2f%~~2fCUBER~~%2fmedia~~%2fpreserved~~%2fTVShows%2fV%20(2009)%2fV%20(2009)%20-%2002x05%20-%20Concordia%20-%20720p%20WEB-DL.mkv/",		"thumb": "image://video@nfs%3a%2f%2fSERVER%2fmedia%2fTVShows%2fV%20(2009)%2fV%20(2009)%20-%2002x05%20-%20Concordia%20-%20720p%20WEB-DL.mkv/",
	"tvshow.banner": "image://nfs%3a%2f%~~2fCUBER~~%2fmedia~~%2fpreserved~~%2fTVShows%2fV%20(2009)%2fbanner.jpg/",		"tvshow.banner": "image://nfs%3a%2f%2fSERVER%2fmedia%2fTVShows%2fV%20(2009)%2fbanner.jpg/",
	"tvshow.clearlogo": "image://nfs%3a%2f%~~2fCUBER~~%2fmedia~~%2fpreserved~~%2fTVShows%2fV%20(2009)%2fclearlogo.png/",		"tvshow.clearlogo": "image://nfs%3a%2f%2fSERVER%2fmedia%2fTVShows%2fV%20(2009)%2fclearlogo.png/",
	"tvshow.fanart": "image://nfs%3a%2f%~~2fCUBER~~%2fmedia~~%2fpreserved~~%2fTVShows%2fV%20(2009)%2ffanart.jpg/",		"tvshow.fanart": "image://nfs%3a%2f%2fSERVER%2fmedia%2fTVShows%2fV%20(2009)%2ffanart.jpg/",
	"tvshow.poster": "image://nfs%3a%2f%~~2fCUBER~~%2fmedia~~%2fpreserved~~%2fTVShows%2fV%20(2009)%2fposter.jpg/"		"tvshow.poster": "image://nfs%3a%2f%2fSERVER%2fmedia%2fTVShows%2fV%20(2009)%2fposter.jpg/"
	},		},
	"episodeid": 2196,		"episodeid": 2196,

Karellen: Updated for v20

2023-02-05T00:04:14Z

Updated for v20

← Older revision		Revision as of 00:04, 5 February 2023
Line 202:		Line 202:
	= {{Kodi}} version updates =		= {{Kodi}} version updates =

	* ~~The~~ '''music library''' ~~in {{Kodi}} 17 and before~~ was '''limited to just "fanart" and "thumb" for artist images''' and '''"thumb" for album images''', it did not have the flexibility to add a wide variety of artwork. The video library has had this level of support for some time ~~now~~.		* {{Kodi}} 17 and before in the '''music library''' was '''limited to just "fanart" and "thumb" for artist images''' and '''"thumb" for album images''', it did not have the flexibility to add a wide variety of artwork. The video library has had this level of support for some time.
	* {{Kodi}} 18 adds a '''[[Advancedsettings.xml#Music library extra artwork\| whitelist in advancedsettings.xml]]''' ([[Advancedsettings.xml#Extra artwork\|for the video library]]) so that {{Kodi}} will add any specified artwork from scrapers and the file system automatically.		* {{Kodi}} 18 adds a '''[[Advancedsettings.xml#Music library extra artwork\| whitelist in advancedsettings.xml]]''' ([[Advancedsettings.xml#Extra artwork\|for the video library]]) so that {{Kodi}} will add any specified artwork from scrapers and the file system automatically.
	* {{Kodi}} 19 moves that configuration to the '''[[Settings/Media/Videos#Artwork\| Settings UI]]'''.		* {{Kodi}} 19 moves that configuration to the '''[[Settings/Media/Videos#Artwork\| Settings UI]]'''.
Line 209:		Line 209:
	{{Top}}		{{Top}}

	{{updated\|18}}		{{updated\|20}}
	[[Category:Development]]		[[Category:Development]]
			[[Category:Skin_development]]

Rmrector: link to settings for Kodi 19+

2023-02-04T18:36:39Z

link to settings for Kodi 19+

← Older revision		Revision as of 18:36, 4 February 2023
Line 204:		Line 204:
	* The '''music library''' in {{Kodi}} 17 and before was '''limited to just "fanart" and "thumb" for artist images''' and '''"thumb" for album images''', it did not have the flexibility to add a wide variety of artwork. The video library has had this level of support for some time now.		* The '''music library''' in {{Kodi}} 17 and before was '''limited to just "fanart" and "thumb" for artist images''' and '''"thumb" for album images''', it did not have the flexibility to add a wide variety of artwork. The video library has had this level of support for some time now.
	* {{Kodi}} 18 adds a '''[[Advancedsettings.xml#Music library extra artwork\| whitelist in advancedsettings.xml]]''' ([[Advancedsettings.xml#Extra artwork\|for the video library]]) so that {{Kodi}} will add any specified artwork from scrapers and the file system automatically.		* {{Kodi}} 18 adds a '''[[Advancedsettings.xml#Music library extra artwork\| whitelist in advancedsettings.xml]]''' ([[Advancedsettings.xml#Extra artwork\|for the video library]]) so that {{Kodi}} will add any specified artwork from scrapers and the file system automatically.
			* {{Kodi}} 19 moves that configuration to the '''[[Settings/Media/Videos#Artwork\| Settings UI]]'''.

Karellen: Hope you don't mind the little tweaks bossanova

2023-02-03T22:31:38Z

Hope you don't mind the little tweaks bossanova

← Older revision		Revision as of 22:31, 3 February 2023
Line 5:		Line 5:

	Media items with a "parent" media type, such as episodes to their TV show, can also access their parent's artwork with certain prefixes, like "tvshow.poster".		Media items with a "parent" media type, such as episodes to their TV show, can also access their parent's artwork with certain prefixes, like "tvshow.poster".


	= From skins =		= From skins =
			Skins can access library artwork for media items in a list with "ListItem.Art(<arttype>)" and artwork for the currently playing item with "Player.Art(<arttype>)". "Container.Art(<arttype>)" can also be filled in some instances. Some examples are:
			<syntaxhighlight lang="json">
			{{code\|Player.Art(poster)}}
			{{code\|Player.Art(fanart)}}
			{{code\|ListItem.Art(banner)}}
			{{code\|ListItem.Art(tvshow.clearlogo)}}
			</syntaxhighlight>

	Skins can access library artwork for media items in a list with "ListItem.Art(<arttype>)" and artwork for the currently playing item with "Player.Art(<arttype>)". "Container.Art(<arttype>)" can also be filled in some instances. Some examples are {{code\|Player.Art(poster)}}, {{code\|Player.Art(fanart)}}, {{code\|ListItem.Art(banner)}}, and {{code\|ListItem.Art(tvshow.clearlogo)}}.

	{\| class="prettytable" width="100%"		{\| class="prettytable" width="100%"
Line 27:		Line 34:
	\| Artwork for the currently focused ListItem in a specific container.		\| Artwork for the currently focused ListItem in a specific container.
	\|}		\|}


	== Additional InfoLabels for artwork ==		== Additional InfoLabels for artwork ==

	There are other InfoLabels for artwork that don't match the above pattern, but many of them are deprecated. A set of them that can still be useful are		There are other InfoLabels for artwork that don't match the above pattern, but many of them are deprecated. A set of them that can still be useful are

Line 53:		Line 60:
	{{code\|MusicPlayer.Position(2).Property(Fanart_Image)}} - second item in queue		{{code\|MusicPlayer.Position(2).Property(Fanart_Image)}} - second item in queue
	\|}		\|}



	= From JSON-RPC =		= From JSON-RPC =
			Several JSON-RPC methods (like "VideoLibrary.GetMovies", "AudioLibrary.GetAlbumDetails", and "Playlist.GetItems") return info for media items in the library, and requesting the "art" property will return an "art" dictionary that maps all available artwork for the media item. The key is the artwork type and the value is a Kodi-encoded URL or path to the assigned artwork.

	Several JSON-RPC methods (like "VideoLibrary.GetMovies", "AudioLibrary.GetAlbumDetails", and "Playlist.GetItems") return info for media items in the library, and requesting the "art" property will return an "art" dictionary that maps all available artwork for the media item. The key is the artwork type and the value is a Kodi-encoded URL or path to the assigned artwork.

	== Example ==		== Example ==
			Example request:
	~~example~~ request:		<syntaxhighlight lang="json">
	{"jsonrpc":"2.0","id":11,"method":"VideoLibrary.GetEpisodes","params":{"properties":["art"],"limits":{"end":1},"sort":{"method":"random"}}}		{"jsonrpc":"2.0","id":11,"method":"VideoLibrary.GetEpisodes","params":{"properties":["art"],"limits":{"end":1},"sort":{"method":"random"}}}
			</syntaxhighlight>

	and a possible response:		and a possible response:
	{		<syntaxhighlight lang="json">
			{
	"id": 11,		"id": 11,
	"jsonrpc": "2.0",		"jsonrpc": "2.0",
Line 90:		Line 101:
	}		}
	}		}
	}		}
			</syntaxhighlight>


	== Kodi-encoded URL ==		== Kodi-encoded URL ==

	The image paths returned by JSON-RPC are the path or URL to the image encoded as Kodi's internal "image://" path.		The image paths returned by JSON-RPC are the path or URL to the image encoded as Kodi's internal "image://" path.

Line 103:		Line 115:

	You can also turn the "image://" URL into a more traditional looking path/URL (https:// or smb:// or H:\) by chopping off the "image://" up front and the slash at the end, then decoding the rest as a URI component.		You can also turn the "image://" URL into a more traditional looking path/URL (https:// or smb:// or H:\) by chopping off the "image://" up front and the slash at the end, then decoding the rest as a URI component.



	= Access "parent" artwork =		= Access "parent" artwork =

	For several media types, it is possible to access artwork for the "parent" media item as well as the item's own artwork. This works for skins and JSON-RPC. For instance, TV episodes can access the artwork for the containing season and TV show. Use "<parenttype>.<arttype>" as the art type.		For several media types, it is possible to access artwork for the "parent" media item as well as the item's own artwork. This works for skins and JSON-RPC. For instance, TV episodes can access the artwork for the containing season and TV show. Use "<parenttype>.<arttype>" as the art type.

Line 140:		Line 153:
	\| "ListItem.Art(artist.fanart)", "ListItem.Art(artist.clearlogo)"		\| "ListItem.Art(artist.fanart)", "ListItem.Art(artist.clearlogo)"
	\|}		\|}


	== Example artwork types ==		== Example artwork types ==
Line 183:		Line 197:
	\| Thumb of the currently focused media item. This has some notable fallback behavior in the video library. It will be the artwork type named exactly "thumb" if it exists for the current item, but will fall back to "poster" then "banner" if not.		\| Thumb of the currently focused media item. This has some notable fallback behavior in the video library. It will be the artwork type named exactly "thumb" if it exists for the current item, but will fall back to "poster" then "banner" if not.
	\|}		\|}



	= {{Kodi}} version updates =		= {{Kodi}} version updates =
Line 188:		Line 204:
	* The '''music library''' in {{Kodi}} 17 and before was '''limited to just "fanart" and "thumb" for artist images''' and '''"thumb" for album images''', it did not have the flexibility to add a wide variety of artwork. The video library has had this level of support for some time now.		* The '''music library''' in {{Kodi}} 17 and before was '''limited to just "fanart" and "thumb" for artist images''' and '''"thumb" for album images''', it did not have the flexibility to add a wide variety of artwork. The video library has had this level of support for some time now.
	* {{Kodi}} 18 adds a '''[[Advancedsettings.xml#Music library extra artwork\| whitelist in advancedsettings.xml]]''' ([[Advancedsettings.xml#Extra artwork\|for the video library]]) so that {{Kodi}} will add any specified artwork from scrapers and the file system automatically.		* {{Kodi}} 18 adds a '''[[Advancedsettings.xml#Music library extra artwork\| whitelist in advancedsettings.xml]]''' ([[Advancedsettings.xml#Extra artwork\|for the video library]]) so that {{Kodi}} will add any specified artwork from scrapers and the file system automatically.


	{{Top}}		{{Top}}

Bossanova808: /* Kodi-encoded URL */

2023-02-03T03:25:26Z

Kodi-encoded URL

← Older revision		Revision as of 03:25, 3 February 2023
Line 96:		Line 96:
	The image paths returned by JSON-RPC are the path or URL to the image encoded as Kodi's internal "image://" path.		The image paths returned by JSON-RPC are the path or URL to the image encoded as Kodi's internal "image://" path.

	To turn that path into a URL that can actually be displayed in another application, you will need to encode it as a URI component (examples are [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent encodeURIComponent] in JS and [https://docs.python.org/3/library/urllib.parse.html#urllib.parse.quote urllib.parse.quote] in Python 3), then add that to the end of the "~~images~~/" path of the Kodi HTTP server (like <nowiki>http://kodihost:8080/~~images~~/</nowiki>). With these URLs you can display images wherever they happen to be stored; Kodi will handle opening a file over SMB or NFS if they are stored on a NAS next to the media items, for instance.		To turn that path into a URL that can actually be displayed in another application, you will need to encode it as a URI component (examples are [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent encodeURIComponent] in JS and [https://docs.python.org/3/library/urllib.parse.html#urllib.parse.quote urllib.parse.quote] in Python 3), then add that to the end of the "image/" path of the Kodi HTTP server (like <nowiki>http://kodihost:8080/image/</nowiki>). With these URLs you can display images wherever they happen to be stored; Kodi will handle opening a file over SMB or NFS if they are stored on a NAS next to the media items, for instance.

	The final URL will look like		The final URL will look like

	<nowiki>http://kodihost:8080/~~images~~/image%3A%2F%2Fnfs%253a%252f%252fCUBER%252fmedia%252fpreserved%252fTVShows%252fV%2520(2009)%252fposter.jpg%2F</nowiki>		<nowiki>http://kodihost:8080/image/image%3A%2F%2Fnfs%253a%252f%252fCUBER%252fmedia%252fpreserved%252fTVShows%252fV%2520(2009)%252fposter.jpg%2F</nowiki>

	You can also turn the "image://" URL into a more traditional looking path/URL (https:// or smb:// or H:\) by chopping off the "image://" up front and the slash at the end, then decoding the rest as a URI component.		You can also turn the "image://" URL into a more traditional looking path/URL (https:// or smb:// or H:\) by chopping off the "image://" up front and the slash at the end, then decoding the rest as a URI component.

Karellen: Add NavBox

2019-08-28T19:36:25Z

Add NavBox

← Older revision		Revision as of 19:36, 28 August 2019
Line 1:		Line 1:
			{{Artwork_Contents}}
	{{mininav\|[[Development]]\|[[Artwork]]}}		{{mininav\|[[Development]]\|[[Artwork]]}}

Rmrector: /* {{Kodi}} version updates */

2019-02-02T17:33:22Z

{{Kodi}} version updates

← Older revision		Revision as of 17:33, 2 February 2019
Line 185:		Line 185:
	= {{Kodi}} version updates =		= {{Kodi}} version updates =

	* The music library in {{Kodi}} 17 and before was '''limited to just "fanart" and "thumb" for artist images''' and '''"thumb" for album images''', it did not have the flexibility to add a wide variety of artwork. The video library has had this level of support for some time now.		* The '''music library''' in {{Kodi}} 17 and before was '''limited to just "fanart" and "thumb" for artist images''' and '''"thumb" for album images''', it did not have the flexibility to add a wide variety of artwork. The video library has had this level of support for some time now.
	* {{Kodi}} 18 adds a '''[[Advancedsettings.xml#Music library extra artwork\| whitelist in advancedsettings.xml]]''' ([[Advancedsettings.xml#Extra artwork\|for the video library]]) so that {{Kodi}} will add any specified artwork from scrapers and the file system automatically.		* {{Kodi}} 18 adds a '''[[Advancedsettings.xml#Music library extra artwork\| whitelist in advancedsettings.xml]]''' ([[Advancedsettings.xml#Extra artwork\|for the video library]]) so that {{Kodi}} will add any specified artwork from scrapers and the file system automatically.

Rmrector: /* Example artwork types */

2019-02-02T17:11:12Z

Example artwork types

← Older revision		Revision as of 17:11, 2 February 2019
Line 179:		Line 179:
	\|- valign="top"		\|- valign="top"
	\| album.thumb		\| album.thumb
	\| ~~List~~.Art(thumb)		\| ListItem.Art(thumb)
	\| Thumb of the currently focused media item. This has some notable fallback behavior in the video library. It will be the artwork type named exactly "thumb" if it exists for the current item, but will fall back to "poster" then "banner" if not.		\| Thumb of the currently focused media item. This has some notable fallback behavior in the video library. It will be the artwork type named exactly "thumb" if it exists for the current item, but will fall back to "poster" then "banner" if not.
	\|}		\|}

Rmrector: /* Example artwork types */

2019-02-02T17:10:36Z

Example artwork types

← Older revision		Revision as of 17:10, 2 February 2019
Line 177:		Line 177:
	\| Player.Art(album.thumb)		\| Player.Art(album.thumb)
	\| For currently playing music, this is the cover of the album		\| For currently playing music, this is the cover of the album
			\|- valign="top"
			\| album.thumb
			\| List.Art(thumb)
			\| Thumb of the currently focused media item. This has some notable fallback behavior in the video library. It will be the artwork type named exactly "thumb" if it exists for the current item, but will fall back to "poster" then "banner" if not.
	\|}		\|}