I have a grid layout that shows 4 images per row in a container. Unfortunately, I cannot put all images in one row, as the image grid would break in some browsers.

Hence, after displaying 4 images in one row and container, I want to display the next four images in a new row with their own container using a repeatable region:

Code: Select all

<cms:repeatable name='latestwork_images' label='Latest Work' >
      <cms:editable name='latestwork_image'
                    label='Image (458 x 286 pixel)'
                    type='image'
                    width='458' 
                    height='286'
                    show_preview='1' 
                    preview_width='150'
                    input_width='200' 
                    col_width='300' 
                    order='11' />

      <cms:editable name='latestwork_title' label='Title'
                    type='text' 
                    order='12' />

      <cms:editable name='latestwork_description' label='Description'
                    height='40'
                    type='textarea' 
                    order='13' />
    </cms:repeatable>

The HTML-markup should look like this:

Code: Select all

<div class="row">

          <div class="container">

            <div class="col-xs-12 col-sm-6 col-md-3">

              <a href="work.php"><img src="public/assets/img/latest_work1.png" class="img-responsive" alt="Responsive image"></a>
             
              <h4>Title</h4>

              <p class="text-muted">Description</p>

            </div>
            
            <div class="col-xs-12 col-sm-6 col-md-3">

              <a href="work.php"><img src="public/assets/img/latest_work2.png" class="img-responsive" alt="Responsive image"></a>

              <h4>Title</h4>

              <p class="text-muted">Description</p>

            </div>
    
            <div class="col-xs-12 col-sm-6 col-md-3">

              <a href="work.php"><img src="public/assets/img/latest_work3.png" class="img-responsive" alt="Responsive image"></a>

               <h4>Title</h4>

              <p class="text-muted">Description</p>

            </div>

            <div class="col-xs-12 col-sm-6 col-md-3">

              <a href="work.php"><img src="public/assets/img/latest_work4.png" class="img-responsive" alt="Responsive image"></a>

              <h4>Title</h4>

              <p class="text-muted">Description</p>

            </div> 

          </div>

        </div>



<div class="row">

          <div class="container">

            <div class="col-xs-12 col-sm-6 col-md-3">

              <a href="work.php"><img src="public/assets/img/latest_work1.png" class="img-responsive" alt="Responsive image"></a>
             
               <h4>Title</h4>

              <p class="text-muted">Description</p>

            </div>
            
            <div class="col-xs-12 col-sm-6 col-md-3">

              <a href="work.php"><img src="public/assets/img/latest_work2.png" class="img-responsive" alt="Responsive image"></a>

               <h4>Title</h4>

              <p class="text-muted">Description</p>

            </div>
    
            <div class="col-xs-12 col-sm-6 col-md-3">

              <a href="work.php"><img src="public/assets/img/latest_work3.png" class="img-responsive" alt="Responsive image"></a>

               <h4>Title</h4>

              <p class="text-muted">Description</p>

            </div>

            <div class="col-xs-12 col-sm-6 col-md-3">

              <a href="work.php"><img src="public/assets/img/latest_work4.png" class="img-responsive" alt="Responsive image"></a>

              <h4>Title</h4>

              <p class="text-muted">Description</p>

            </div> 

          </div>

        </div>

Would appreciate your guidance how to get this working.

[KK]

Hi JD,

Here is some sample code that shows how we can do that (please make sure to use the correct name for the repeatable region and its children) -

Code: Select all

<cms:show_repeatable 'slider' >
    <cms:set my_counter="<cms:zebra '1' '2' '3' '4' />" scope='global' />
    
    <cms:if my_counter='1' >
        <!-- open row -->
        <div class="row">
        <div class="container">
    </cms:if>
    
        <div class="col-xs-12 col-sm-6 col-md-3">
            <h2><cms:show slider_text /></h2>
        </div>
    
    <cms:if my_counter='4' >
        <!-- close row -->
        </div>
        </div>
    </cms:if>
    
</cms:show_repeatable>

<!-- close row if items not divisible by 4 -->
<cms:if my_counter != '4' >
    </div>
    </div>
</cms:if>

To explain the code -
The following statement sets up a counter that starts from 1, goes up to 4 and then trips back to 1 and the cycle continues.

Code: Select all

<cms:set my_counter="<cms:zebra '1' '2' '3' '4' />" scope='global' />

So suppose there are 9 rows in the repeatable region, the counter will output -
1, 2, 3, 4, 1, 2, 3, 4, 1

We make use of the counter to output the wrapper DIVs ('row' and 'container') when the counter is 1 and close both the divs when the counter is '4'.

This has the effect of enclosing every four rows within the wrapper divs (which is what you need).

In case the number of rows are not a multiple of 4, say there are only 9 rows, the last wrapper DIVs will contain only 1 row and, since the counter will never reach 4, the divs will not get closed.

To account for this situation, we do a final check outside the show_repeatable block for the last value held by the counter. If it is less than 4, we close the divs -

Code: Select all

<!-- close row if items not divisible by 4 -->
<cms:if my_counter != '4' >
    </div>
    </div>
</cms:if>

Hope this helps. Do let us know.
Thanks.

That worked perfectly. Thanks.