Add images with a web URL: New in Tableau 2021.2

0:00In Tableau 2021.2 you can now use web-based

0:03images in your image objects on a dashboard

0:06.

0:06That's a bit of a tongue twister but

0:07essentially you can grab a URL of an image

0:10and use it in place

0:11of actually having an image on your

0:13dashboard. This is big because essentially

0:15how many times

0:16have we all added a logo to our dashboard

0:19and then when the logo changes we have to

0:21go out and change

0:22I don't know how many dashboards. With this

0:24feature you can put a logo in one place on

0:26the web

0:27and always be linking to it and when the

0:29logo changes you can just simply change the

0:31image in

0:31one place and every single dashboard that

0:34uses that logo will change automatically

0:36because it's

0:36loading from the web. Let's get stuck into

0:38this feature. To show you this I'm actually

0:40going to

0:40just use the superstore dashboard here the

0:43sample workbook that's already built for us

0:45in Tableau.

0:46This is actually a nice feature because for

0:48so long I feel like we've been sort of held

0:50to our

0:50held by chains with images it's been so

0:52hard to get things to work and we've had to

0:55do things like

0:55use extensions to get them to do nice

0:57things. It's not the first time we've been

0:59able to do this you

1:00have been able to bring in a web object to

1:02put an image in there but in this one this

1:05is just a much

1:06much nicer interface. So what I'm going to

1:07do I'm going to go to the customers

1:09dashboard here because

1:10I know that this is nicely set up I'll

1:11change the proportions here just to give me

1:13a little bit more

1:14space here on the right hand side and I'll

1:16just move this over to the right left hand

1:18side even

1:19a bit more just so that it's not hovering

1:21over my face. So now here we are we're

1:22pretty much good to

1:24go now in case you're wondering the image

1:26object is over here on the left hand side

1:28so we can of

1:28course grab the image object and we're just

1:31going to put it here underneath the profit

1:32ratio this is

1:33a nice easy place to do that. Now when we

1:35do that you get the new image interface and

1:38so we've got

1:38the old setup you can choose an image from

1:40your computer fill an image center an image

1:43you can

1:43also give it a url to go to when the image

1:45is clicked and you can give it some alt

1:47text. Alt text

1:48is specifically for the web this is

1:50basically good for accessibility when

1:52someone who's blind who

1:54can't see the image what the browser will

1:56do is it will read this alt text to tell

1:58the person what

1:58the image is so I'll show you how to set

2:00that up in a second. I'm actually going to

2:03go to this new

2:04option here and this is the new option

2:05linked image now what I'm going to do is I

2:07've actually

2:08got a logo from my tablet and website and

2:11it's actually held in a CDN this is

2:13basically a content

2:15distribution network so let me just grab

2:17the url it's very long and ugly but what I

2:19'll do is I'll

2:20paste it in here okay so you can see it's a

2:22very long url and it's essentially just my

2:24logo but it

2:24lives in this sort of weird place in webfl

2:26are and this is where the logo is loaded for

2:28my website so

2:29I'm going to use the exact same logo that's

2:31on my website here I'm going to set it to

2:33fit the image

2:34and center the image as much as it possibly

2:36can and you can also give it a url to go to

2:38when the

2:39image is clicked so I'll just say tablotim.

2:43com and I'll basically say this image is the

2:46tableau

2:47tim logo click to go to the website so the

2:51reason you type that is because you're

2:54trying to make it

2:55as accessibility friendly as you can so

2:57when someone hovers over the image but they

2:59're blind

3:00it sort of tells them what that image is

3:02about so let's hit apply and you'll

3:04instantly see the image

3:05loads from the website this is a really

3:07good call now what is really interesting

3:09about this is that

3:11essentially this image gets loaded from a

3:13specific place and if you're really sort of

3:15down with

3:16marketing you'll know that this is

3:18essentially how tracking pixels work okay

3:21so I'm sure there's

3:22probably a way to use this to actually

3:24track which dashboards are being opened and

3:27where without ever

3:28having to put google analytics inside of a

3:30dashboard essentially you add a one pixel

3:32by one

3:32pixel image and all the web server does is

3:34it logs where that request comes from and

3:36which dashboard

3:37it's on maybe that's possible who knows

3:39maybe it's not it's just an idea but anyway

3:41click okay and

3:43now you have this here and of course when I

3:45click on that it actually opens up a

3:46browser you can't

3:47see that it's opened up on my other screen

3:49but it has actually worked now the other

3:51thing you can

3:52do with this as well is you can of course

3:54change this image so I'm just going to go

3:56in here and

3:56edit this image and I'm just going to

3:58delete that and we're going to put another

4:00image in here all

4:01together and this time around I'm actually

4:04going to grab an image from a website

4:06called Giphy and

4:07this is essentially an image of Drake doing

4:10the dance from Hotline Bling so that's

4:13actually not

4:14the link so let's close that and right

4:16click on copy the image address here and

4:20just on Giphy so

4:21let's just put that in here and now when we

4:24paste that you'll see that this is actually

4:27a gif okay

4:28and if I hit apply you'll see that it

4:31actually loads the first image of the gif

4:34and you'll see

4:34that it's not playing at all but the thing

4:36is these dashboards are typically viewed in

4:38the

4:38browser and that's what I'm sort of banking

4:40on I'm banking on the user view in this in

4:42the browser

4:42rather than in desktop so although it's not

4:45working here if I just go ahead and then

4:47publish

4:47this workbook over to the server it should

4:50essentially work in the browser perfectly

4:53fine

4:53because the image is being loaded in a

4:55context where it's just going to work

4:57perfectly fine so

4:58let's go put it in our 2021.2 folder super

5:02store sample images and we'll just go ahead

5:05I can't

5:05type we'll just go ahead and publish this

5:08and hit publish and now once that is done

5:10we'll head over

5:11to the dashboard and see if Drake is

5:13dancing on our dashboards fingers crossed

5:15he is and we'll

5:16find out what's going on so here we go

5:18executing the query it's sort of

5:20interesting because for a

5:21while you know tablets always sometimes

5:23complain when you've loaded web resources

5:26in but again

5:26because they're pushing to the browser I

5:28think there's probably some changes going

5:29on in the

5:30back end that's making this kind of stuff

5:32easy to do and sort of more accessible now

5:35the other thing

5:36you know I'm going to briefly mention this

5:38is you know people can do all sorts of

5:40things on the

5:40internet and images are just one additional

5:43way that people can sort of try and try and

5:46do things

5:46so it's going to be interesting to see if

5:49there's any sort of security implications

5:51when you have

5:52images on your dashboards if you have to

5:54have it within a certain domain if the

5:55image gets

5:56blocked if you're in a corporate network

5:58because it's being loaded from somewhere

6:00else all of these

6:00thoughts are some things you have to sort

6:02of think about so definitely test this

6:03before you roll it

6:04out now you can see the dashboard has

6:06opened up in a new window that was on

6:08another screen and the

6:09dashboard we want to go to is the customers

6:11dashboard so you can see this one over here

6:14so now that that's finished let's click on

6:16that and go to that and if I just make this

6:18larger

6:18in fact if I just make it take up the whole

6:20screen I should see Drake dancing on the

6:22dashboard at any

6:23moment now so let's wait for this to load

6:25and something's happened here I don't think

6:28this is

6:28the right this is this is sort of loaded a

6:30a tablet design I think this is not

6:32supposed to happen so

6:33let's refresh this I think when it opened

6:35the first time it was sort of constrained

6:38and it loaded with

6:38a tablet design so let's just refresh this

6:41so it has the full extent of the screen and

6:44yes indeed

6:45Drake is over there dancing on the

6:47dashboard to the right hand side so that's

6:49pretty much it that's

6:50the feature in a nutshell it's really

6:52really cool you could actually use this for

6:54a lot of

6:55stylistic design capabilities you could

6:57have an image that's animating a logo on

7:00your dashboard

7:01it just brings another breath of fresh air

7:03to dashboards that I think is going to be

7:04really

7:05useful so that's pretty much the feature in

7:07a nutshell I'll put my face back over Drake

7:08because

7:09this is my channel so here we go and I'll

7:11catch you in the next video take it easy