Trying to Create a Staggered Design for RSS Email

[IDArici]

I want to create a staggered RSS email (maximum of 5 posts) that looks like this:

So far, I've been able to get the image to the left of the text with the code below.

{% set posts = blog_recent_posts('default', 5) %}
<table>
{% for post in posts %}
  <tr>
  <td><img src="{{ post.featured_image }}"></td>
  <td></td>
    <td style="border-collapse:collapse; mso-line-height-rule:exactly; font-family:Arial, sans-serif; font-size:15px; color:#444444; word-break:break-word"><h2><a href="{{post.absolute_url}}">{{ post.name }}</a></h2><div>
    {{ post.blog_post_author }}  {{ post.publish_date }}
    <p>
    {{ post.post_summary }}
    </p>
    <p>
      <a href="{{ post.url }}" style="color:#00b38a; font-weight:bold" target="_blank">Read More >></a>
    </p>
    </div>
    </td></tr>
{% endfor %}  
</table>

The problem is, this format is applied to all the posts in the feed. Is there a way to get it to automatically switch with every other post? Or is there a way that I can manually stagger the posts but still have them auto-populate?

Thanks!

[Kevin-C · Accepted solution]

Hey @IDArici 

You could drop some conditional logic into the hubl. Disclaimer I've not done this myself, but the idea should be sound!

Maybe somthing like this:

{% set posts = blog_recent_posts('default', 5) %}
    <table>
      {% for post in posts %}

      {% set i = loop.index % 2 %} 

      {% if i == 1 %}{# if odd use this code #}
      <tr>
        <td><img src="{{ post.featured_image }}"></td>
        <td></td>
        <td style="border-collapse:collapse; mso-line-height-rule:exactly; font-family:Arial, sans-serif; font-size:15px; color:#444444; word-break:break-word"><h2><a href="{{post.absolute_url}}">{{ post.name }}</a></h2><div>
          {{ post.blog_post_author }}  {{ post.publish_date }}
          <p>
            {{ post.post_summary }}
          </p>
          <p>
            <a href="{{ post.url }}" style="color:#00b38a; font-weight:bold" target="_blank">Read More >></a>
          </p>
          </div>
        </td>
      </tr>
      
      {% else %} {# else (even) use this code #}
      
      <tr>
        <td style="border-collapse:collapse; mso-line-height-rule:exactly; font-family:Arial, sans-serif; font-size:15px; color:#444444; word-break:break-word"><h2><a href="{{post.absolute_url}}">{{ post.name }}</a></h2><div>
          {{ post.blog_post_author }}  {{ post.publish_date }}
          <p>
            {{ post.post_summary }}
          </p>
          <p>
            <a href="{{ post.url }}" style="color:#00b38a; font-weight:bold" target="_blank">Read More >></a>
          </p>
          </div>
        </td>
        <td></td>
        <td><img src="{{ post.featured_image }}"></td>
      </tr>
      {% endif %}
      {% endfor %}  
    </table>

The '%' operator returns the remainder from dividing numbers.

If the remander is equal to 1, than the number is odd, and if not it is false.

So every other index should be even or odd, allowing us to switch back and forth.

[IDArici]

That worked beautifully! Thank you!