How to show an external image in the dashboard

1

Good evening,

Discovering and enjoying metabase, I would like to insert images in my dashboard, to illustrate the species I am describing (photo, repartition maps).

Images url are stored into the database.
As it is possible to display a link in a table, is it possible to show the image behind the url ?

Thanks a lot for the tool you create !

2

I haven’t tried it myself, but just came across the Image URL type for fields documented here:

It sounds like it could be what you are looking for

3

Thank you @jornh,

I set my field’s metedata to “image url” but I think I have to investigate deeper because it as no consequence on viewing results.

4

Yikes! Here’s hoping resolution of this issue can shed some light on that option

Update found an existing issue explaining current status

And another old one where someone implemented something: https://github.com/metabase/metabase/issues/3103

5

Thanks a lot again @jornh,

hope this feature will come soon ! I would like to use it to display species distribution maps and species photos to illustrate reports.

Every day I discover metabase’s powerfulness and I think it is one of the “magic tools” born from a genius idea.

6

It’s been a while, since you asked, but I noticed nobody in answers mentioned Mark Down. You can use it to put an image, just like this: ![text to image](img_url).

More in here: https://www.markdowntutorial.com

It works in here too: smile

1 Like
7

Can you elaborate your usage for displaying image and images, i mean a list of url images can be shown?

8

I don’t know if I well understood what you want. If your list is static or comes from a database… I didn’t test to display images from a database field, but I think it is possible.

Did you try that?

If you have a static list of URL images, it sure can be done, as below:

![apple](http://www.tompetty.com/sites/g/files/g2000007521/f/Sample-image10-highres.jpg)
![birds](https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg)
![town view](https://c1.staticflickr.com/3/2912/13981352255_fc59cfdba2_b.jpg)

apple
Sample-image10-highres.jpg2736Ă—2736

birds
sample4_l.jpg717Ă—476

town view
13981352255_fc59cfdba2_b.jpg1024Ă—683

9

image
image2267Ă—1118 380 KB

I've tried with a Question and it didn't worked, as shown (the picture compares the effect of Mark Down in a Question retrieving a field content with a text box element).

10

yes I meant convert image url from database to sequence of image show/box result

11

Hello,
I would like to use images in text cards to improve the level of information in the dashboards. Using the markdown editor, I wrote a text and a link to the image. The size of the image is the problem, I would like to reduce the size to 24x24 as an icon. I read that markdown on METABASE did not take into account the html code. Is there another way to fix the size of my image?
I thank you in advance for your answers.
cordially

dashboardimage
dashboardimage1920Ă—1080 196 KB

12

Hi @SBoisson,

I Can Think of two:

  • Save (a copy of) the image with the size reduced somewhere on the public/private web.
  • If it’s something like the arrow you show in the example you can use emojis as part of the text like :arrow_right: (just copy/paste from here or a emoji site) … if you want it bigger make it a title with one or more #s
2 Likes
13

Thank you Jornh for your help. I saved the image with the right size on our own server. But it always appear bigger than the size of image. I wrote with my markdown editor this code:
Moyenne générale du nombre d'inscrits par bureau de vote sur la commune depuis 2008 toute élection confondue.

As you can see, it's work on this website but not on METABASE dashboard...

dashboard
dashboard1920Ă—1080 200 KB

14

Ah sorry! Guess you’re right, but forgot since I played with it last time.

I think the markdown rendererer actually sizes pictures to available space. That’s good if you want to add a cat picture (or other photos) - but not for your use :frowning:. The problem of course is one default way can’t handle two cases. Add on top of that that Markdown syntax has no standard way to specify sizing. Still hope in your case the emoji way is usable?

1 Like
15

Hello Jornh, it still doesn’t work to reduce the size of the image. The emoji doesn’t work neither. I was wondering what would be the next the improves for the textcard function for the new version of METABASE ?

16

Sorry to hear that. I have sort of been dreaming a bit in this area myself …

WHAT IF if you could:

As you can see it’s not a text editor but more a form designer based on some components/rules. I realize you were specifically asking about adding images, so for those there are already some defined rules for styling, placement and sizing.

It can allow you to combine what you can do with a Text Card (an Active Card TextBlock can have Markdown formatting) with what you can do with a Number Card. The last part should be done by adding a reference in the card where you want to place the number or/value like for example:

Today's score is {{question_id.score}} and the weather forecast for tomorrow looks like it will be {{question_id.weather_image_url}}

2 Likes
17

Hi Jornh,
Thanks a lot for your answer. I would to know what do you mean by adding “an htpps://adaptativecards.io_” ?
Do you mean doing a fork of metabase in order to include cards system ?
Best regards
Stéphane