Center Align Linked Image in Dashboard Text Tile

I’m creating a few text tiles on a dashboard that have linked images to other dashboards, but I can’t seem to figure out how to align the image in the center of the tile. it always just comes up left-aligned and looks incredibly funky with the title and subtitle of the tile center-aligned. any ideas Looker community?

A possible idea is to use class= “btn-block” in the image html. This centres the image and resizes it to the size of the text tile, meaning you do not have to set the image height and width. Heres the html code for an example text tile with a linked image:

<div class="alert vis">
<br> <font color="#282828" size="8">
<font color="#5A2FC2" size="5"><center><strong>Title</strong></center></font>
<p class="lead text-center">Subtitle</p>
<a href="https://looker.com">
<img src="https://looker.com/assets/img/images/logos/looker_black.svg" class="btn-block"/>
</a>
</div>

52

Hope this helps :smile:

TOTALLY WORKED, and you are amazing, thank you! I have no idea what any of this code is, but replaced the info/url’s with mine and Bringo!

Where can I learn more about these functions? Is there any looker docs?

Awesome, glad that worked for you! The code is html - looker only accepts certain tags so it takes a bit of trial and error to work out. I haven’t seen any docs on how you can use html in text tiles, but if you learn some basic html you should be able to experiment with what is possible.

Sounds good, thanks again for the help!

Hey George, one more quick question. if I wanted to make the link open in a new tab, how would I do that with the code you provided above? I tried adding target="_blank" but it didn’t seem to work. Maybe I’m positioning it incorrectly?

You’ve got the right idea! Here’s my original example with target="_blank" in the correct position:

<div class="alert vis">
<br> <font color="#282828" size="8">
<font color="#5A2FC2" size="5"><center><strong>Title</strong></center></font>
<p class="lead text-center">Subtitle</p>
<a href="https://looker.com" target="_blank">
<img src="https://looker.com/assets/img/images/logos/looker_black.svg" class="btn-block"/>
</a>
</div>

:slight_smile:

1 Like

worked perfectly, thank you so much!

but replaced the info/url’s with mine and Bringo!

You know it! hahaha, glad someone got that reference!

This is the list of approved HTML tags that you can use in Looker: https://docs.looker.com/admin-options/security/html-sanitization.

You can get pretty frisky with it:

**Another colored card**
<hr>
<div class="alert alert-warning" >
  <div class="card-header">
    ⚠️ Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="www.google.com" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
1 Like

Great, thanks for the info Izzy!