DP22 - Using Beast Mode to Build Data Storytelling - Links and Images

GrantSmith

This post is part of a series of beast modes I presented on during my “Using Beast Mode to Build Data Storytelling” Domopalooza 2022 session. If you find this post helpful please make sure to give it a like or an awesome below.

Use Case

We wanted to enhance the visualization experience and allow users to see which specific item we’re referencing with an image rather than just a specific ID code. Another think we wanted to do was to allow users to click on the image or hyperlink to go to the website to get more information on the product rather than having to look it up themselves. We utilized a Mega Table for this but the beast mode will also work in an HTML table if desired.

Beast Mode

CONCAT(
'<A HREF="https://my.url.com/store/detail/', `Product ID`, '" TARGET="_blank">',
'<IMG SRC="https://my.url.com/images/items/', `Product ID`, '-small.jpg"/>',
'</A>’)

Beast Mode Breakdown

Hyperlinks

CONCAT('<A HREF="https://my.url.com/store/detail/', `Product ID`, '" TARGET="_blank">@</A>’)

Generates HTML code to create hyperlink for users to click on by dynamically creating the URL with the correct product ID. For example: <A HREF="https://my.url.com/store/detail/SM58" TARGET="_blank">@</A>

TARGET="_blank" causes the link to open in a new tab instead of replacing the existing window. This is important because if it’s opened in a new window and a user clicks back to get back to the card they will lose all of their filtering. Opening a new tab allows the card to still exist with the filtering in place giving a much better user experience.

Whatever is in between the <A> and </A> tags will be highlighted for the user to click on and go to the URL defined in the HREF. In this example @ is the text that will be highlighted for a user to click.

Can only use mailto, http and https protocols in hyperlinks.

Images

CONCAT('<IMG SRC="https://my.url.com/images/items/', `Product ID`, '-small.jpg"/>’)
•       

Dynamically generate the URL of the image using the product ID For example: https://my.url.com/images/items/SM58-small.jpg

CONCAT wraps the dynamic URL in HTML IMG tag to tell the browser to display an image

Images & Hyperlinks

CONCAT(
'<A HREF="https://my.url.com/store/detail/', `Product ID`, '" TARGET="_blank">',
'<IMG SRC="https://my.url.com/images/items/', `Product ID`, '-small.jpg"/>',
'</A>’)

Combines the logic from the Link beast mode with the Image beast mode to allow for users to click on the image to open the link.

We’ve replaced the @ in the Link beast mode

Final Result

Clinking the image takes you to the webpage defined in the A tag's HREF URL.

Canioagain

Did I mention this was Awesome?