Displaying a footer banner image on the bottom of a quote template

[sabrinasanfra]

Hello all,

Long time listener, first time coder. I am currently making a module to add to the bottom of a quote template. I have it connected but once I try to add a photo it is giving the “Not found” error in the preview, even though a photo is selected. I am attaching a photo of the module code and the error on the preview. Any tips?

[Anton]

Hey @sabrinasanfra,

there’s no such thing as

{% set xyz %}
something something
{% endset %}

it’s something LLMs tend to add as HubL is based on Jinja and Jinja got and endset.

a set is most times just a one-liner like

{% set img_src = module.image.src %}

there are advanced usages like creating objects and arrays in a set, but those would be a absolutely overengineered solution for your usecase.

Try this code

{% if module.image.src %}
<img src="{{module.image.src}}" alt="{{module.alt_text|escape}}">
...
{% else %}
<p>not found</p>
{% endif %}

a few tips:

• lazy loading isn’t required for quotes
• Unless you add some specific styling options, you can hard-code the width/height either in the module.html (use {% require_css %} tag) and get rid of the style-tag in the image tag
• alt-text is nice, but also not required for quotes as theyÄll end up as PDFs

best,
Anton

Just for learning/info purposes:

A set array looks like this

{% set cool_array = ["option_a", "option_b", "option_c"] %}

Useage:
Define some reusable values to use in an if-statement like

{% if cool_array.option_a %}
Do something
{% elif cool_array.object_b %}
Do something differently
{% else %}
Do something if neither a or b fits
{% endif %}

Objects on the other hand are super powerful, but also tend to be quite advanced

{% set image_object = {
"src" : module.image.src,
"alt" : module.alt_text
} %}

Creating objects allow you to combine many different data into one object and use it through out a module. If you should decide to change something at a later point, you’d need to change it only in the object, not in the actual module code. Super helpful if your module has several hundreds lines of code

Example:

{% set image_object = {
"src" : module.image.src,
"alt" : module.alt_text
} 
%}

...
...
...


{% if image_object.src %}
<img src="{{ image_object.src }}" alt="{{ image_object.alt}}">
{% endif %}

[sabrinasanfra]

With this change, it is still showing the “not found” while having an image connected. Really new to this so maybe im missing something.

[Anton]

Ok. Thanks for clearing it up.

Just to make sure:
The variable name of the image is “image”

not “image_field”

correct?

If it should be “image_field”, than you’d need to change the code to

{% if module.image_field.src %}
<img src="{{module.image_field.src}}" alt="{{module.alt_text|escape}}">
...
{% else %}
<p>not found</p>
{% endif %}

edit:

you can also clear everything from the module.js part, as it shows the JSON structure of the module - which doesn’t work in the module.js and is required only for local development

[sabrinasanfra]

It worked! I just need to figure out why the photo is showing all the way until we need to print.

[GRajput]

Hi @sabrinasanfra

As Anton mentioned, the image field needs to be referenced correctly, and it looks like that part is working now.

For the image extending all the way to the print area, you could add some print-specific CSS to control the image size when the quote is printed. For example:

@media print {.footer-banner img {max-width: 100%;height: auto;}}

This should keep the banner within the printable area while maintaining its proportions. You may need to adjust the max-width or set a specific height depending on the size of the banner and the quote template.

I hope this helps you out. Please mark it as Solution Accepted and Like to help another Community member.
This post was created with the assistance of AI tools

Thanks!

[sabrinasanfra]

This didn’t work

Any other ideas?

[Berangere]

Hi @sabrinasanfra and Happy Monday!

Thanks for getting back to us!

In module.js, can you please try adding a "default" object to your image field with at least "src": "" so the field is properly initialized.

1. Confirm the field "name" is exactly "image" (it is) and that you’re selecting/saving an image in the same field shown in the preview panel, sometimes stale preview data from an older field name causes mismatches.
2. Try resetting the preview data (the “Reset” link you have in the screenshot) after saving the module.js change, then re-select the image.

If after setting the default and resetting the preview the image still shows “Not Found,” it may be worth sharing more here, but this is the most common cause for this.

Module and theme fields referenceHubL standard tags - Image

Please let us know how it goes and if you have additional questions,

Thanks,

Bérangère

This post was created with the assistance of AI tools

[Berangere]

Hi @sabrinasanfra and thanks for getting back to us!

Can you share what happened after your tested, please?

The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.

Hi @Anton, @evaldas and @GRajput do you have additional tips to help @sabrinasanfra, please?

Thanks so much and have a lovely day!

Bérangère