New Participant

Solved

Images not rending correctly in Outlook - cannot change html due to Dynamic Content

Forum|Forum|2 years ago
April 11, 2023
3 replies
6423 views

Hello. I have created segmentation for an email (dynamic content) and have discovered that the images in the snippet I've created for the footer are cutoff when the email is delivered to an Outlook email address.

I've seen suggestions that include adjusting the HTML code, but am unable to do so because of dynamic content.

Does anyone have suggestions on how to work around this? How to adjust the html code when your email uses dynamic content.

Thank you in advance.

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Dave_Roberts

Thanks for sharing the code here. It looks like the image element is contained within a paragraph and that's probably what's causing the images to be cut short. Outlook will read the line-height of the paragraph and treat that as the height of the image.

Here's a bit of code to try in place of what you've posted, let me know if this helps to resolve the issue for you:

<p style="text-align: center;">
  <strong>
    <span mce-data-marked="1" style="font-family: helvetica, arial, sans-serif; color: #000000; font-size: 16px;">CONNECT WITH US</span>
  </strong>
</p>

<div style="text-align: center;">
  <strong><span mce-data-marked="1" style="font-family: helvetica, arial, sans-serif; color: #000000; font-size: 16px; line-height: 40px;">
    <a href="https://www.facebook.com/heartlandbankandtrustcompany/" target="_blank">
      <img src="https://go.hbtbank.com/rs/381-SGM-086/images/Facebook_Icon_80x80.png" alt="Facebook_Icon_80x80.png" height="40" width="40" />
    </a>&nbsp;&nbsp;
    <a href="https://www.instagram.com/hbtbank/" target="_blank">
      <img src="https://go.hbtbank.com/rs/381-SGM-086/images/Instagram_Icon_80x80.png" alt="Instagram_Icon_80x80.png" height="40" width="40" />
    </a>&nbsp;&nbsp;
    <a href="https://www.linkedin.com/company/heartland-bank-and-trust-company" target="_blank">
      <img src="https://go.hbtbank.com/rs/381-SGM-086/images/LinkedIn_Icon_80x80.png" alt="LinkedIn_Icon_80x80.png" height="40" width="40" />
    </a>&nbsp;&nbsp;
    <a href="https://www.youtube.com/@HeartlandBankAndTrustCompany" target="_blank">
      <img src="https://go.hbtbank.com/rs/381-SGM-086/images/YouTube_Icon_80x80.png" alt="YouTube_Icon_80x80.png" height="40" width="40" />
    </a></span>
  </strong>
</div>

In the code above, I've changed the 2nd element to a <div> instead of a and set the line-height of the inner (which wraps your images) to 40px to match the height of the images.

Jo_Pitts1

Community Manager

@laevinsdad ,

you'll need to alter the HTML in the snippet (I presume this is what is using dynamic content?).

If you post the HTML from the snippet, then we can review and give you thoughts on how outlook is munging your images.

Cheers

Jo

laevinsdadAuthor

New Participant

Hi Jo. Thank you for offering to help! The following is from the HTML Source Editor within the FreeTextContent Module where I have Social Icons and links:

CONNECT WITH US
<a href="https://www.facebook.com/heartlandbankandtrustcompany/" target="_blank"><img src="https://go.hbtbank.com/rs/381-SGM-086/images/Facebook_Icon_80x80.png" alt="Facebook_Icon_80x80.png" height="40" width="40" /></a>  <a href="https://www.instagram.com/hbtbank/" target="_blank"><img src="https://go.hbtbank.com/rs/381-SGM-086/images/Instagram_Icon_80x80.png" alt="Instagram_Icon_80x80.png" height="40" width="40" /></a>  <a href="https://www.linkedin.com/company/heartland-bank-and-trust-company" target="_blank"><img src="https://go.hbtbank.com/rs/381-SGM-086/images/LinkedIn_Icon_80x80.png" alt="LinkedIn_Icon_80x80.png" height="40" width="40" /></a>  <a href="https://www.youtube.com/@HeartlandBankAndTrustCompany" target="_blank"><img src="https://go.hbtbank.com/rs/381-SGM-086/images/YouTube_Icon_80x80.png" alt="YouTube_Icon_80x80.png" height="40" width="40" /></a>

Geoffrey Landrum, Marketing Automation Specialist

Dave_Roberts

New Participant

It's hard to tell without seeing the issue in context, but usually when images get cutoff in Outlook it's because there's an image element inside a "text element" that's setup to have something like line-height set for text rather than images. Generally the fix is to wrap the image in some HTML to display at a specific height and width that's different than how you'd handle text in an email. This might be the case if you're seeing the image show up about as tall as a single line of text.

The solution will probably be based on how your Dynamic Content is setup and the context around the individual section you're working with, if you're able to share bits of that code and some screenshots it'll make it easier to triage.

laevinsdadAuthor

New Participant

Thank you. Do you have an example of code to use?

The following is the HTML code within the FreeTextContent module (the socials are being cut off):
CONNECT WITH US
<a href="https://www.facebook.com/heartlandbankandtrustcompany/" target="_blank"><img src="https://go.hbtbank.com/rs/381-SGM-086/images/Facebook_Icon_80x80.png" alt="Facebook_Icon_80x80.png" height="40" width="40" /></a>  <a href="https://www.instagram.com/hbtbank/" target="_blank"><img src="https://go.hbtbank.com/rs/381-SGM-086/images/Instagram_Icon_80x80.png" alt="Instagram_Icon_80x80.png" height="40" width="40" /></a>  <a href="https://www.linkedin.com/company/heartland-bank-and-trust-company" target="_blank"><img src="https://go.hbtbank.com/rs/381-SGM-086/images/LinkedIn_Icon_80x80.png" alt="LinkedIn_Icon_80x80.png" height="40" width="40" /></a>  <a href="https://www.youtube.com/@HeartlandBankAndTrustCompany" target="_blank"><img src="https://go.hbtbank.com/rs/381-SGM-086/images/YouTube_Icon_80x80.png" alt="YouTube_Icon_80x80.png" height="40" width="40" /></a>

Geoffrey Landrum, Marketing Automation Specialist

Dave_RobertsAccepted solution

New Participant

Thanks for sharing the code here. It looks like the image element is contained within a paragraph and that's probably what's causing the images to be cut short. Outlook will read the line-height of the paragraph and treat that as the height of the image.

Here's a bit of code to try in place of what you've posted, let me know if this helps to resolve the issue for you:

<p style="text-align: center;">
  <strong>
    <span mce-data-marked="1" style="font-family: helvetica, arial, sans-serif; color: #000000; font-size: 16px;">CONNECT WITH US</span>
  </strong>
</p>

<div style="text-align: center;">
  <strong><span mce-data-marked="1" style="font-family: helvetica, arial, sans-serif; color: #000000; font-size: 16px; line-height: 40px;">
    <a href="https://www.facebook.com/heartlandbankandtrustcompany/" target="_blank">
      <img src="https://go.hbtbank.com/rs/381-SGM-086/images/Facebook_Icon_80x80.png" alt="Facebook_Icon_80x80.png" height="40" width="40" />
    </a>&nbsp;&nbsp;
    <a href="https://www.instagram.com/hbtbank/" target="_blank">
      <img src="https://go.hbtbank.com/rs/381-SGM-086/images/Instagram_Icon_80x80.png" alt="Instagram_Icon_80x80.png" height="40" width="40" />
    </a>&nbsp;&nbsp;
    <a href="https://www.linkedin.com/company/heartland-bank-and-trust-company" target="_blank">
      <img src="https://go.hbtbank.com/rs/381-SGM-086/images/LinkedIn_Icon_80x80.png" alt="LinkedIn_Icon_80x80.png" height="40" width="40" />
    </a>&nbsp;&nbsp;
    <a href="https://www.youtube.com/@HeartlandBankAndTrustCompany" target="_blank">
      <img src="https://go.hbtbank.com/rs/381-SGM-086/images/YouTube_Icon_80x80.png" alt="YouTube_Icon_80x80.png" height="40" width="40" />
    </a></span>
  </strong>
</div>

In the code above, I've changed the 2nd element to a <div> instead of a and set the line-height of the inner (which wraps your images) to 40px to match the height of the images.

Darshil_Shah1

Community Manager

Well, you can try updating the HTML of the snippet so that the images render properly in Outlook too. Also, while you cannot make edits to the email asset (via Edit Code) which we rarely do anyways as it disassociates the email asset from the template, you can always update the email template code and re-add the updated editable modules to the email. You'd have to supply the template code (along with a few snapshots of the issue, if possible) in case you need help fixing the code.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded