HELP: Custom Email Module - Center Image Field

Develop, Build & Integrate CMS Development
, ,
1

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…

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

Here’s what I got currently:

34942i1EA9902FB01C7441.PNG.jpg
34942i1EA9902FB01C7441.PNG.jpg999×466 88.5 KB

Module Code

And how that appears in the email:

34944i2FF9CAEDC5B96ADB.PNG
34944i2FF9CAEDC5B96ADB.PNG999×418 132 KB

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?

2

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 :grinning_face:

3

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

THANK YOU! :sweat_smile:

4

@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>
5

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. :nerd_face:

6

@Abirch , you should totally add that code here!

Slanted sections in email??? WIZARDRY!!!

7

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. :blush:

35132iF38B92C158B0FC28.png
35132iF38B92C158B0FC28.png400×292 33.1 KB

<!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>