i hoping it just me having some syntax or not knowing something about template sensors
Template sensors are using jinja.
CTC using JS.
Template sensors are used to define sensors by a user.
CTC is used to “present in UI” data dynamically.
I suggest you to create a separate topic in Configuration section for this problem.
1 Like
It seams that the resulting string is 292/255 characters allowed maybe I could just out the template directly on the picture card.
Could you help me convert this jinja string in to js?
{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[6].split('poster": "')[1].split('"},')[0]}}
would be verry appreciated
Then please elaborate:
– this I have;
– this I need to be displayed in …;
Thanks,
this is what i have in a card:
type: picture-elements
image: /local/pictures/hc-courtines.jpg
elements:
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_1
card:
type: picture
image: ${ states['sensor.kodi_recently_movies_1'].state }
style:
top: 44%
left: 30%
width: 13%
border: 2px solid gold
Since the sensor doesn’t work because the resulting string is to long, i thought maybe converting it and putting it directly in the card to display the image, if at all possible.
thanks for your time and knowledge.
Sorry, I am still not getting the point.
You have a jinja template “{{state_attr(…)}}”.
Is it a value of state of that “sensor.kodi_recently_movies_1” sensor?
If your “sensor.kodi_recently_movies_1” is defined properly - then it may be used inside CTC.
Is it defined properly? Did you check it’s sate in Dev tools?
Also, do you need to get rid of this “sensor.kodi_recently_movies_1” and move this jinja template into CTC (converted to JS)?
Saw your updated answer.
First, before converting the jinja to JS you must make this jinja code 100% working.
“Dev tools → Template” may be used to test.
When you achieve this - only then you should try convert it to JS (also, you cannot test JS code in Dev tools).
Just noticed about “resulting string is too long”.
255 symbols is a limit for states, but attributes may be long.
Consider adding an attribute with this logic.
Converting jinjia → JS is better to be done on the same setup (i.e. yours) since you have real data.
In general, there are 2 ways:
– define template sensor - then it may be used in MANY places, also calculation is done on a server side (and templates may be easily tested in Dev tools → Template!!!);
– define templates in CTC (or other cards supporting JS) - then it may be used in these cards only, calculation is done on a client side.
Both way has its pro & contra.
Try this:
type: vertical-stack
cards:
- type: markdown
content: >-
{% set VALUE = 'aad { daad { ssd { adad { sSsS { sddad { iiu poster": "/local/images/test/blue.jpg"},' %}
{{ VALUE.split('{')[6].split('poster": "')[1].split('"},')[0]}}
- type: picture-elements
image: /local/images/test/orange.jpg
elements:
- type: custom:config-template-card
entities:
- sensor.some_sensor
element:
type: image
image: >-
${
var VALUE = states['sensor.some_sensor'].attributes['some_attr'];
VALUE.split('{')[6].split('poster": "')[1].split('"},')[0];
}
style:
top: 50%
left: 50%
tried it but didnt work:
type: picture-elements
elements:
- type: image
image: >-
${
var VALUE = states['sensor.kodi_recently_added_movies'].attributes['data'];
VALUE.split('{')[6].split('poster": "')[1].split('"},')[0];
}
image: https://demo.home-assistant.io/stub_config/floorplan.png
Because you did not place CTC card.
Check my example again.
- type: picture-elements
image: /local/images/test/orange.jpg
elements:
- type: custom:config-template-card
entities:
- sensor.some_sensor
element:
type: image
image: >-
Also, each element in picture-elements should have “styles” (top, left) specified.
See, if someone posted a code + screenshot as a proof and it seems to be working - then probably you are doing smth wrong.
It work and it didnt 
type: picture-elements
image: /local/pictures/hc-courtines.jpg
elements:
- type: custom:config-template-card
entities:
- sensor.kodi_recently_added_movies
element:
type: image
image: >-
${
var VALUE = states['sensor.kodi_recently_added_movies'].attributes['data'];
VALUE.split('{')[2].split('poster": "')[1].split('"},')[0];
}
style:
top: 44%
left: 30%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_added_movies
element:
type: image
image: >-
${
var VALUE = states['sensor.kodi_recently_added_movies'].attributes['data'];
VALUE.split('{')[7].split('poster": "')[1].split('"},')[0];
}
style:
top: 82%
left: 12%
width: 13%
border: 2px solid gold
the first one does get the image but the second one (the longer than 255 characters) do not get the image.
Post here value for the “states[‘sensor.kodi_recently_added_movies’].attributes[‘data’]” from Dev tools → set state, I will check your JS templates.
Here:
[{"title_default": "$title", "line1_default": "$genres", "line2_default": "$release", "line3_default": "$rating - $runtime", "line4_default": "$studio", "icon": "mdi:eye-off"}, {"aired": "2022-11-18", "airdate": "2023-06-07T22:40:43Z", "flag": true, "genres": "Comedy,Family,Fantasy", "rating": "\u2605 6.9", "release": "$date", "runtime": 120, "title": "Disenchanted", "studio": "Walt Disney Pictures", "fanart": "https://image.tmdb.org/t/p/original/kpUre8wWSXn3D5RhrMttBZa6w1v.jpg", "poster": "https://image.tmdb.org/t/p/original/uyNLq2Dc3s4IOdcYTU8ZtM2lTjb.jpg"}, {"aired": "2022-12-28", "airdate": "2023-06-07T13:57:49Z", "flag": true, "genres": "Comedy,Drama", "rating": "\u2605 7.9", "release": "$date", "runtime": 126, "title": "A Man Called Otto", "studio": "Playtone", "fanart": "http://assets.fanart.tv/fanart/movies/937278/moviebackground/a-man-called-otto-640315326eaa6.jpg", "poster": "http://assets.fanart.tv/fanart/movies/937278/movieposter/a-man-called-otto-6411a7230fda6.jpg"}, {"aired": "2022-09-08", "airdate": "2023-06-07T12:14:15Z", "flag": true, "genres": "Romance,Comedy", "rating": "\u2605 6.6", "release": "$date", "runtime": 104, "title": "Ticket to Paradise", "studio": "Working Title Films", "fanart": "http://assets.fanart.tv/fanart/movies/800939/moviebackground/ticket-to-paradise-63a07696212ad.jpg", "poster": "http://assets.fanart.tv/fanart/movies/800939/movieposter/ticket-to-paradise-63424a0f71a97.jpg"}, {"aired": "2023-02-15", "airdate": "2023-05-12T17:57:18Z", "flag": true, "genres": "Action,Adventure,Science Fiction", "rating": "\u2605 6.5", "release": "$date", "runtime": 125, "title": "Ant-Man and the Wasp: Quantumania", "studio": "Marvel Studios", "fanart": "http://assets.fanart.tv/fanart/movies/640146/moviebackground/ant-man-and-the-wasp-quantumania-63cc43ff40c8f.jpg", "poster": "http://assets.fanart.tv/fanart/movies/640146/movieposter/ant-man-and-the-wasp-quantumania-644724ae3408d.jpg"}, {"aired": "2022-11-09", "airdate": "2023-02-05T21:42:26Z", "flag": true, "genres": "Action,Adventure,Science Fiction", "rating": "\u2605 7.3", "release": "$date", "runtime": 162, "title": "Black Panther: Wakanda Forever", "studio": "Marvel Studios", "fanart": "http://assets.fanart.tv/fanart/movies/505642/moviebackground/black-panther-wakanda-forever-6343456e2940d.jpg", "poster": "http://assets.fanart.tv/fanart/movies/505642/movieposter/black-panther-wakanda-forever-634102b2ba2d4.jpg"}, {"aired": "", "airdate": "2022-12-29T14:45:04Z", "flag": true, "genres": "Romance,Comedy,Family", "rating": "\u2605 5.5", "release": "$date", "runtime": 114, "title": "A Match Made at Christmas", "studio": "Abundant House Films", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FMatch%2520Made%2520at%2520Christmas%252C%2520A%2520%25282021%2529%2520%255BUnknown%255D%2520%255Bvoted%25205.5%255D%2520%255BFamily-Comedy%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FMatch%2520Made%2520at%2520Christmas%252C%2520A%2520%25282021%2529%2520%255BUnknown%255D%2520%255Bvoted%25205.5%255D%2520%255BFamily-Comedy%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-12-17T13:17:32Z", "flag": true, "genres": "Comedy,Romance", "rating": "\u2605 6.9", "release": "$date", "runtime": 101, "title": "A Perfect Pairing", "studio": "Hoodlum Entertainment", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FPerfect%2520Pairing%252C%2520A%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG%255D%2520%255Bvoted%25206.9%255D%2520%255BComedy-Romance%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FPerfect%2520Pairing%252C%2520A%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG%255D%2520%255Bvoted%25206.9%255D%2520%255BComedy-Romance%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-12-17T13:10:23Z", "flag": true, "genres": "Romance,Comedy", "rating": "\u2605 5.4", "release": "$date", "runtime": 90, "title": "I Believe in Santa", "studio": "ESX Entertainment", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FI%2520Believe%2520in%2520Santa%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG%255D%2520%255Bvoted%25205.4%255D%2520%255BComedy-Romance%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FI%2520Believe%2520in%2520Santa%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG%255D%2520%255Bvoted%25205.4%255D%2520%255BComedy-Romance%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-12-01T04:39:23Z", "flag": true, "genres": "Action,Adventure,Drama,Romance", "rating": "\u2605 6.8", "release": "$date", "runtime": 143, "title": "Robin Hood: Prince of Thieves", "studio": "Warner Bros. Pictures", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FRobin%2520Hood%252C%2520Prince%2520of%2520Thieves%2520%25281991%2529%2520%255BUnknown%255D%2520%255BPG-13%255D%2520%255Bvoted%25206.8%255D%2520%255BAction-Adventure%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FRobin%2520Hood%252C%2520Prince%2520of%2520Thieves%2520%25281991%2529%2520%255BUnknown%255D%2520%255BPG-13%255D%2520%255Bvoted%25206.8%255D%2520%255BAction-Adventure%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-11-23T14:51:00Z", "flag": true, "genres": "Fantasy,Comedy,Drama", "rating": "\u2605 6.8", "release": "$date", "runtime": 109, "title": "Afterlife of the Party", "studio": "MarVista Entertainment", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FAfterlife%2520of%2520the%2520Party%2520%25282021%2529%2520%255BUnknown%255D%2520%255Bvoted%25206.8%255D%2520%255BComedy-Fantasy%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FAfterlife%2520of%2520the%2520Party%2520%25282021%2529%2520%255BUnknown%255D%2520%255Bvoted%25206.8%255D%2520%255BComedy-Fantasy%255D%252Fposter.jpg"}, {"aired": "2022-11-22", "airdate": "2022-11-20T14:54:39Z", "flag": true, "genres": "Family,Fantasy", "rating": "\u2605 6.4", "release": "$date", "runtime": 90, "title": "Prancer: A Christmas Tale", "studio": "", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FPrancer%252C%2520A%2520Christmas%2520Tale%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG%255D%2520%255Bvoted%25205.3%255D%2520%255BFamily-Fantasy%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FPrancer%252C%2520A%2520Christmas%2520Tale%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG%255D%2520%255Bvoted%25205.3%255D%2520%255BFamily-Fantasy%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-11-09T07:01:59Z", "flag": true, "genres": "Comedy,Drama,Music,Romance", "rating": "\u2605 7.1", "release": "$date", "runtime": 101, "title": "Holiday Inn", "studio": "Paramount", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FHoliday%2520Inn%2520%25281942%2529%2520%255BUnknown%255D%2520%255BNR%255D%2520%255Bvoted%25207.1%255D%2520%255BComedy-Romance%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FHoliday%2520Inn%2520%25281942%2529%2520%255BUnknown%255D%2520%255BNR%255D%2520%255Bvoted%25207.1%255D%2520%255BComedy-Romance%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-11-09T05:27:40Z", "flag": true, "genres": "Adventure,Action,Fantasy", "rating": "\u2605 6.9", "release": "$date", "runtime": 116, "title": "Highlander", "studio": "Davis-Panzer Productions", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FHighlander%2520%25281986%2529%2520%255BUnknown%255D%2520%255BR%255D%2520%255Bvoted%25206.9%255D%2520%255BFantasy%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FHighlander%2520%25281986%2529%2520%255BUnknown%255D%2520%255BR%255D%2520%255Bvoted%25206.9%255D%2520%255BFantasy%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-11-09T03:51:30Z", "flag": true, "genres": "Drama,Romance", "rating": "\u2605 8.2", "release": "$date", "runtime": 102, "title": "Casablanca", "studio": "Warner Bros. Pictures", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FCasablanca%2520%25281942%2529%2520%255BUnknown%255D%2520%255BPG%255D%2520%255Bvoted%25208.2%255D%2520%255BRomance%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FCasablanca%2520%25281942%2529%2520%255BUnknown%255D%2520%255BPG%255D%2520%255Bvoted%25208.2%255D%2520%255BRomance%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-11-01T14:28:28Z", "flag": true, "genres": "Romance,Comedy,Drama", "rating": "\u2605 6.3", "release": "$date", "runtime": 105, "title": "The Storied Life of A.J. Fikry", "studio": "", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FStoried%2520Life%2520of%2520A.J.%2520Fikry%252C%2520The%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG-13%255D%2520%255Bvoted%25206.3%255D%2520%255BComedy-Romance%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FStoried%2520Life%2520of%2520A.J.%2520Fikry%252C%2520The%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG-13%255D%2520%255Bvoted%25206.3%255D%2520%255BComedy-Romance%255D%252Fposter.jpg"}, {"aired": "", "airdate": "2022-11-01T14:13:59Z", "flag": true, "genres": "Comedy,Mystery,Thriller", "rating": "\u2605 6.6", "release": "$date", "runtime": 98, "title": "See How They Run", "studio": "DJ Films", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FSee%2520How%2520They%2520Run%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG-13%255D%2520%255Bvoted%25206.6%255D%2520%255BComedy-Mystery%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FSee%2520How%2520They%2520Run%2520%25282022%2529%2520%255BUnknown%255D%2520%255BPG-13%255D%2520%255Bvoted%25206.6%255D%2520%255BComedy-Mystery%255D%252Fposter.jpg"}, {"aired": "2009-07-07", "airdate": "2022-10-22T05:33:19Z", "flag": true, "genres": "Adventure,Fantasy", "rating": "\u2605 7.7", "release": "$date", "runtime": 153, "title": "Harry Potter and the Half-Blood Prince", "studio": "Warner Bros. Pictures", "fanart": "http://assets.fanart.tv/fanart/movies/767/moviebackground/harry-potter-and-the-half-blood-prince-5648c5fe84f4e.jpg", "poster": "http://assets.fanart.tv/fanart/movies/767/movieposter/harry-potter-and-the-half-blood-prince-555e48bd050ae.jpg"}, {"aired": "2011-07-07", "airdate": "2022-10-21T20:03:19Z", "flag": true, "genres": "Fantasy,Adventure", "rating": "\u2605 8.1", "release": "$date", "runtime": 130, "title": "Harry Potter and the Deathly Hallows: Part 2", "studio": "Warner Bros. Pictures", "fanart": "http://assets.fanart.tv/fanart/movies/12445/moviebackground/harry-potter-and-the-deathly-hallows-part-2-5abb016b8316c.jpg", "poster": "http://assets.fanart.tv/fanart/movies/12445/movieposter/harry-potter-and-the-deathly-hallows-part-2-54f872ea2397b.jpg"}, {"aired": "2007-06-28", "airdate": "2022-10-21T10:31:02Z", "flag": true, "genres": "Adventure,Fantasy,Mystery", "rating": "\u2605 7.7", "release": "$date", "runtime": 138, "title": "Harry Potter and the Order of the Phoenix", "studio": "Warner Bros. Pictures", "fanart": "http://assets.fanart.tv/fanart/movies/675/moviebackground/harry-potter-and-the-order-of-the-phoenix-5abaf52b106e4.jpg", "poster": "http://assets.fanart.tv/fanart/movies/675/movieposter/harry-potter-and-the-order-of-the-phoenix-54f640895e3d2.jpg"}, {"aired": "2002-11-13", "airdate": "2022-10-21T00:06:19Z", "flag": true, "genres": "Adventure,Fantasy", "rating": "\u2605 7.7", "release": "$date", "runtime": 161, "title": "Harry Potter and the Chamber of Secrets", "studio": "Warner Bros. Pictures", "fanart": "http://assets.fanart.tv/fanart/movies/672/moviebackground/harry-potter-and-the-chamber-of-secrets-5224fd27f367a.jpg", "poster": "http://assets.fanart.tv/fanart/movies/672/movieposter/harry-potter-and-the-chamber-of-secrets-53c2346e95cd3.jpg"}, {"aired": "2010-10-06", "airdate": "2022-10-20T20:20:47Z", "flag": true, "genres": "Adventure,Fantasy", "rating": "\u2605 7.8", "release": "$date", "runtime": 146, "title": "Harry Potter and the Deathly Hallows: Part 1", "studio": "Warner Bros. Pictures", "fanart": "http://assets.fanart.tv/fanart/movies/12444/moviebackground/harry-potter-and-the-deathly-hallows-part-1-5abb018ce76eb.jpg", "poster": "http://assets.fanart.tv/fanart/movies/12444/movieposter/harry-potter-and-the-deathly-hallows-part-1-54f8732a98146.jpg"}, {"aired": "2004-05-31", "airdate": "2022-10-20T13:55:25Z", "flag": true, "genres": "Adventure,Fantasy", "rating": "\u2605 8.0", "release": "$date", "runtime": 141, "title": "Harry Potter and the Prisoner of Azkaban", "studio": "Warner Bros. Pictures", "fanart": "http://assets.fanart.tv/fanart/movies/673/moviebackground/harry-potter-and-the-prisoner-of-azkaban-5abaf5483bb7e.jpg", "poster": "http://assets.fanart.tv/fanart/movies/673/movieposter/harry-potter-and-the-prisoner-of-azkaban-54f744bb0b117.jpg"}, {"aired": "2022-07-03", "airdate": "2022-10-16T19:56:50Z", "flag": true, "genres": "Action,Comedy,Thriller", "rating": "\u2605 7.5", "release": "$date", "runtime": 126, "title": "Bullet Train", "studio": "87North Productions", "fanart": "http://assets.fanart.tv/fanart/movies/718930/moviebackground/bullet-train-6332108db2f01.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FBullet%2520Train%2520%25282022%2529%2520%255BUnknown%255D%2520%255BR%255D%2520%255Bvoted%25207.5%255D%2520%255BComedy-Action%255D%252Ffolder.jpg"}, {"aired": "2022-07-14", "airdate": "2022-10-16T15:41:14Z", "flag": true, "genres": "Animation,Action,Adventure,Comedy,Family,Western", "rating": "\u2605 6.8", "release": "$date", "runtime": 94, "title": "Paws of Fury: The Legend of Hank", "studio": "Flying Tigers Entertainment", "fanart": "http://assets.fanart.tv/fanart/movies/366672/moviebackground/paws-of-fury-the-legend-of-hank-6250f8fe03fff.jpg", "poster": "http://assets.fanart.tv/fanart/movies/366672/movieposter/paws-of-fury-the-legend-of-hank-6250f83f9ee1c.jpg"}, {"aired": "", "airdate": "2022-10-16T14:52:42Z", "flag": true, "genres": "Horror", "rating": "\u2605 4.2", "release": "$date", "runtime": 96, "title": "The Accursed", "studio": "Blood Red Films", "fanart": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FAccursed%252C%2520The%2520%25282022%2529%2520%255BUnknown%255D%2520%255BNR%255D%2520%255Bvoted%25204.2%255D%2520%255BHorror%255D%252Ffanart.jpg", "poster": "http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FAccursed%252C%2520The%2520%25282022%2529%2520%255BUnknown%255D%2520%255BNR%255D%2520%255Bvoted%25204.2%255D%2520%255BHorror%255D%252Fposter.jpg"}]
Have you checked your JS template in Dev tools → Template?
You CAN do it since both jinja & JS have “split()” function.
Just try to show this image w/o CTC:
http://kodi:[email protected]:8080/image/image%3A%2F%2Fsmb%253A%252F%252F192.168.178.254%252FArchive%252FCinema%252FMovies4k%252FMatch%2520Made%2520at%2520Christmas%252C%2520A%2520%25282021%2529%2520%255BUnknown%255D%2520%255Bvoted%25205.5%255D%2520%255BFamily-Comedy%255D%252Fposter.jpg
type: picture
image: PLACE IT HERE
I see what you mean, and I tried I, its the kodi:xbmc@ section of it that needs to be removed.
Thak you @Ildar_Gabdullin for all your help. here is the working code
Sensor:
##Movie 1
- platform: template
sensors:
kodi_recently_movies_1:
value_template: 'ok'
attribute_templates:
poster: >-
{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[2].split('poster": "')[1].split('"},')[0]}}
name: >-
{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[2].split('"title": "')[1].split('",')[0]}}
fanart: >-
{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[2].split('poster": "')[1].split('"},')[0]}}
And for the poster layout
type: picture-elements
image: /local/pictures/hc-courtines.jpg
elements:
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_1
card:
type: picture
image: ${states['sensor.kodi_recently_movies_1'].attributes.poster }
style:
top: 44%
left: 12%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_2
card:
type: picture
image: ${ states['sensor.kodi_recently_movies_2'].attributes.poster }
style:
top: 44%
left: 30%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_3
card:
type: picture
image: ${states['sensor.kodi_recently_movies_3'].attributes.poster }
style:
top: 44%
left: 48%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_4
card:
type: picture
image: ${states['sensor.kodi_recently_movies_4'].attributes.poster }
style:
top: 44%
left: 66%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_5
card:
type: picture
image: ${states['sensor.kodi_recently_movies_5'].attributes.poster }
style:
top: 44%
left: 85%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_6
card:
type: picture
image: ${states['sensor.kodi_recently_movies_6'].attributes.poster }
style:
top: 82%
left: 12%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_7
card:
type: picture
image: ${states['sensor.kodi_recently_movies_7'].attributes.poster }
style:
top: 82%
left: 30%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_8
card:
type: picture
image: ${states['sensor.kodi_recently_movies_8'].attributes.poster }
style:
top: 82%
left: 48%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_9
card:
type: picture
image: ${states['sensor.kodi_recently_movies_9'].attributes.poster }
style:
top: 82%
left: 66%
width: 13%
border: 2px solid gold
- type: custom:config-template-card
entities:
- sensor.kodi_recently_movies_10
card:
type: picture
image: ${states['sensor.kodi_recently_movies_10'].attributes.poster }
style:
top: 82%
left: 85%
width: 13%
border: 2px solid gold
later when i get the click to play ill post that too 
Thank you for sharing the final solution, then people who are interested in a similar functionality may use it and probably make it better.
1 Like
I’d be interested in a screenshot of the result, would you mind posting one?
Nice, thanks! I went a different route, using upcoming-media-card and modifying it heavily. Your approach is much more flexible with positioning.
Before we get completely off-topic, may I ask what the name and fanart attributes are used for? Don’t see them in your poster layout.
well i am still researching how to make the on click action to play the movie. just busy with something else. but if you look in to it let me know
If you’re using Plex, there’s a specific card that does this https://community.home-assistant.io/t/custom-component-card-plex-meets-home-assistant/304349
I had it for a while but them realized that I don’t really use the click-to-play functionality, so I removed it again.