Custom Email Module with 2 Column Repeater

Develop, Build & Integrate CMS Development
1

I am trying to create a custom email module that will output 2 columns.

If there are more than 2 items in my repeater, the items show in a single row. (See Here) Any ideas how to achive this for a responsive email? CSS float is not supported in outlook email so cant use it.

My current code looks like:

<div class="hse-column-container">
{% for item in module.yacht_photos %}	
<!--[if (mso)|(IE)]>
 <table align="center" style="width:600px;" cellpadding="0" cellspacing="0" role="presentation" width="600">
 <tr>
<![endif]-->
 {# ---- COLUMN ---- #}
 <!--[if (mso)|(IE)]>
 <td valign="top" style="width:300px;">
 <![endif]-->
 <!--[if gte mso 9]>
 <table role="presentation" width="300" cellpadding="0" cellspacing="0" style="width:300px">
 <![endif]-->
 <div class="hse-column hse-size-6">
 <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr>
 <td class="hs_padded" style="padding: 5px 5px 5px 5px;">
 <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr>
 <td style="background-color:#00204e; padding: 10px 10px;text-align:center;">
 <a href="mailto:{{ item.broker.columns.email }}" style="color:#fff;text-decoration:none;">
 <img src="{{ item.columns.hero_photo.url }}" style="width:100%;">
 </a>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <!--[if gte mso 9]>
 </table>
 <![endif]-->
 <!--[if (mso)|(IE)]>
 </td>
 <![endif]-->
{% endfor %}
</div>
2

Hello @SStrachan and welcome to the forum.
First things first, you should do the iteration inside the <tbody> tag so you could control the number of rows/column you produce, right now what happens according to the code is that you are creating, so you will end up with a code for the module that looks like below:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
 <tr>
 {% for item in module.yacht_photos %}
 <td align="center" valign="top" width="50%" class="templateColumnContainer">
 <table border="0" cellpadding="10" cellspacing="0" width="100%">
 <tr>
 <td class="rightColumnContent">
 <a href="mailto:{{ item.broker.columns.email }}" style="color:#fff;text-decoration:none;">
 <img src="{{ item.columns.hero_photo.url }}" width="280" style="max-width:280px;" class="columnImage">
 </a>
 </td>
 </tr>
 </table>
 </td>
 {% endfor %}
 </tr>
</table>

And then inside your email template in the style tag put the following css:

 /*<![CDATA[*/
 /* everything in this style tag will be inlined onto matching elements */
 @media only screen and (max-width: 480px){
 #templateColumns{
 width:100% !important;
 }

 .templateColumnContainer{
 display:block !important;
 width:100% !important;
 }

 .columnImage{
 height:auto !important;
 max-width:480px !important;
 width:100% !important;
 }

 .leftColumnContent{
 font-size:16px !important;
 line-height:125% !important;
 }

 .rightColumnContent{
 font-size:16px !important;
 line-height:125% !important;
 }
 }
 /*]]>*/

This should create the responsive email.
Note: I’m using heavily mailchimp’s reccommendation on this topic as I aknowledge them as masters of email technology :face_with_tongue: you can find more info in this link
If my answer was helpful please mark it as a solution

3

@miljkovicmisa They are still showing all in one line. See Here

4

Hey there @SStrachan, I probably don’t get what you need to accomplish, your screenshot shows three items in a row, and you mention you need the items in one row, this is quite the result I’m getting. can you share a picture with three or more items with the result you need on desktop and on mobile?

5

Hi @SStrachan ,
Yes repeater is not working in email templates. You just need drag same email temlapte or set default template for second 2 column.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

6

@webdew What do you mean the repeater is not working in email templates? The repeater is working for me, I am just having trouble with the html wrapping the items to be 2 columns.

7

@SStrachan Not sure have your fields set up but you’ll want Yacht Photos as a group repeater and then Columns as a group repeater with hero photo and broker email inside the column repeater. Like so:

2columnrows.png
2columnrows.png312×301 9.24 KB

Then in your code you’ll have a for loop for the rows (place the hse-column-container inside this for loop as well) and a for loop for the columns. Also, put a width on your images else they’ll oveflow the body if they’re too big.

{% for item in module.yacht_photos %}	
<div class="hse-column-container">
<!--[if (mso)|(IE)]>
 <table align="center" style="width:600px;" cellpadding="0" cellspacing="0" role="presentation" width="600">
 <tr>
<![endif]-->
 {% for col in item.columns %}
 {# ---- COLUMN ---- #}
 <!--[if (mso)|(IE)]>
 <td valign="top" style="width:300px;">
 <![endif]-->
 <!--[if gte mso 9]>
 <table role="presentation" width="300" cellpadding="0" cellspacing="0" style="width:300px">
 <![endif]-->
 <div class="hse-column hse-size-6">
 <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr>
 <td class="hs_padded" style="padding: 5px 5px 5px 5px;">
 <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr>
 <td style="background-color:#00204e; padding: 10px 10px;text-align:center;">
 <a href="mailto:{{ col.broker_email }}" style="color:#fff;text-decoration:none;">
 <img src="{{ col.hero_photo.src }}" width="250">
 </a>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <!--[if gte mso 9]>
 </table>
 <![endif]-->
 <!--[if (mso)|(IE)]>
 </td>
 <![endif]-->
 {% endfor %}
 <!--[if gte mso 9]>
 </tr></table>
 <![endif]-->
</div>
{% endfor %}