How to Add Retina Images to HubSpot Email and Page Templates

  • read
  • Add to Flipboard Magazine.

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 an experienced HubSpot website designer and developer who helps Industrial companies increase revenue by improving their website for awareness, lead generation, and branding.
Category: Code Snippets
Tags:

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.