User selectable background Image for E-Mail not working

[publicorange]

Hi,

We want to implement background images for emails. (And we know, it's not supported for all clients, but gives them a goodie, who are using the latest technology).

Anyways, we've followed your guidelines as suggested here:

http://designers.hubspot.com/docs/hubl/export-to-template-context

(User selectable backgrounds) 

 http://cdn2.hubspot.net/hub/428357/file-2117441560-jpg/img/dev-bg-compressed.jpg

Our code is the following:

{% image "stage_header_1_background_image" label='Select a background image', 
src='http://cdn2.hubspot.net/hub/428357/file-2117441560-jpg/img/dev-bg-compressed.jpg', export_to_template_context=True %}
       	
        <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="backgroundTable dark stage_header_1" style="background:url('{{ widget_data.stage_header_1_background_image.src }}');">
            <tr>
....

Basically, we want to pull in the src from the image widget data in the inline style tag (background-image).

The option to edit will appear in the email editor, but doesn't show any image. When inspecting the fallback online archive, the src tag is empty.

Is there any solution for this?

Thanks

[simmpaul]

Might not be so simple.. But isn't it meant to be:

widget.stage_header_1_background_image.src 

[DaniellePeters]

The original token with "widget_data" should work, but instead of:

{{ widget_data.stage_header_1_background_image.src }}

You would want:

{{ widget_data.stage_header_1.background_image.src }}

(Notice the period between "1" and "background")

[publicorange]

Hi Danielle,

thanks for your reply.

This isn't working unfortunately.

I declare a name for the image object:

{% image "stage_header_1_background_image" label='Select a background image', src='https://cdn2.hubspot.net/hubfs/442173/InsightBee/Email_Assets/Template_2017/bg_stage_1.jpg', export_to_template_context=True %}

"stage_header_1_background_image"

If I use your suggested solution, I have to change that name to "stage_header_1.background_image", but 

.

aren't allowed for that.

Any other ideas?

This is the code which I've tested now:

{% image "stage_header_1_background_image" label='Select a background image', 
src='path/to/image/redacted/bg_stage_1.jpg', export_to_template_context=True %}
       	
        <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="backgroundTable dark stage_header_1" style="background:url('{{ widget_data.stage_header_1.background_image.src }}');">
            <tr>

Cheers

Florian from publicorange 

[simmpaul]

Hi orange, did you confirm that the following didn't work?

widget.stage_header_1_background_image.src

[publicorange]

Hi Paul,

this didn't work, unfortunately:

{% image "stage_header_1_background_image" label='Select a background image', 
src='path/redacted/bg_stage_1.jpg', export_to_template_context=True %}
       	
        <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="backgroundTable dark stage_header_1" style="background:url('{{ widget.stage_header_1_background_image.src }}');">

[simmpaul]

Something tells me that you may have to set the field in the custom module builder.

Is it a requirement that you set the background image field via HUBL?

[DaniellePeters]

Sorry I totally missed that. I tested your snippet in one of my emails and it is displaying the image as expected. Are you applying the style to the correct table?

[publicorange]

Hi Danielle,

See images attached, for me it isn't working.

{% image "stage_header_1_background_image" label='Select a background image', 
src='path/to/image/bg_stage_1.jpg', export_to_template_context=True %}
       	
        <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="backgroundTable dark stage_header_1" style="background:url('{{ widget_data.stage_header_1.background_image.src }}');">
            <tr>

This is also build as a custom module, which is then loaded in a template.

@simmpaul

Yes, the images should be exchangeable via hubl.

[publicorange]

Hi everyone,

any solutions?

Thanks!

Florian from publicorange

[DaniellePeters]

Make sure you go back to the original token 

{{ widget_data.stage_header_1_background_image.src }}

(again my bad)

Other than that, not sure because it is working on my test email. Since it is in a custom module, I would make sure that there aren't any syntax errors in the HTML of either the module or the email itself.

[publicorange]

Hi Danielle,

unfortunately, this isn't working.

This is the current code:

{% image "stage_header_1_background_image" label='Select a background image', 
src='path/to/fallback/image/bg_stage_1.jpg', export_to_template_context=True %}
       	
        <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="backgroundTable dark stage_header_1" style="background:url('{{ widget_data.stage_header_1_background_image.src }}');">
            <tr>
                <td align="center" valign="top" class="bodyCell"> 

Do I oversee something?

Cheers

Florian

[DaniellePeters]

Since the snippet works in my email, there's not much more I can suggest. My only thought is that the background image should be applied to a <td> within the table rather than the <table> itself. It would be worth going to the live preview of the email and using the developer tools to inspect and see if the image is being applied to a container that has a height and width.