Olá! Nós temos uma Comunidade em Português!

Trying to Create a Staggered Design for RSS Email

resolver
Highlighted
Berater

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!

Responder
0 Avaliação positiva
1 Solução aceita

Soluções aceitas
Profi

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.

Responder
0 Avaliação positiva
2 Respostas 2
Profi

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.

Responder
0 Avaliação positiva
Berater

That worked beautifully! Thank you!

Responder
0 Avaliação positiva