Dynamic Email Hero Images in HubSpot: A Community-Driven Solution

Creating engaging email templates that display perfectly on any device is a constant challenge for marketers. One common issue is implementing dynamic hero images that adapt to different screen sizes, especially within HubSpot. Let's dive into a recent HubSpot Community discussion about this very topic and explore some solutions.

The Challenge: Dynamic Hero Images in HubSpot Emails

The original poster wanted to create a custom email template in HubSpot with a dynamic hero image. The goal was to have the image, background size, padding, and other properties adjust based on whether the email was viewed on a mobile device or a desktop computer. They were using a custom module to control these settings but were struggling to get the mobile field values to export to the larger template.

Specifically, the poster was running into issues accessing the mobile field values outside of the custom module, despite attempting to use export_to_template_context true and content.widgets as outlined in the HubSpot documentation.

Solutions from the HubSpot Community

Several community members chimed in with helpful suggestions.

Suggestion 1: Accessing Module Data

One respondent suggested ensuring that the module data was being declared before attempting to access it in the head tag. They recommended using widget_data when accessing data from modules declared in the code on the page.

{{ widget_data.module_17708247515436|pprint }}

Suggestion 2: Using CSS within the Module

Another community member provided a code snippet demonstrating how to embed the CSS directly within the custom module using {% require_css %} tags. This approach allows you to define different styles for mobile and desktop within the module itself.

{% require_css %}
   
{% end_require_css %}

However, it was pointed out that {% require_css %} tags might not be supported in all email modules. A workaround suggested was to create a separate module containing just the CSS and place it in the tag. Alternatively, the plain CSS could be added to the head and accessed using widget_data, but a custom module was deemed easier to manage for both the developer and the content editor.

The Solution: Combining Approaches for Flexibility

The most effective solution likely involves a combination of these approaches. Here's a breakdown of the steps:

1. Create a Custom Module: Design a custom module with fields for both desktop and mobile hero image settings (source URL, background size, etc.).
2. Implement CSS: Use CSS within the module to define styles for different screen sizes using media queries. You can either use {% require_css %} if supported, or create a separate CSS module.
3. Access Module Data: If necessary, use widget_data to access the module data from the main template, especially if you choose to place the CSS in the tag.

By following these steps, you can create a dynamic hero image that adapts seamlessly to different screen sizes, providing an optimal viewing experience for your email recipients. The best approach depends on the specific limitations of your HubSpot setup and your comfort level with different coding techniques.

ESHOPMAN Team Comment

We appreciate the community's practical and hands-on approach to solving the dynamic hero image problem. Using custom modules is definitely the way to go for complex email templates in HubSpot. The discussion highlights a key challenge: balancing flexibility for developers with ease of use for content editors. Ultimately, the most maintainable solution is one that's easy for non-technical users to update without breaking the design.

Remember that the best solution will depend on your specific needs and technical expertise. Don't be afraid to experiment and adapt these suggestions to your own HubSpot environment.