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