topic Re: Set background image using export_to_template_context in CMS Development

Set background image using export_to_template_context

RAnderson91 — Tue, 08 Oct 2024 09:35:29 GMT

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

<h1>

</h1>

</div>

{% endblock body %}

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

Thanks,

Ryan

Re: Set background image using export_to_template_context

SteveHTM — Tue, 08 Oct 2024 14:28:25 GMT

@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

Re: Set background image using export_to_template_context

RAnderson91 — Tue, 08 Oct 2024 15:34:00 GMT

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

Re: Set background image using export_to_template_context

POfficial90 — Sat, 12 Oct 2024 19:18:15 GMT

athe picture

Re: Set background image using export_to_template_context

POfficial90 — Sat, 12 Oct 2024 19:19:57 GMT

the second