Assign different classes to alternating blog posts?
resolver
Hello there.
I'm trying to figure out how to apply two different css classes to my blog post entries as they are generated.
In the code below, I have <div class="post-item"> and I would like to append a class to each instance to affect the width of the post.
So the first one would be: <div class="post-item width-one-third"> and the second would be <div class="post-item two-thirds">.
I'm still feeling my way around the HUBL markup so I'm not sure how to approach this.
Any help is appreciated.
{% for content in contents %}
<div class="post-item">
{% if not simple_list_page %}
<div class="post-item-inner">
<div class="features-image-block">
<a href="{{content.absolute_url}}">...
Assign different classes to alternating blog posts?
resolver
@MrCapp I think you could further use the 'cycle' tag in this case as it's not limited only up to two values. In fact, we could add multiple. For example:
{% for content in contents %}
<div class="post-item {% cycle 'width-one-third','width-two-thirds', 'width-two-thirds','width-one-third' %}">
Assign different classes to alternating blog posts?
resolver
Hey lgerodiaz - thanks for your answer - that worked perfectly. That seems to be a simpler method than tjoyce's answer although that also worked just fine.
However what I didn't realize was that those classes would be applied the same way for each row of content.
Now I need the classes to reverse for the following row and then keep going back and forth until all the rows of content have been generated. Does that make sense?
The layout on the Hubspot blog shows what I'm trying to get to.
Assign different classes to alternating blog posts?
resolver
@MrCapp I think you could further use the 'cycle' tag in this case as it's not limited only up to two values. In fact, we could add multiple. For example:
{% for content in contents %}
<div class="post-item {% cycle 'width-one-third','width-two-thirds', 'width-two-thirds','width-one-third' %}">