# Set background image using export\_to\_template\_context

**URL:** <https://community.hubspot.com/t/set-background-image-using-export-to-template-context/117855>\
**Category:** CMS Development\
**Created:** [October 8, 2024, 9:35am UTC](https://community.hubspot.com/t/set-background-image-using-export-to-template-context/117855 "2024-10-08T09:35:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![RAnderson91](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@RAnderson91](https://community.hubspot.com/u/RAnderson91)\
**Post date:** [October 8, 2024, 9:35am UTC](https://community.hubspot.com/t/set-background-image-using-export-to-template-context/117855/1 "2024-10-08T09:35:29Z")

</div>

Hi,

I’m trying to allow a user to set the background image for the post hero using the “export\_to\_template\_context” parameter as detailed here [https://developers.hubspot.com/docs/cms/building-blocks/modules/export-to-template-context#user-selectable-background-images](https://developers.hubspot.com/docs/cms/building-blocks/modules/export-to-template-context#user-selectable-background-images) but the image is not being outputted.

Here is the code I’m using in the template:

{% module “hero\_image” path=‘@hubspot/image’, label=‘Select a hero image’, src=‘[https://placehold.co/2000x600](https://placehold.co/2000x600)’, export\_to\_template\_context=True %}

{% extends “./base.html” %}

{% block body %}

\<div class=“Block Block–hero” style=“background-image:url(‘{{ widget\_data.hero\_image.src }}’);”\>

\<div class=“container”\>

\<h1\>

{{ page\_meta.name }}

\</h1\>

\</div\>

\</div\>

{{ content.post\_body }}

{% endblock body %}

I’m not sure where I’ve gone wrong so any help is greatly appreciated.

Thanks,

Ryan

---

<div class="post-metadata">

**Author:** ![SteveHTM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stevehtm/32/22074_2.png) [@SteveHTM](https://community.hubspot.com/u/SteveHTM)\
**Post date:** [October 8, 2024, 2:28pm UTC](https://community.hubspot.com/t/set-background-image-using-export-to-template-context/117855/2 "2024-10-08T14:28:25Z")

</div>

@RAnderson91 - I’ve done a comparison of your code snippet with the one that I’m using operationally (and have done for many years).

The only difference I can see is that my instance of the module is inside the {% block body %} structure. I also son’t use a default src value, but I can’t see that as significant.

Good luck - its a powerful technique to master!

Steve

---

<div class="post-metadata">

**Author:** ![RAnderson91](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@RAnderson91](https://community.hubspot.com/u/RAnderson91)\
**Post date:** [October 8, 2024, 3:34pm UTC](https://community.hubspot.com/t/set-background-image-using-export-to-template-context/117855/3 "2024-10-08T15:34:00Z")

</div>

Hi @SteveHTM

Thanks for the response, after moving the module inside the body tag as you suggested it still wouldn’t output.

I added a standard text module and managed to output that value in both the post template and listing template.

I managed to see all the info by using {{ widget\_data.hero\_image }} in the template, which outputted the following:

{img={src=[https://static.hubspot.com/final/img/content/email-template-images/placeholder\_200x200.png](https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png), alt=placeholder\_200x200, loading=disabled, width=200, height=200}, link=, parent\_widget\_container=null, label=Select a hero image, smart\_type=NOT\_SMART, type=module, export\_to\_template\_context=true, target=false, field\_types={link=text, img=image, target=boolean}, path=@hubspot/linked\_image, definition\_id=null, module\_id=1155231, extra\_classes=widget-type-linked\_image, wrap\_field\_tag=div, smart\_objects=[]}

So then after changing my source to {{ widget\_data.hero\_image.img.src }} I was finally able to get the image to output as I wanted.

I’m not sure if this is how it is supposed to work and the documentation is out of date or I have done something different elsewhere in my theme but just wanted to type all this out in case someone else encounters the same issue.

Thanks,

Ryan

---

<div class="post-metadata">

**Author:** ![POfficial90](https://avatars.discourse-cdn.com/v4/letter/p/e19adc/32.png) [@POfficial90](https://community.hubspot.com/u/POfficial90)\
**Post date:** [October 12, 2024, 7:18pm UTC](https://community.hubspot.com/t/set-background-image-using-export-to-template-context/117855/4 "2024-10-12T19:18:15Z")

</div>

athe picture

---

<div class="post-metadata">

**Author:** ![POfficial90](https://avatars.discourse-cdn.com/v4/letter/p/e19adc/32.png) [@POfficial90](https://community.hubspot.com/u/POfficial90)\
**Post date:** [October 12, 2024, 7:19pm UTC](https://community.hubspot.com/t/set-background-image-using-export-to-template-context/117855/5 "2024-10-12T19:19:57Z")

</div>

the second

 ![Screenshot 2024-10-12 at 21-12-39 Template.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/b/5b322764ad93a9c207985ffcd8df15d77b0c2c83.jpeg)