How tile images using @index in Template7

I have a set of images I want to tile using the column layout in F7. During the loop in the template I want to have the items fill in each row, then start a new row and then at the end finish with a final div if needed. I am not getting the js_if to work well with the @index value.

Here is my attempt for creating the rows. I have not added logic for deciding whether a final div is needed but welcome the help on that.

<div class="page-content">
    <div class="row">
    {{#each stories}}
    {{js_if "@index % 3 === 2"}}
        <div class="col-33">last item</div>
    <div class="row">
        <div class="col-33">item</div>

What I am getting is multiple rows that say ‘last item’ which means my js_if logic is always returning true

  • Better refactor stories array/object to be an array of arrays, then you will just have 2 each one for rows and nested for cols
  • Or, even better keep everything in single row, and you will be able to make them responsive, e.g. col-33 medium-25

Both sound like good approaches. If its a near endless list of items (photos) and I want to just load 30 and then lazy load the next set of 30 when I scroll to the end, how would you suggest? Its like I want the virtual items features but with an instagram-like display of images (3 across).

Also, was I using @index incorrectly?

Doesn’t matter, just use one of the approaches. If you ask how to do that loading, there is an Infinite scroll for this