Trying to Create a Staggered Design for RSS Email

SOLVE
Highlighted
Occasional Contributor

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

staggered feed.png

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!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Advisor

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.

Reply
0 Upvotes
2 Replies 2
Advisor

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.

Reply
0 Upvotes
Occasional Contributor

That worked beautifully! Thank you!

Reply
0 Upvotes