Bootstrap foreach loop

Question

I have somethink like this.

<div id="main_categories" class="row" data-equalizer>
    {foreach key=row item=category from=$results}   
    <div class="product col-xs-6 col-sm-3 col-md-3 col-lg-3">
        <div class="thumbnail clearfix text-center">
            <div class="image" data-equalizer-watch="image">{$category.photo}</div>
            <div class="caption" data-equalizer-watch="caption">
              <h3 class="name">{$category.name}</h3>
              {if $category.subcategories}
              <p class="hidden-xs">
                  {foreach key=row item=category_subcategories from=$category.subcategories} 
                      <span class="subcategory">{$category_subcategories.name}</span>
                  {/foreach}
              </p>
              {/if}
            </div>
        </div>
    </div>  
{/foreach}

</div>

Is there any chance that the 3th and 4th or second and 3th photos appear in different ways not col-lg-3 but col-lg-6?

Please include the name of your template language in the question and add its tag (if available). This does not seem like standard HTML functionality. — SeinopSys, Mar 15 '19 at 23:47
I use https://www.soteshop.com/. It is part of code which let me show categories with pictures on the home page — aagaatkaaa, Mar 16 '19 at 08:18

score 0 · Answer 1 · answered Mar 16 '19 at 11:07

After a bit of digging I've found that SoteShop runs on PHP, and out of the couple most popular template languages this looks the most similar to Dwoo.

Looking through the documentation and piecing together the syntax leads me to believe that the following should work:

<div id="main_categories" class="row" data-equalizer>
    {foreach key=row item=category from=$results}
    {* 3rd and 4th elements (index 2 and 3) *}
    {if $.foreach.default.index == 2 || $.foreach.default.index == 3}
        {assign 6 lgcol}
    {else}
        {assign 3 lgcol}
    {/if}
    <div class="product col-xs-6 col-sm-3 col-md-3 col-lg-{$lgcol}">
        <div class="thumbnail clearfix text-center">
            <div class="image" data-equalizer-watch="image">{$category.photo}</div>
            <div class="caption" data-equalizer-watch="caption">
              <h3 class="name">{$category.name}</h3>
              {if $category.subcategories}
              <p class="hidden-xs">
                  {foreach key=row item=category_subcategories from=$category.subcategories} 
                      <span class="subcategory">{$category_subcategories.name}</span>
                  {/foreach}
              </p>
              {/if}
            </div>
        </div>
    </div>  
    {/foreach}
</div>

Bootstrap foreach loop

1 Answers1