6/18/2017
Tableau Solution - Embedding URL Images in Tableau Public
This post offers a solution for embedding URL images in Tableau Public. This past week's Makeover Monday featured a data set of Artwork from the Tate Collection. A number of people in the Tableau community tried linking the images from a public website gallery to their Tableau Public visualization. These visualizations worked well in Tableau Desktop, but when published on Tableau Public they didn't work correctly. When linking to a URL, Tableau Public requires the URL to be HTTPS, which wasn't possible without downloading and hosting all of the images.
So how can we solve this? I first tried a solution that I created for embedding maps in Tableau. This mapping solution involves embedding the map in an iframe by using a placeholder URL that is hosted on my website. Unfortunately, this solution won't work for images. However, the solution for this is just as simple. It takes just two lines of JavaScript code.
The two lines of code if you want to host on your own webpage:
If you don't want to bother with HTML programming and just want a simple solution, then you are welcome to use my hosted page below. I originally Tweeted a URL with the word "iframe3" in it, but the solution actually doesn't use an iframe so it's poorly named. I will keep the original webpage up since people have already used it in their work. Here is a new URL you can bookmark for future images.
Simply add this link in front of the Image URL in Tableau and you should be all set.
http://www.dataplusscience.com/image.html?url=
If the URL is in your data set and part of a Dashboard Action, then simply add the field to the end of the URL.
http://www.dataplusscience.com/image.html?url=<URL Field>
I hope you find this information helpful. If you have any questions feel free to email me at Jeff@DataPlusScience.com
