Custom Email Module with 2 Column Repeater

[SStrachan]

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>

[alyssamwilie · Accepted solution]

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



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 %}

[webdew]

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. 

[SStrachan]

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

[miljkovicmisa]

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 😛 you can find more info in this link

If my answer was helpful please mark it as a solution

[SStrachan]

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

[miljkovicmisa]

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?