How to Add Retina Images to HubSpot Email and Page Templates

  • read

HubSpot CMS handles responsive images by default by creating different image sizes for different screen widths (using srcset). But with retina display images, you want to load higher resolution images and scale them down to 100%. Thankfully you can add ?noresize to the end of your image source to disable this dynamic resizing.

In the example below I added a linked image tag to an email template. I want a content author to update the values but have more control over the output of the code. So I added two important attributes to the tag.

  • export_to_template_context=True This tells it to store the data and make it accessible but not to actually render the code for it on the page
  • no_wrapper=True This tells it not to add any div wrapper around content if displayed on the page.

Next I give it a unique name of “hero_image” I then can use that name to reference the values anywhere I want in my template using this snippet formula {{ widget_data.your-unique-name.value }}

Below is an example of how I used this to create an email hero image that is optimized for retina displays. The author adds an image 1200px wide but it is scaled down to 600px wide in the template. Keep in mind, you probably don’t want to use retina images everywhere to prevent slow page loading. Use it in areas that will have a lot of

What the HubL code will output on the page

 

Written by: Jacob Lett - Jacob is a digital marketing and web design consultant who helps businesses grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Code Snippets
Tags: