User selectable background Image for E-Mail not working

publicorange
Member

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

0 Upvotes
12 Replies 12
simmpaul
Contributor

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

widget.stage_header_1_background_image.src 

 

0 Upvotes
DaniellePeters
Top Contributor

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
Member

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 

0 Upvotes
simmpaul
Contributor

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

widget.stage_header_1_background_image.src

 

0 Upvotes
publicorange
Member

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 }}');">
0 Upvotes
simmpaul
Contributor

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?

0 Upvotes
DaniellePeters
Top Contributor

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?

0 Upvotes
publicorange
Member

Hi Danielle,

 

See images attached, for me it isn't working.Bildschirmfoto 2017-03-22 um 14.40.28.pngBildschirmfoto 2017-03-22 um 14.41.09.pngBildschirmfoto 2017-03-22 um 14.42.15.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

{% 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.

0 Upvotes
publicorange
Member

Hi everyone,

any solutions?

 

Thanks!

Florian from publicorange

0 Upvotes
DaniellePeters
Top Contributor

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
Member

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

0 Upvotes
DaniellePeters
Top Contributor

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.

0 Upvotes