Help with CSS to center album art on dashboard tile

🎬 Get Started Novice Help
1

Minor issue I'm trying to fix. I have a dashboard that shows the album art of the music playing on an echo dot. As you can see in the screenshot, the album art is aligned to the top and left margins of the tile. I'd like it to be centered. What CSS code do I need to accomplish this? I've tried a few ways but it doesn't seem to work.

image
image.jpg2614×1497 498 KB

The HTML code I get when inspecting in Chrome is:
<div class="tile-primary" style="font-size: 21px;"><img src="https://m.media-amazon.com/images/I/81JnKd7j10L._UL600_.jpg"></div>

1 Like
2

Sorry I’m not actually able to help with your question, but can you describe how you setup that dashboard tile to show what’s playing on your echo dot?

3

What I did with mine was add width and height to the code, so it returned the size of image I wanted on the dash.

Like this.

		if(isStateChange(device, "trackImageHtml", """<img src="${trackImg?.toString()} **width="200 height="200"**"/>""")) {
		sendEvent(name: "trackImageHtml", value: """<img src="${trackImg?.toString()} **width="200 height="200"**"/>""", display: false, displayed: false)
	}

Made it easier to center in a tile. (without the **)

2 Likes
4

I actually stumbled into it trying to find stuff to fill up my dashboard with. First off, install @tonesto7's Echo Speaks + Actions. Once that's set up and your echo device(s) are connected, you can create the controls tile (back, forward, play/pause, and volume) by selecting your echo device then picking the Music Player template. To create the album art tile, select your echo device then pick the Attribute template, then in the dropdown all the way to the right, select "trackImageHtml".

1 Like
5

Thanks for the response. Seems like this would work but unfortunately I have the dashboard set to autofit, so I'm not sure what the size of the tiles actually is. I have this dashboard running on a Fire 8 tablet so I'm not quite sure how to get the actual tile size as it's displayed on the tablet. I may just have to use your code and play around with the height and width in the code you provided until it looks right.

6

I think the fact is you assign a size, and the dash may auto fit better, if you see what I mean?

1 Like