How tile images using @index in Template7

Questions
1

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>
    <div class="row">
    {{else}}
        <div class="col-33">item</div>
    {{/js_if}}
    {{/each}}
</div>

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

2
  • 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
3

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?

4

Doesn’t matter, just use one of the approaches. If you ask how to do that loading, there is an Infinite scroll for this https://framework7.io/docs/infinite-scroll.html