Export value from custom module to html email template

Developer Support CMS Development
1

I am coding a custom email template that I want to have a dynamic hero image that adjust to screen size but is still editable via the hubspot UI.

I am wanting to have the header module to include customizable values where fields like background-image src, padding, background-size, etc. can have different values set for mobile vs. desktop. The module is working fine on desktop and adjust well with static values for overrides, but I cannot figure out how to get the mobile field values to export to the larger template to make the mobile overrides customizable.

I have tried using the export_to_template_context true and content.widgets as outlined in this document but I still cannot access the field values outside of the module. I ended up not adding the export_to_template_context true to the module as the documentation said it wasn’t necessary for custom modules and it stopped the module from displaying.

Current HTML configuration (just the relevant snippets):

Head tag setup:

<style>

@media only screen and (max-width:420px) {

.email-header {
background-size:auto 88% !important;
background-image:url({{ content.widgets.module_17708247515436.body.mobile_background_src }} }}) !important;

}
}

</style>

Body setup (within template):

{% module “module_17708247515436” path=“/Custom Email Content/Custom Modules/Dynamic Header Image”, label=“Dynamic Header Image” %}

Body setup (within custom module):

<table class=“email-header” align=“center” role=“presentation” cellspacing=“0” cellpadding=“0” border=“0” width=“100%” style=“width:100%; border-collapse:collapse; background-color:{{ bg_color }}; background-image:url(‘{{ module.edit_hero_image.background_source_url.href|escape_url }}’); background-size: {{ module.edit_hero_image.desktop_image_size }}px auto; background-repeat:no-repeat; background-position: bottom right;”>

<!-- section content here -->

</table>

Any help or suggestions would be appreciated.

2

Are you trying to access the module data (in the head tag) before it’s been declared?

I can’t remember but I’ve always used widget_data when accessing data from modules declared in the code on the page.

{{ widget_data.module_17708247515436|pprint }}

3

I hadn’t tried using the pprint method, I’ll see if that works. Thanks!

4

Hey @NWombwell6 - thanks for posting in the Community!
Checking in to see if @MichaelMa’s reply provides any support to your inquiry.
Shane, Senior Community Moderator

5

Hey @NWombwell6,

just use the custom module and modify it to something like this:

{% require_css %}
 <style>
 .email-header{
 background-image: {{ module.mobile_background_image.src }};
 width:100%;
 height:{{module.mobile_background_image.height}};
 background-repeat: no-repeat;
 background-position:center bottom right;
 }
 @media screen and (min-width:420px){
 .email-header{
 background-image: {{ module.desktop_background_image.src }};
 height:{{module.desktop_background_image.height}};
 }
 }
</style>
{% end_require_css %}

<table class="email-header" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="width:100%; border-collapse:collapse; background-color:{{ bg_color }};">

<!-- section content here -->

</table>

If you’re using HubDB for managing the images, you can use either the image column or a text field for the image URL

best,

Anton

6

Hi Anton. Thanks for the reply. I was under the impression that {% require_css %} tags were not supported by email modules

7

Hey @NWombwell6,
very good point. {% require_css %}, {% require_head %}… and such def. do not work with drag&drop emails, but since you’re creating an HTML template it might work.

If this shouldn’t work, you can create a second module which contains just the CSS part and put it in the <head>-tag. Of course, you could technically add the plain css to the head and work with widget_data, but from my experience, a custom module is easier for you and the content editor to handle