Set background image using export_to_template_context

[RAnderson91]

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-sele... 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', 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

[POfficial90]

athe picture

[POfficial90]

the second

[RAnderson91 · Accepted solution]

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, 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

[SteveHTM]

@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