CMS Development

IDArici
Participante

Trying to Create a Staggered Design for RSS Email

resolver

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!

0 Avaliação positiva
1 Solução aceita
Kevin-C
Solução
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

Trying to Create a Staggered Design for RSS Email

resolver

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

Exibir solução no post original

0 Avaliação positiva
2 Respostas 2
Kevin-C
Solução
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

Trying to Create a Staggered Design for RSS Email

resolver

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Avaliação positiva
IDArici
Participante

Trying to Create a Staggered Design for RSS Email

resolver

That worked beautifully! Thank you!

0 Avaliação positiva