Multiple items in a single loop (different items in a single TR)

  • philipt18

    (@philipt18)


    4 years ago

    I’m looking to create a table with three columns, where an image is shown in each table cell, three across, and unlimited down. So each row would show three images. Is there a simple way to grab different items in the loop in the same row? If I was doing one image per row, I would just put the <table> tags outside the loop, and have something like:

    <tr><td>[field image]</td></tr>

    inside the loop. However, now I need:

    <tr><td>[field image]</td><td>[field image]</td><td>[field image]</td></tr>

    where the three images are each grabbed from different cycles of the loop.

    I could put a second loop inside the loop like:

    <tr>
[-loop count=3]
<td>[field image]</td>
[/-loop]
</tr>

    but I would need to pass the location in the loop from the outside loop to the inside loop, which is kind of a pain. Is there a simpler way to do this? If not, what’s the best way to pass the loop position between the outside and inside loop?

    Thanks.

    • This topic was modified 4 years ago by philipt18.
    • This topic was modified 4 years ago by philipt18.
    • This topic was modified 4 years ago by philipt18. Reason: fix internal loop end tag
Viewing 6 replies - 1 through 6 (of 6 total)
  • Peter Berger

    (@peterpolow)

    Hi,

    I think you need the following if statements:

    [if first]First post[/if]
[if last]Last post[/if]
[if every=3]Every 3 posts[/if]

    Something like: 

    [if every=3]
</td></tr><tr><td>
[else]
</td><td>
[/if]

    Peter

    Thread Starter philipt18

    (@philipt18)

    Thank you. I’ll check out those tags. Right now I’m trying to figure out why the example code say this will display 4 posts at a time:

    [loop type=post]
  [if every=5 first=true]<div class="group-container">[/if]
  [field thumbnail]
  [field title]
  [if every=4 last=true]</div>[/if]
[/loop]

    but the if statement shows 5.

    Thread Starter philipt18

    (@philipt18)

    Okay, I think this is the code that does what I need:

    <table width="100%">
[loop type=post order=DESC]
[if every=4 first=true]<tr>[/if]
<td width="33%">[field image-link]</td>
[if every=3 last=true]</tr>[/if]
[/loop]
</table>

    Still not sure why the first if needs 4 instead of 3, but it seems it does.

    Thanks Peter for pointing me in the right direction.

    Thread Starter philipt18

    (@philipt18)

    I think I spoke to soon. Something weird is going on. I get two rows of three images, and then after the first image in the third row, it inserts a <TR> which messes up the layout. Now in some sense it makes sense since I have every=4 in the code, but if I set that to 3, then I only get a maximum of 2 images per row. It doesn’t make much sense. Any ideas?

    • This reply was modified 4 years ago by philipt18.
    Thread Starter philipt18

    (@philipt18)

    I’ve been thinking maybe there’s a way to do this by incrementing a variable and at every time it’s 1 insert a <tr> and every time it’s a 3 insert a </tr>, and every third time through the loop reset the variable to 0, and at the beginning of the loop increment it by one. Something like that. My brain is mush right now trying to figure it out, but maybe there’s something there.

    Thread Starter philipt18

    (@philipt18)

    Okay I think this works:

    <table style="table-layout:fixed; width: 100%;">
[set total]0[/set]
[loop type=post order=DESC]
[calc]total = total + 1[/calc]
[if var=total value=1]<tr>[/if]
<td>[field image-link]</td>
[if var=total value=3]</tr>[/if]
[if var=total value=3][set total]0[/set][/if]
[/loop]
</table>
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Multiple items in a single loop (different items in a single TR)’ is closed to new replies.