Hi,
I’m planning on using the picture entity card to show a picture of me and my wife in color or grayscale depending on location. So far so good, it’s working. I’ve placed two cards in a horizontal stack.
However I want our pictures to be small, and not use like 20% of the screen. More like the size of the little state cards. I can’t find a way to accomplish this. Any ideas?
The closest you will get with the current implementation is by using a picture-elements card with image elements that are based on state.
In time, I can see state based images making there way into all card formats, but lovelace isn’t there yet.
Fixed!
Created a custom card, only have to add some margin between the pictures.
There’s only one thing bothering me, when refreshing this error is displayed shortly:
The component clearly does exist as you can see by the first screenshot.
config:
resources:
- url: /local/content-card-example.js
type: js
cards:
- type: "custom:content-card-example"
entities:
- sensor.maryse_thuis
- sensor.richard_thuis
class ContentCardExample extends HTMLElement {
set hass(hass) {
if (!this.content) {
const card = document.createElement('ha-card');
this.content = document.createElement('div');
this.content.style.padding = '16px 16px 16px';
card.appendChild(this.content);
this.appendChild(card);
}
const entities = this.config.entities;
var innerHTML = "";
entities.forEach( function(entityId) {
const state = hass.states[entityId];
const stateStr = state ? state.state : 'unavailable';
var entityName = entityId.substr(7);
if(stateStr >= 10){
innerHTML += '<img src="/local/'+entityName+'_kleur.gif" width="50"; height="50"; style="padding-right:15px">';
}else{
innerHTML += '<img src="/local/'+entityName+'_zwart.gif" width="50"; height="50";>';
}
});
this.content.innerHTML = innerHTML;
}
setConfig(config) {
if (!config.entities) {
throw new Error('You ? need to definee an entity');
}
this.config = config;
}
getCardSize() {
return 1;
}
}
customElements.define('content-card-example', ContentCardExample);
Anyone any clue?
That’s by design with custom cards. Currently, there is no way around it.
Ok thanks 
Is it also possible to return a state of a different entity?
For example:
enities included are: sensor.light_status
in the innerHTML: ‘The state of ‘+entityId+’ is ‘+stateStr+’!’ + return entities[‘sensor.kitchen_status’].state