Dynamic image resizing in Tableau using Cloudinary

0:00Images are a right pain to work with inside

0:02a Tableau.

0:02Let's just be honest.

0:03Yes, you can drop them into a dashboard.

0:05Yes, you can use them as backgrounds.

0:07Yes, you can use them as shapes, but that's

0:09just also wrong.

0:10What I want to show you today is a tool

0:12that actually handles

0:13images correctly and can work very nicely

0:16with Tableau.

0:17I'm going to blow your mind with a tool

0:18called Cloudinary.

0:19Let's get stuck in.

0:20Now, just to set this up, I'm actually

0:22going to be using a mock data set in Excel.

0:24I think Excel is actually a fair example

0:26here, because not everyone has databases.

0:28Not everyone uses Tableau that way.

0:30And I'm going to show you a method that

0:31would work well in partnership with a

0:33database where the information is held.

0:35So here I have a file with 10 names and

0:38first names.

0:39And on another tab here, I have some URLs.

0:42Now these URLs are essentially image links

0:45to a service called Cloudinary,

0:46which I'll show you very, very soon.

0:48What I've done is I've then dropped this

0:49inside of Tableau.

0:50I'm not going to go through that whole

0:51process.

0:52You know how to do that.

0:53If you don't know how to do that, check out

0:54tons of videos on YouTube, but I've

0:56essentially dropped into Tableau and I've

0:58gone into the data source and I've set up

1:00a data model.

1:01Now, lots of people would suggest joining.

1:03If you've never used the data model, if you

1:06just still join objects by joining, I'm

1:07talking about doing this, opening up this

1:10connection and doing a left join on the ID

1:12field, which Tableau will actually figure

1:14out for you because it's smart enough that

1:15way.

1:16If this is what you're doing today and you

1:17've never tried the data model, just stop

1:19doing this.

1:20This is, this is sort of, this is such an

1:22old way of doing things and honest to God,

1:24you will honestly love the data model once

1:26you get familiar with it.

1:27So instead, create a relationship.

1:28It works exactly the same way and more

1:30often than not, Tableau will actually do

1:32the

1:32right thing for you and it takes a whole

1:34load of pain away.

1:35You can see that the relationships are set

1:36up down here on the bottom left and it

1:38works exactly as you'd expect.

1:40Now, the real power with the data model is

1:42that Tableau only brings the data

1:45together at the query level.

1:46So when you're actually looking at a sheet

1:48of information, Tableau evaluates the sheet

1:50and figures out what data it needs from the

1:52second data source and then process the

1:54relationships with a join or with any other

1:57sort of way of using Tableau, whether it's

1:59blends, unions, Tableau has to do that

2:01ahead of time.

2:01So it's actually more computationally

2:03intensive.

2:04So enough of a sidetrack on data model.

2:06Here we are.

2:07We have the images set up on the dashboard.

2:09Now I've done another thing, which is I've

2:12broken down the URL into its sub component.

2:15Now the reason I've done that is because

2:16when I went into Cloudinary and I got my

2:18URLs, I did it manually.

2:19Yes, you wouldn't do this manually

2:21typically, but then I needed to recreate

2:23what you'd

2:23actually get out of the system if you're

2:25using something like an API.

2:26So that's what you see over here on the

2:28right hand side.

2:29You essentially have the base URL and what

2:31you can do is you can add a part of the URL

2:33in front of it.

2:34You can see this particular text is pretty

2:36much the same across all of the links.

2:39So that's just added to the front of the

2:41URL and that makes the whole URL.

2:42So it's essentially two parts, the file URL

2:45and then the base URL for the service.

2:48And that pretty much makes the whole URL.

2:49But this is where this service gets very

2:51interesting.

2:52Before I show you this amazing, I really do

2:54promise you this will blow your mind.

2:56Let's go to the next dashboard where I'll

2:58show you what I've set up.

3:00So here you can see I've set up a very

3:01simple dashboard and what I've done is I've

3:04set up a dashboard action.

3:05Now, if you don't know how to do that, just

3:07go over here to the top, select actions,

3:09and

3:09it opens up this interface.

3:10Depending on your version of Tableau, this

3:12might look slightly different.

3:13If it looks like this, you're using a newer

3:15version of Tableau and it's going to look

3:16exactly the same as mine.

3:17If you're using an older version, the

3:19options are the same.

3:20You just need to look for where they are.

3:21In essence, you need to add an action and

3:24essentially need to add a go to URL action.

3:26In a recent version of Tableau, they

3:28changed this URL action so it could

3:30actually affect

3:31a web object.

3:32So you can see here that I've called this

3:34URL action image.

3:35It's from my dashboard, dashboard number

3:36one.

3:37It's from sheet number one.

3:38And when I click on any item in that

3:40particular sheet, it's essentially passing

3:43this web

3:44object to this particular box.

3:47So you can see this box is called res.cloud

3:49inary.com because it's actually been

3:50activated.

3:51But when I set this up, I just set this up

3:52to Google.

3:53So let me show you what that looks like.

3:54Let's just go hit cancel, cancel, and let's

3:57just reset this URL so you can see

3:59something

3:59more neutral.

4:00So let's just go ahead and delete that.

4:02And I'll just say, hey, TPS, let's go to

4:05google.com.

4:06I'm looking around my mic if you're

4:07wondering what I'm doing.

4:08Hit OK, and you'll see it just loads up

4:10Google.

4:11When I go back to my dashboard action,

4:13select actions, go into this particular

4:16action and

4:17edit it, you'll see that it now says Google

4:18.

4:18So that web object just points to whatever

4:20URL is currently in that web object.

4:22And you'll see that what I have the option

4:26to do is to essentially pass it a URL from

4:30the

4:30sheet.

4:30And the way that's set up is actually

4:32through this insert option just over here

4:34on the right

4:35hand side.

4:35Let's go ahead and click that.

4:36You'll see you get three things, a URL, the

4:38link, and the name.

4:40It's essentially looking for the text

4:42fields inside of Tableau itself.

4:43So these are essentially coming from the

4:46data source that it can see in the view.

4:48Now, these are essentially this name, link,

4:50and URL.

4:51These are the three fields that you can see

4:53here, and it's just passing that in there.

4:55So if I give it the full link, that's

4:56essentially just going to give it the full

4:59URL for the

4:59image.

5:00And when I hit OK, and I hit OK again, now

5:02when I click on any particular line here,

5:05it's

5:05going to change this box to use that image.

5:07So let's go ahead and click that.

5:09And you can see, oh, there's an HTTP error

5:11that broke.

5:11Let's go ahead and actually double check

5:13that action.

5:14I can swear I broke that during the setup.

5:17Let's just go double check that.

5:18And you can see, hey, HTTPS res.cloudinary.

5:21com.

5:22Oh, that's why, because I set two links in

5:24there.

5:24I broke it because I was doing the demo.

5:26So I'm sure I did something wrong there.

5:28Let's try again.

5:29There we go.

5:30Now the image is loaded.

5:31Now, the problem is, is these images

5:32actually quite large.

5:33Let me show you where I've uploaded the

5:35images.

5:36If I switch tabs to this tab, you can see

5:38that I've got a nice square image.

5:40And you're probably wondering, hey, how is

5:41that square when the images we saw in the

5:43previous dashboard were all sorts of

5:45proportions?

5:45Well, what I've done is I've uploaded it to

5:47this service called Cloudinary.

5:49Now, Cloudinary is a cloud service.

5:51It's pretty much like a platform for images

5:53.

5:53Just think of it as like an API for images.

5:55And this is my console.

5:57If I just go to the cloudinary.com website,

6:00let's just see their homepage so you can

6:02see

6:02what they're about.

6:03They're essentially about the unleashing

6:05the potential of your digital media.

6:06Essentially, you can upload things like

6:08images and video to their service, but then

6:10you can

6:11almost program how those images work just

6:13by changing parameters in a URL or in your

6:16API or by the way you call the images.

6:18Essentially, they take the heavy work of

6:20processing the images for you so you don't

6:23have

6:23to ahead of time.

6:24So you can upload professionally taken

6:26images.

6:26They could be whatever size.

6:27And then this service will do things like

6:30transform them for you and change them on

6:32request and obviously cache them if it's

6:34done it once before.

6:35But it will do it on request.

6:37You don't have to do all this heavy work

6:38ahead of time, especially when you've got

6:40large

6:40images, some of which may never get used.

6:42This service does it all for you.

6:43And so I go to my console.

6:45You'll see that I've got a list of images.

6:48Now, where this feature is so, so cool is

6:50if I click on any one of these images, let

6:53's go

6:53ahead and go.

6:55Let's just actually click on it.

6:56You'll see that we have loads of preview of

6:58what the images look like.

6:59Okay. And what this service can do is if

7:01you look at the bottom here, you've got

7:04something

7:04called transformations.

7:05Now, these transformations essentially

7:08allow you to change the image on demand by

7:10just

7:10changing the URL.

7:11So what I want you to look at is this

7:13particular part of the URL when I click

7:16something else.

7:17So let's say I want this as a circle.

7:19I can just go ahead, click on a circle, and

7:21you'll see that it adds a parameter to the

7:24website just over here.

7:26It processes it.

7:27And once it processes it, it's cached.

7:29So next time I come to render this image,

7:31it'll be really, really fast.

7:32Let's go to a thumbnail instead.

7:34Let's go to this thumbnail over here.

7:36And again, you can see that it's been set

7:38to a width of 200.

7:39Now, because the image is really, really

7:41tall, it's obviously going to be a tall

7:43image.

7:43It's probably four or five hundred pixels

7:45large.

7:46But I could set a height for that as well

7:47if I wanted to.

7:48I can just go ahead and type that in and it

7:50will change that comfortably.

7:52And so what this allows us to do is inside

7:55of our dashboard, we can dynamically change

7:58the

7:58image just using a calculation.

8:00You could use a parameter.

8:01You could use device specific URLs, for

8:04example.

8:04Let's say on a mobile dashboard, you have a

8:06much, much smaller images.

8:08On another dashboard, you have much larger

8:10images.

8:10The only stipulation, the only challenge

8:12here is that you need to load it into Web

8:14Object in

8:14today's version of Tableau.

8:16And in the future, when image rolls come,

8:18you'll be able to build dynamic URLs that

8:21meet

8:21those image roles and change depending on

8:22where they're being used inside of the

8:24dashboard,

8:25which is an absolute sort of brain teaser

8:27of a feature.

8:28So let's go ahead and show you how that

8:29could actually work.

8:30So at the moment, I have this I have this

8:32container here that's set to 300 pixels by

8:35300

8:36pixels. What I want to do is go ahead and

8:38change one of these images to match those

8:41proportions. You can see this one of the

8:42airplane doesn't match it at all.

8:44I can't even remember which one I click.

8:45Let's just click through these until we

8:47find that one with the plane.

8:48In fact, they're all down fit the

8:49proportions.

8:50There we go.

8:50That's I can't even pronounce the surname.

8:53This is from a mock data set.

8:54And obviously it's gone and found names

8:56that I can't pronounce standard.

8:57But let me just go and change the

8:59parameters of this.

9:00And I'm going to do this inside a tableau.

9:02I'm not going to go to Cloud Marine.

9:03I could do it there and show you, but I'll

9:05do it here inside of Tableau just by

9:07changing a

9:07calculation. So let's go back to sheet one

9:10where we have this.

9:12And this is the actual image that we're

9:14going to be looking at.

9:16What I will do, though, is I'll keep

9:17everything else so we can see the sort of

9:20calculations working.

9:21And remember, this is my base URL.

9:22So what I'm going to do is I'm just going

9:24to type the calculation first so you can

9:26see this

9:27working in honest and then we can start

9:28doing some more clever stuff.

9:30In fact, I probably won't do the clever

9:31stuff.

9:32I just should have explained how that works

9:34using parameters or some other items.

9:35So I'm just going to cheat here and edit

9:37the alias.

9:38The reason I'm doing that so I can get the

9:40actual text and I can copy inside of a

9:42calculation. So let's go ahead and create a

9:44new calculation.

9:46And what we'll do is we'll call this 300

9:49pixels by 300 pixels.

9:50OK, so 300 by 300.

9:53OK, and of course, the end of the URL has

9:56already been done for us.

9:59I've got that over here. So I already did a

10:01calculation ahead of time.

10:02The way I did that calculation for anyone

10:04who's curious is I essentially staged it in

10:07three parts. Look at me. I even documented

10:08this ahead of time because I'm organized.

10:10That never happens. So what we have is a

10:12three step calculation.

10:15Step one, find the position of the text

10:17upload because that is consistent across

10:19URLs.

10:19Step two, find the length of the entire

10:22text string and then subtract the number of

10:25characters that would comprise the word

10:27upload.

10:28Now, those who view who are keen will know

10:30the upload is actually six characters.

10:32But the way the computer works actually

10:34starts at zero.

10:35So it will find six, but that will actually

10:38be five.

10:38So I need to minus five to essentially find

10:41the correct position for the entire length

10:44of the text.

10:45Now, step three is we basically do some

10:47math between those to find out the position

10:50from

10:50the right hand side that I need to capture

10:52the URL.

10:53And that's what you can see here for the

10:54URL, essentially really super simple.

10:56So I've explained that. Now let's go ahead

10:58and create our own calculations and right

11:00click on that URL for to create calculated

11:02field.

11:03And we're just going to make this larger so

11:05you can see I'm just hitting command equals

11:07on a Mac, which is plus.

11:08And what I'll do is I'll essentially grab

11:11the base URL.

11:12I'll just paste it in. It's a bit long and

11:14messy, but that's exactly what we need.

11:16And we're going to delete everything up

11:18until the forward slash here, OK, because

11:20that's

11:20what we're going to add later on.

11:21And what we'll do is we'll add a speech

11:23marks around this to tell Tableau that this

11:26is

11:26actually a string and we'll go ahead and

11:29finish that.

11:30OK, so there we go. We've added that.

11:31And now we're pretty much good to go.

11:33We could just leave it here and it would

11:34load the image.

11:35But what I actually need to do is add some

11:37parameters.

11:37So the thing I'm going to add is I'm going

11:40to add another I added that in the wrong

11:42place.

11:42I'm going to add another plus because we

11:44essentially need to add a piece of text in

11:46between these two. And let's just go ahead

11:48and do that.

11:49So we've got somewhere to add some text in.

11:52And what I'm going to do here is add

11:54specific parameter from Cladero.

11:56Now I'm going back to Cladero just to grab

11:58some parameters.

11:59You can see that I've actually done this

12:01already once here.

12:02I set this particular thumbnail to 400 by

12:04400.

12:05So just to show you how this works really,

12:07really quickly, I can just set this top

12:09parameter here to three.

12:10And so that's a three and then enter and it

12:13will go ahead and resize that image.

12:15So what I need is just this small bit of

12:18text.

12:18Copy it. Go back to Tableau.

12:23Put this in. And I want to make sure I don

12:25't have any spaces because that will

12:27essentially break the URL.

12:29So what this text does is it will give each

12:33URL a 300 by 300 sized image instead of the

12:38one that we have in there by default, which

12:40will make it square.

12:40And then it will fit perfectly into a Web

12:42object or whatever space that we have.

12:44So let's go ahead and hit apply.

12:46And now we have our 300 by 300 image.

12:49What I will do is I'll replace the link

12:51with that particular image so you can see

12:53that that's working.

12:55And let's just open up the link so you can

12:57see that, look, it now has that terminology

13:00all the way through all the URLs.

13:02So now I've just dynamically changed the

13:04size of all the images just by changing the

13:06parameter using a calculation.

13:07So let's go ahead to my dashboard.

13:09And what I will now need to do is go ahead

13:11and change my actions.

13:12So you'll actually get to see how I've set

13:14up this action in the first instance.

13:15Let's go ahead and hit edit.

13:17And what we want to do again is we go from

13:19sheet one to the Web object.

13:22It's already got something in there.

13:23And what I want to insert instead of the

13:25link, I actually want to insert my 300 by

13:28300 URL.

13:29You can see it actually loads up an item

13:31there.

13:31I can hit OK and I can hit OK.

13:33So this is the moment of truth.

13:34We should get a perfectly square image in

13:37this box.

13:37Let's go ahead and hit that.

13:38Oh, and we had an error.

13:40I think I probably did the same thing as

13:42last time.

13:42Let's just go ahead and double check that.

13:45So 300 by 300.

13:48Let's go ahead and click this and see if it

13:49actually loads something outside.

13:52It didn't load something outside, which

13:53means I probably did something wrong.

13:55Yes, I didn't include the text that says

13:57upload.

13:58That's a critical part of the component.

14:00So it's good to sort of troubleshoot these

14:01things.

14:02So what I will do is I will go and edit the

14:05calculation itself.

14:07So in this 300 by 300, there's a critical

14:11part of the URL that I forgot to add that

14:13adds the upload folder, essentially where I

14:15've put the image.

14:15So what I need to do here is just type

14:17upload.

14:19The reason this is, is because I removed it

14:21when I was finding the position of the text

14:23.

14:23Essentially, I used the term upload to find

14:25it and I removed it and I didn't put it

14:26back into the URL.

14:28So now that I've done that, we should be

14:29all gravy.

14:30You can see it's a little bit longer now.

14:32Let's go back to the dashboard.

14:33And now if we just go ahead and click that,

14:35we get a perfect square image and it loads

14:38and fills the space.

14:39So look at that.

14:40I haven't had to go to a design team and

14:41ask them to load me squares.

14:43I haven't had to go and do anything.

14:44It's all been done here in the image.

14:47Now, the great thing is that cloud really

14:49doesn't stop there.

14:49Cloud is just an incredibly useful tool.

14:51We can add lots of things.

14:53We can add text overlays on top of these.

14:55We can add watermarks onto these images.

14:57Let's say you're in an embedded solution.

15:00You want to add watermarks to images in a

15:01dashboard because for whatever reason, you

15:03want to let people know that these images

15:04are trademarked.

15:05You can do that all by just changing the

15:07URLs and it dynamically goes and adds that.

15:10Now, the way the service does that, if I

15:11just close this tab, I can go to something

15:13called transformations and you can actually

15:15see what it can do.

15:16You can resize images to fill specific

15:17dimensions.

15:18This is what we've been doing.

15:19We can apply a constant scale.

15:21We can even do face detection.

15:22If you've got an image of people's faces

15:24when it crops, it will actually go and

15:26center the crop on the face.

15:27That's just unreal.

15:29You can even do data privacy capabilities.

15:32You can put an image over people's faces.

15:34So if you've got a photo and you want to

15:36make sure that some people don't see

15:38certain faces, then you can, of course, go

15:40ahead and use the service to go and find

15:41those faces.

15:42And you can add other sort of interesting

15:44aspects of images.

15:45And it even works with video.

15:46You can add things like borders.

15:47It really is quite a robust capability.

15:50I can't think of many things that won't

15:52work with this.

15:52Now, the really great thing here, if you

15:55work in consumer goods, it's even got a

15:57background changing capability.

16:00So you can actually go and isolate the

16:01background, remove the background and leave

16:03you with the objects.

16:05If you've got an image of something that's

16:06been taken on a sort of very average

16:08background, this can really help you apply

16:10some consistency to the way the images are

16:12done.

16:13And you can apply effects and styles that

16:15you can really change up what you're trying

16:17to do.

16:17Almost to a ridiculous extent.

16:19I wouldn't go as far as some of these sort

16:21of image suggestions work.

16:23I would probably just bake it into whatever

16:25service I'm using rather than trying to do

16:27all of this stuff in post.

16:28But here you are.

16:29You can just change the URL and change the

16:31way things work.

16:32And you're just defining it by adding a

16:34bunch of text parameters to the URL.

16:36So I just wanted to show that because when

16:38tablet implement the image role, I think

16:39this will be a really, really powerful

16:41service.

16:42Now, you're probably wondering, what does

16:43it cost?

16:44Okay, yeah, okay, you got me there.

16:45Let's go to my dashboard.

16:47And I'll show you sort of my cost.

16:49Now, the only way I can think of do this is

16:51actually just go to my account, because I

16:53think that's the only place where I can

16:54actually see how many credits I've used and

16:56what the limits are.

16:57So here we go.

16:58I have a free plan with 25 monthly credits.

17:00One credit equals 1000 transformations.

17:03So in essence, I get 25,000 transformations

17:06.

17:06And that credit also applies to storage.

17:09And I've barely used the storage.

17:10So if we're just using a small company

17:12dashboard, in all honesty, people in

17:15businesses don't actually go to dashboards

17:17that often we all know that if we feel

17:19server admins.

17:20And so you could actually get away with one

17:22use case, setting up a cloudinary account,

17:25uploading images.

17:26And if it's just a tactical deployment, you

17:28just want to test something really quickly,

17:29you could probably get away with just using

17:31the free limit.

17:32But actually, if you're in a large

17:33organization, you know, thousands of people

17:35are going to use a dashboard, maybe you're

17:37in an in an embedded solution.

17:39This is a really elegant way of scaling up

17:41the image capabilities in desktop, without

17:43having to go and build a whole image

17:44service behind it.

17:46All you need to do is work with the cloud

17:48inary API has an API and a platform behind

17:50it.

17:50You can essentially create the assets ahead

17:53of time.

17:53So upload all the assets, leave them in

17:55there.

17:56And when you're sort of done, you can do

17:58exactly what I did, you can just come and

18:00export a file with a URL, essentially, like

18:02I've done here, where we have the ID, the

18:04name, the link.

18:06And then with those things, you can

18:07essentially modify them all in the

18:09dashboard just to keep things flexible.

18:11Those images are also usable in other

18:13places.

18:13So cloudinary isn't just a tablet specific

18:15thing here.

18:16The way the API works.

18:18In fact, if you look at some of the

18:19examples that I was sharing earlier on, let

18:21's just go back a few steps.

18:22You can see they often show you ways of

18:24doing the same thing using different

18:26languages.

18:27So URLs is what I like in tablet is that's

18:29what I can edit text.

18:31But if you're using other tools and

18:33technologies like Ruby, pretty much all of

18:35these right the way through to app

18:36development, you can essentially have one

18:39consistent image library that works across

18:41a bunch of tools and tablet can just slot

18:43into that setup.

18:44So I think cloudinary is going to be an

18:46amazing tool for tableau.

18:48I really like to thank Andre Andre, my

18:49colleague and friend who introduced me to

18:51this service now nearly two, three years

18:53ago.

18:54Initially, I used to use this to run the

18:56images on my blog.

18:57Essentially, I'd upload the images here and

18:59I'd have the text statically hosted

19:01somewhere else.

19:02I think it was on them.

19:03I forget the name of the service.

19:04We can talk about that some other time.

19:06But in essence, I used to use this for

19:08hosting images on a blog.

19:09And actually, I realized this would be

19:11quite handy inside a tablet when I came

19:12across a business challenge this week.

19:14And hopefully this video show me how you

19:16two can do that.

19:17I'd love to know the creative ways that

19:18people are sort of implementing this.

19:20So if you do find this video useful, let me

19:21know in the comments what you've used it

19:23for, if you're going to use it, if you

19:24found it useful.

19:25You've got any tweaks or suggestions.

19:27I actually think Tableau should really

19:28think about images properly because we all

19:31want to bring a lot of design elements into

19:33our dashboards as authors.

19:34But actually, it's an incredibly tough

19:36thing to do.

19:37At the moment, we've got very sort of

19:38narrow places where we can work with images

19:40.

19:40And I think for now, at least, this image

19:43service will help you work with Web objects

19:45.

19:46But in the future, when the image rolls

19:47will roll out, this service will become

19:49really, really handy for just making sure

19:51your dashboards always lays images that are

19:53nicely formatted and are consistent.

19:55Thanks for watching.

19:56and I'll catch you in the next video.

19:58[BLANK_AUDIO]