CMS Development

evanzhang
Participant

Converting Images for Email Templates (Coded Files)

SOLVE

Hey everyone!

 

We're currently using an HTML template and trying to convert the images into editable modules using Hubl code. 

 

Here is the original code: 

 

<img align="center" alt="" src="https://gallery.mailchimp.com/d5501bca182eab78bf615fa74/images/e1f721c1-8a95-4210-b94a-1f9ab7ee79dc.png" width="564" style="max-width:1134px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">

When we replace it with Hubl code like this: 

{% linked_image “banner_image” label = ‘Banner Image’ src=‘https://gallery.mailchimp.com/d5501bca182eab78bf615fa74/images/e1f721c1-8a95-4210-b94a-1f9ab7ee79dc.png’ style="max-width:1134px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage” %}

It affects how the email looks on mobile and throws off the template. How can we use Hubl code properly to transfer over the image module? Thanks! 

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

Converting Images for Email Templates (Coded Files)

SOLVE

@evanzhang,

 

There are a few issues:

 

1. This might just be a copy and paste error but you should check and make sure that your quotations are not "pretty" quotes. When I copied and pasted your image module into a template on my portal it threw an error because the quotations were not straight quotes.

 

2. spacing in your code. This may or may not be part of your issue but where you define your label there is space before and after the = sign. 

 

3. Your styles are being applied directly to the img tag that is output by the module code, however class is not actually a Hubspot Module parameter. The correct parameter is extra_classes="".

 

4. Hubspot auto wraps modules in a span tag. here is the current markup coming from your module:

<span id="hs_cos_wrapper_banner_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image">
     <img src="https://gallery.mailchimp.com/d5501bca182eab78bf615fa74/images/e1f721c1-8a95-4210-b94a-1f9ab7ee79dc.png" class="hs-image-widget " style="border-width:0px;border:0px;max-width:1134px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" alt="" title="">
</span>

If you chance class to extra_classes then you class will be applied to this span tag. If this span tag is what is causing your issues you can remove it by using no_wrapper=True in your module code, however extra_classes will not work because with the span tag gone there is nothing to apply the class to. Unfortunately there is not way to apply classes to the actual elements that are output my module codes, just to the optional wrapper span tag for the modules. It's a little silly in my opinion. 

 

I'm removing your url and styles to make the code shorter - 

 

with class applied to span wrapper:

{% linked_image "banner_image" label="Banner Image", src="image.url", style="element: styles;", extra_classes="mcnImage" %}

without class or span wrapper:

{% linked_image "banner_image" label="Banner Image", src="image.url", style="element: styles;", no_wrapper=True %}

I changed all of your quotation marks, formatted your attributes, and added missing commas so you may want to copy one of the above. 

 

If niether of these work then I would suggest using export_to_template_context=True. It's more complicated but allows for ultimate control over your code. 

View solution in original post

0 Upvotes
5 Replies 5
Jsum
Solution
Key Advisor

Converting Images for Email Templates (Coded Files)

SOLVE

@evanzhang,

 

There are a few issues:

 

1. This might just be a copy and paste error but you should check and make sure that your quotations are not "pretty" quotes. When I copied and pasted your image module into a template on my portal it threw an error because the quotations were not straight quotes.

 

2. spacing in your code. This may or may not be part of your issue but where you define your label there is space before and after the = sign. 

 

3. Your styles are being applied directly to the img tag that is output by the module code, however class is not actually a Hubspot Module parameter. The correct parameter is extra_classes="".

 

4. Hubspot auto wraps modules in a span tag. here is the current markup coming from your module:

<span id="hs_cos_wrapper_banner_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image">
     <img src="https://gallery.mailchimp.com/d5501bca182eab78bf615fa74/images/e1f721c1-8a95-4210-b94a-1f9ab7ee79dc.png" class="hs-image-widget " style="border-width:0px;border:0px;max-width:1134px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" alt="" title="">
</span>

If you chance class to extra_classes then you class will be applied to this span tag. If this span tag is what is causing your issues you can remove it by using no_wrapper=True in your module code, however extra_classes will not work because with the span tag gone there is nothing to apply the class to. Unfortunately there is not way to apply classes to the actual elements that are output my module codes, just to the optional wrapper span tag for the modules. It's a little silly in my opinion. 

 

I'm removing your url and styles to make the code shorter - 

 

with class applied to span wrapper:

{% linked_image "banner_image" label="Banner Image", src="image.url", style="element: styles;", extra_classes="mcnImage" %}

without class or span wrapper:

{% linked_image "banner_image" label="Banner Image", src="image.url", style="element: styles;", no_wrapper=True %}

I changed all of your quotation marks, formatted your attributes, and added missing commas so you may want to copy one of the above. 

 

If niether of these work then I would suggest using export_to_template_context=True. It's more complicated but allows for ultimate control over your code. 

0 Upvotes
evanzhang
Participant

Converting Images for Email Templates (Coded Files)

SOLVE

Hey Jsum,

 

Thank you so much for your help! I tried the both lines of code you suggested and am still running into mobile responsiveness issues. I will look into the Export To Template module as another solution. Thanks again! 

0 Upvotes
Jsum
Key Advisor

Converting Images for Email Templates (Coded Files)

SOLVE

which clients are you having issues with?

 

most outlook clients require height and with attributes, not inline styling. you still want to use the inline styling but it will default to the height and width attribute in outlook.

 

Media queries don't work in a few clients including the gmail app for android which is a pain. If you are resizing your image with a media query it won't work. 

0 Upvotes
evanzhang
Participant

Converting Images for Email Templates (Coded Files)

SOLVE

I'm having issues with the native mail app on iPhones and the Gmail app on iPhones.

The header font is much smaller with smaller margins on the sides with the Hubl code, while the header is larger and the email has larger margins with the original styling. 

0 Upvotes
Jsum
Key Advisor

Converting Images for Email Templates (Coded Files)

SOLVE

did you check the oringal version of the template on these clients? 

0 Upvotes