Custom tile user settings image?

1

I’m trying to have an image URL be specified in custom tile user settings. But the image isn’t showing up. Any idea why? Should this be possible to do?

var contentEl = document.getElementById("content");
contentEl.innerHTML = '<img src="' + ${userSettings.accessoryURL} + '" width="70%" height="70%">'
2

Yes, it should be possible. Without seeing the rest of the code, it’s a bit hard to guess at what could be wrong, but there’s a few things:

  • The assignment of the contentEl.innerHTML syntax doesn’t appear to be valid. It looks like it’s mixing concepts of string concatenation with template literals. The ${yourVariable} would need to be used with backticks (eg. template literal)
contentEl.innerHTML = `<img src="${userSettings.accessoryURL}" width="70%" height="70%">`
  • If the <img> tag is already rendered on the page, you could just update the src attribute directly rather than trying to update the HTML
  • You’ll want to make sure that the userSettings is initialized before you try to access it. For example, a common approach is to use the stio.ready() callback to run initialization actions
var userSettings = {}
var imgEl = document.getElementById("user-image");
stio.ready(function(data){
   userSettings = data.settings;
   init()
});

function init(){ 
   imgEl.src = userSettings.accessoryURL;
}

I would also suggest opening your browser console while testing the tile to see if there are any errors or warnings reported as sometimes that can help point you to the issue. Depending on your browser, you might have to drill into the embedded iframe to see the console logging for the embedded tile.

1 Like
3

Your code snippet worked. Got it. Thanks!!

1 Like