# Trying to Create a Staggered Design for RSS Email

**URL:** <https://community.hubspot.com/t/trying-to-create-a-staggered-design-for-rss-email/16640>\
**Category:** CMS Development\
**Created:** [October 8, 2019, 9:53pm UTC](https://community.hubspot.com/t/trying-to-create-a-staggered-design-for-rss-email/16640 "2019-10-08T21:53:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![IDArici](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/idarici/32/81360_2.png) [@IDArici](https://community.hubspot.com/u/IDArici)\
**Post date:** [October 8, 2019, 9:53pm UTC](https://community.hubspot.com/t/trying-to-create-a-staggered-design-for-rss-email/16640/1 "2019-10-08T21:53:26Z")

</div>

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

 ![staggered feed.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/9/09bc550a0b02459291c33fe3c4ca77fe57d3fc5d.png)

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

```auto
{% 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!

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [October 10, 2019, 4:51pm UTC](https://community.hubspot.com/t/trying-to-create-a-staggered-design-for-rss-email/16640/2 "2019-10-10T16:51:35Z")

</div>

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:

```auto
{% 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.](https://designers.hubspot.com/docs/hubl/operators-and-expression-tests)

[If the remander is equal to 1, than the number is odd, and if not it is false.](https://www.quora.com/How-do-I-check-if-a-number-is-even-or-odd)

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

---

<div class="post-metadata">

**Author:** ![IDArici](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/idarici/32/81360_2.png) [@IDArici](https://community.hubspot.com/u/IDArici)\
**Post date:** [October 10, 2019, 10:01pm UTC](https://community.hubspot.com/t/trying-to-create-a-staggered-design-for-rss-email/16640/3 "2019-10-10T22:01:17Z")

</div>

That worked beautifully! Thank you!