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 HubL code 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, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn


Category: Code Snippets
Tags: , ,