# Export value from custom module to html email template

**URL:** <https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128>\
**Category:** CMS Development\
**Created:** [February 11, 2026, 7:45pm UTC](https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128 "2026-02-11T19:45:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![NWombwell6](https://avatars.discourse-cdn.com/v4/letter/n/7bcc69/32.png) [@NWombwell6](https://community.hubspot.com/u/NWombwell6)\
**Post date:** [February 11, 2026, 7:45pm UTC](https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128/1 "2026-02-11T19:45:21Z")

</div>

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](https://developers.hubspot.com/docs/cms/reference/modules/export-to-template-context#retrieving-parameters-from-modules-already-rendered-on-the-template) 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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) 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.

---

<div class="post-metadata">

**Author:** ![MichaelMa](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@MichaelMa](https://community.hubspot.com/u/MichaelMa)\
**Post date:** [February 11, 2026, 8:37pm UTC](https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128/2 "2026-02-11T20:37:31Z")

</div>

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 }}`

---

<div class="post-metadata">

**Author:** ![NWombwell6](https://avatars.discourse-cdn.com/v4/letter/n/7bcc69/32.png) [@NWombwell6](https://community.hubspot.com/u/NWombwell6)\
**Post date:** [February 12, 2026, 3:37pm UTC](https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128/3 "2026-02-12T15:37:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![STierney](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stierney/32/186066_2.png) [@STierney](https://community.hubspot.com/u/STierney)\
**Post date:** [February 11, 2026, 9:01pm UTC](https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128/4 "2026-02-11T21:01:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [February 12, 2026, 7:28am UTC](https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128/5 "2026-02-12T07:28:25Z")

</div>

Hey @NWombwell6,

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

```lia-code-sample
{% 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

---

<div class="post-metadata">

**Author:** ![NWombwell6](https://avatars.discourse-cdn.com/v4/letter/n/7bcc69/32.png) [@NWombwell6](https://community.hubspot.com/u/NWombwell6)\
**Post date:** [February 12, 2026, 2:10pm UTC](https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128/6 "2026-02-12T14:10:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [February 12, 2026, 2:41pm UTC](https://community.hubspot.com/t/export-value-from-custom-module-to-html-email-template/146128/7 "2026-02-12T14:41:51Z")

</div>

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