Embedding an image in your dashoard

Tips and Hacks
#1

It wasn’t obvious to me at first how to add an image to a dashboard. Turns out to be very simple, but thought I’d note it here in case anyone else is unsure.

You achieve it by using the Add Text widget; because it accepts Markdown, you can embed videos and images to it.

Your image needs to be ‘hosted’ somewhere (eg GitHub repo), but then in your Text widget, just add the URL

![Description of your Image](https://github.com/your_repo/image.png?raw=true "Title")

@HolisticsTeam, would be good to add some formatting options to the Text Widget box to make it clearer what can & can’t be added, or just to make it a bit easier for those unfamiliar with Markdown :slight_smile:

7 Likes
Making Holistics tables display properly with images
Holistics December 2021 Product Updates
Tips for making your dashboards more attractive
#2

Thank David, that’s a very helpful tip!

#3

Thanks for the tip!

Since markdown accepts HTML, I guess you can use HTML to create some inline CSS to style the text too.

1 Like
#4

I hadn’t even thought of that - wow, that’s going to keep me busy playing around with it!

1 Like
#5

Cool! Thanks for sharing.

If you want to resize the image you could do something like:

<img src="insert-link" width="50%" height="50%">

3 Likes
#6

Yes, I ended up doing something similar.
Because I wanted 2 logos side by side, I then used hspace to add some padding

<center>
<img src="https://github.com/my-repo/logo-1.png" alt="drawing" width="40" hspace="20"/>
<img src="https://github.com/my-repo/logo-2.png" alt="drawing" width="150" hspace="20"/>
</center>
3 Likes
#7

You can embed images/gifs in your charts and tables using HTML column format as well :yum:

Holistics Pokemon

image
image1487×514 116 KB

The underlying data

image
image1771×150 13.6 KB

2 Likes
#8

Is that just by encoding the HTML within the query results?

#9

Yes David, the HTML content is stored in the database and retrieved in the query results.

2 Likes
#10

That’s handy - I think I’ve got a product image API I can call via a URL endpoint, so I should be able to dynamically create the URL in the query results.

I’ll have a play around!

#11

Here we go - dynamically building the URL to pull product images from our client’s product catalogue, and creating it as its own dimension in the dataset.

I actually added it twice, once for ‘full size’ and once for ‘thumbnail’, allowing the user to pick between them

image

3 Likes
#12

Wow, looks nice!
:raised_hands::raised_hands::raised_hands:

#13

Is there a way to set the default format to HTML though?

I’ve tried setting format: 'html' in the dimension, but still defaults to String. Not the end of the world, but be useful if it could default to html so save the user having to set it each time.

1 Like
#14

How to add images in columns. Can anyone guide through this

#15

Hi david, could you please guide the steps for this. I have product image in my website. How can ifetch those against the category that i chose in a table

#16

In my Item model, I create a new dimension. The definition of that dimension uses a SQL concat function to build the URL for the target item.

  dimension product_thumbnail {
    label: "Product Image (Thumbnail)"
    type: "text"
    format: 'html'
    definition: @sql CONCAT('<IMG SRC=https://our_imgsrc.blob.core.windows.net/content/images/', {{ org_id }} ,'/thumbnail/', {{ item_code }} , '.jpg height=75>');;
  }

You then just add this dimension to your report, select ‘HTML’ as the data type

image

(slightly annoyingly, although I’ve defined HTML as the default type, I still have to select HTML went I want to use it)

7 Likes
#17

Thanks for the reply David. Is there any way to customize the font size in widgets and reports?