HELP: Custom Email Module - Center Image Field

Abirch · ‎Dec 2, 2020

Hello,

In anticipation for the switch to the new drag and drop email editor I am creating a custom module for emails that consists of a background, an image field and a rich text field. In writting the HTML for the module and nothing I have tried has been able to center the image. I've tried quite a few things...

Creating a class attribute to center align
Using auto left & right margins in the style of the image (by itself and in cobination with #3)
Using justfy and align properties to style the <div> block (by itself and in cobination with #2)

Here's what I got currently:

Module Code

And how that appears in the email:

Appears in Email

Note: as you can see no option to edit the image alignment when selected or in the left-side window.

Before anyone says it, HubSpot does not seem to allow you to add images through the rich text fields using the new email editor. I tried that route already. They also don't seem to give the option to center the image in the email edit functions anymore either...

My theory is that there is something in the image field snippet that is overriding my desire for center alignment because when I try to load the image it centers for .25 of a second. Any suggestion on what the issue may be, what I can try next to fix it or a workaround?

Abirch · ‎Dec 8, 2020

Yeah, I can share with the class!

I put the image field & rich text field in table cells stacked on top of eachother with the cell background formatted for our brand color. Then I sandwhiched them between a top slant image and a bottom slant image in cells above and below. I tested it out using the client test in the email preview and it showed up for all of the clients our demographic uses.

Always open for improvements is anyone has an idea. 😊

<!DOCTYPE html>
<html>
<table role="presentation" cellpadding="0" cellspacing="0" style="border-spacing:0 !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt">
  <tbody>
    <tr>
      <td>

<!-- Top Slant -->
        <img src="https://content.infogressive.com/hubfs/%23003963%20Slant_Top.png" alt="slant" style="display:block;"> 
      </td>
    </tr>
    <tr>
      <td align="center" style="background-color: #003963; border-collapse:collapse; font-size:0px">

<!-- Image -->  
  {% if module.image_field.src %}
	  {% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %}
	    {% if module.image_field.size_type == 'auto' %}
		    {% set sizeAttrs = 'style="max-width: auto%; height: auto;"' %}
	      {% elif module.image_field.size_type == 'auto_custom_max' %}
		    {% set sizeAttrs = 'width="auto" height="auto" style="max-width: {{ module.image_field.max_width }}px; max-height: {{ module.image_field.max_height }}px"'%}
	    {% endif %}
	  {% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}  
        <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }} style="outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; max-width:auto;" align="middle">
  {% endif %}
      </td>
    </tr>
    <tr>
      <td align="center" style="background-color: #003963"; border-collapse:collapse; font-size:0px>

<!-- Rich Text Field -->  
    <p>{{ module.richtext_field }}</p>        
      </td>
    </tr>
    <tr>
      <td>

<!-- Bottom Slant -->
        <img src="https://content.infogressive.com/hubfs/%23003963%20Slant_Bottom.png" alt="slant" style="display:block;"> 
      </td>
    </tr>
  </tbody>
</table>
</html>

View solution in original post

alyssamwilie · ‎Dec 3, 2020

@Abirch Email is stuck in the 90s, tables are your friend. If you put your image in a table and add align="center" to your table cell it should center the image. I'd suggest writing the entire module in tables though as using just divs tends to never work very well cross-client. Will also note that clip-path isn't supported in most email clients.

An example:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0 !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt">
  <tbody>
    <tr>
      <td align="center" valign="top" style="border-collapse:collapse; font-size:0px">
          <img src="" style="outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; max-width:100%;" width="520" align="middle">
      </td>
    </tr>
  </tbody>
</table>

If this answer solved your question, please mark it as the solution.

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

Lynton's HubSpot theme Rubric now available. Click to download.

Abirch · ‎Dec 7, 2020

Thank you for your input!

I had not thought of using a table to help me with my formatting troubles. I ran with your suggestions a bit and was able to further improve my module so that my slanted sections shows for all email clients. 🤓

dennisedson · ‎Dec 7, 2020

@Abirch , you should totally add that code here!

Slanted sections in email???? WIZARDRY!!!

Abirch · ‎Dec 8, 2020

Yeah, I can share with the class!

I put the image field & rich text field in table cells stacked on top of eachother with the cell background formatted for our brand color. Then I sandwhiched them between a top slant image and a bottom slant image in cells above and below. I tested it out using the client test in the email preview and it showed up for all of the clients our demographic uses.

Always open for improvements is anyone has an idea. 😊

<!DOCTYPE html>
<html>
<table role="presentation" cellpadding="0" cellspacing="0" style="border-spacing:0 !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt">
  <tbody>
    <tr>
      <td>

<!-- Top Slant -->
        <img src="https://content.infogressive.com/hubfs/%23003963%20Slant_Top.png" alt="slant" style="display:block;"> 
      </td>
    </tr>
    <tr>
      <td align="center" style="background-color: #003963; border-collapse:collapse; font-size:0px">

<!-- Image -->  
  {% if module.image_field.src %}
	  {% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %}
	    {% if module.image_field.size_type == 'auto' %}
		    {% set sizeAttrs = 'style="max-width: auto%; height: auto;"' %}
	      {% elif module.image_field.size_type == 'auto_custom_max' %}
		    {% set sizeAttrs = 'width="auto" height="auto" style="max-width: {{ module.image_field.max_width }}px; max-height: {{ module.image_field.max_height }}px"'%}
	    {% endif %}
	  {% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}  
        <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }} style="outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; max-width:auto;" align="middle">
  {% endif %}
      </td>
    </tr>
    <tr>
      <td align="center" style="background-color: #003963"; border-collapse:collapse; font-size:0px>

<!-- Rich Text Field -->  
    <p>{{ module.richtext_field }}</p>        
      </td>
    </tr>
    <tr>
      <td>

<!-- Bottom Slant -->
        <img src="https://content.infogressive.com/hubfs/%23003963%20Slant_Bottom.png" alt="slant" style="display:block;"> 
      </td>
    </tr>
  </tbody>
</table>
</html>

dennisedson · ‎Dec 3, 2020

Hey @Abirch ,

Are you still working on this?

Perhaps you are already aware, but be careful with margin and flex in email. Here is a great resource for css support in email.

On your parent div, you might try text-align: center.

@alyssamwilie for some reason enjoys coding emails. Maybe she has some further insights 😀

Abirch · ‎Dec 3, 2020

Adding text-align: center to my div block worked! I thought I had already tried that route, but apparently not...

THANK YOU! 😅

CMS Development