Irregular Post Loop with different classes

1

Hi guys,
how can I make an irregular loop where at any second item it assigns a different class. What I want to do is something like that:

05
Screen Shot 2018-01-23 at 16.35.05.png493×740 119 KB

the first post article (the big one) is:

<article class="work-item work-item-big">
code ...
</article>

the second one (the small one) is:

<article class="work-item work-item-small">
code ...
</article>

What’s the way to make it and obviously what are the conditions to apply in the loop?

Thank you in advance.
Manny

2

lots of info here:

I would think you could test the index in the loop to see if it is odd or even somehow.

3

Yes I tried but I can’t make in the loop all the time the second with different class. Basically I need something like:

.big .small .big .small .big .small etc …

4

post your code.

I think in the main for loop you would have an if/else that checks if there is a modulo when you divide the index by 2?

here is a stack overflow answer that sort of does it but with a different source for the number:

5

Ehm hey @rdyar it’s not proper clear what you said

6

what have you tried - what is your current not working code for the loop?

I’m saying your big/small/big/small could be odd/eve/odd/even of the index of the items in the for loop.

How you actually do this, off the top of my head I can’t tell you, but I think there is a way to check the index of the item you are on to see if it is odd or even (most likely using the modulo which tells you if there is a remainder when you divide one thing by another (if the index is even then there is no modulo) - then if it is odd your css class is xyz, else it is (even) zyx.

7

even better link, to me this is exaclty what you are looking for:

8

Another approach would be to do it purely with CSS. You can use the nth-child selectors to target even, odd, or any other position.

Where this solution falls apart is if you want to spit out different code for the various work items in the loop. But if the HTML is similar for all and you’re just looking to make cosmetic changes like vary widths, this will work.

2 Likes
9

@mmistakes great that’s a very good idea, but I have to apologize with you guys because the sequence I need is the one above:

.big .small .small .big .big .small .small .big etc …

10

ah. The plot thickens.

So the first one is once then it is twice/twice/twice from then on? using the opposite one each time.

I think MMs idea is best, maybe this answer for everything except the first one. I’m not so good at that type of css but I think it is doable with some experimentation.

11

Cheers @rdyar … at the end I’m doing manually in this way

.work-item {
    width: span(6 of 10);
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(6) {
        width: span(4 of 10);
    }

cause I know the limit is 6 posts. It’s a shame I can’t find the solution with some math to make it possible.

12

I’m sure you could do it in liquid- its just a matter of effort. You could probably have a counter and reset it when it gets to 2 or something (I am not so good at algorithims). Liquid can do a lot with assigning variables and what not. Also, the more of that you do in liquid the more it slows the build time (not an issue with 6 though). Using css to do it seems like the smarter way.

That link above would work as far as I can tell, rather than doing it manually as you are it is doing every 4th and 4th-1 and that gets you every other 2.

1 Like
13

So something like that:
.work-item {
width: span(6 of 10);
&:nth-child(4),
&:nth-child(4n-1) {
width: span(4 of 10);
}

:roll_eyes: