Is there a way to create this layout that's attached in the image using repeatable regions so the 2nd row has a larger first column width and the third row has a larger middle column on the front end. I'm using bootstrap so makes it bit easier with the column width

Below is the current non couchcms code

Code: Select all

<section class="gallery-section">
    <div class="auto-container">
        <div class="video-gallery">
            <img src="https://www.beechwoodsolutions.co.uk/sites/ronby-security/two/cms/uploads/image/home-page-images/various-security-systems.jpg" alt="" />
            <div class="overlay-box">
                <div class="overlay-inner">
                    <a href="#" class="lightbox-image video-box"></a>
                    <h3><a href="#">Get first class service &amp; high quality security solutions from Ronby Security Ltd</a></h3>
                    <div class="text">
                        <p>With the latest wired and wireless technology, why not <a href="https://www.beechwoodsolutions.co.uk/sites/ronby-security/two/contact.php">contact us</a> for a tailored package to your requirements.</p>                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="gallery-block col-lg-4 col-md-6 col-sm-12">
                <div class="inner-box">
                    <div class="image">
                        <img src="assets/images/gallery/roller-shutters.jpg" alt="" />
                        <div class="overlay-box">
                            <div class="overlay-inner">
                                <div class="content">
                                    <h4><a href="roller-shutters-steel-doors.php">Roller Shutters &amp; Steel Doors</a></h4>
                                    <div class="category">Commercial</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gallery-block col-lg-4 col-md-6 col-sm-12">
                <div class="inner-box">
                    <div class="image">
                        <img src="assets/images/gallery/roller-garage-doors.jpg" alt="" />
                        <div class="overlay-box">
                            <div class="overlay-inner">
                                <div class="content">
                                    <h4><a href="remote-roller-garage-doors.php">Remote Roller Garage Doors</a></h4>
                                    <div class="category">Commercial &amp; Domestic</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gallery-block col-lg-4 col-md-6 col-sm-12">
                <div class="inner-box">
                    <div class="image">
                        <img src="assets/images/gallery/automatic-doors.jpg" alt="" />
                        <div class="overlay-box">
                            <div class="overlay-inner">
                                <div class="content">
                                    <h4><a href="automatic-doors.php">Automatic Doors</a></h4>
                                    <div class="category">Commercial</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gallery-block col-lg-8 col-md-12 col-sm-12">
                <div class="inner-box">
                    <div class="image">
                        <img src="assets/images/gallery/gates-barriers.jpg" alt="" />
                        <div class="overlay-box">
                            <div class="overlay-inner">
                                <div class="content">
                                    <h4><a href="gates-barriers.php">Gates &amp; Barriers</a></h4>
                                    <div class="category">Commercial</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gallery-block col-lg-4 col-md-6 col-sm-12">
                <div class="inner-box">
                    <div class="image">
                        <img src="assets/images/gallery/access-control.jpg" alt="" />
                        <div class="overlay-box">
                            <div class="overlay-inner">
                                <div class="content">
                                    <h4><a href="access-control.php">Access Control</a></h4>
                                    <div class="category">Commercial</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gallery-block col-lg-3 col-md-6 col-sm-12">
                <div class="inner-box">
                    <div class="image">
                        <img src="assets/images/gallery/intercoms.jpg" alt="" />
                        <div class="overlay-box">
                            <div class="overlay-inner">
                                <div class="content">
                                    <h4><a href="intercoms.php">Intercoms</a></h4>
                                    <div class="category">Commercial</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gallery-block col-lg-6 col-md-12 col-sm-12">
                <div class="inner-box">
                    <div class="image">
                        <img src="assets/images/gallery/cctv.jpg" alt="" />
                        <div class="overlay-box">
                            <div class="overlay-inner">
                                <div class="content">
                                    <h4><a href="cctv.php">CCTV</a></h4>
                                    <div class="category">Commercial &amp; Domestic</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gallery-block col-lg-3 col-md-6 col-sm-12">
                <div class="inner-box">
                    <div class="image">
                        <img src="assets/images/gallery/maintenance.jpg" alt="" />
                        <div class="overlay-box">
                            <div class="overlay-inner">
                                <div class="content">
                                    <h4><a href="24hr-call-out-planned-maintenance.php">24hr Call Out & Planned Maintenance</a></h4>
                                    <div class="category">Commercial &amp; Domestic</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

UPDATE: I just managed to solve it with the following code

Code: Select all

<cms:show_repeatable 'serviceboxes' >
            <cms:set my_count="<cms:zebra '1' '2' '3' '4' '5' '6' '7' '8' />" />
            <cms:if my_count='1'>
                <div class="row clearfix">
                    </cms:if>
                <div class="<cms:zebra 'gallery-block col-lg-4 col-md-6 col-sm-12' 'gallery-block col-lg-4 col-md-6 col-sm-12' 'gallery-block col-lg-4 col-md-6 col-sm-12' 'gallery-block col-lg-8 col-md-12 col-sm-12' 'gallery-block col-lg-4 col-md-6 col-sm-12' 'gallery-block col-lg-3 col-md-6 col-sm-12' 'gallery-block col-lg-6 col-md-12 col-sm-12' 'gallery-block col-lg-3 col-md-6 col-sm-12' />">
                    <div class="inner-box">
                        <div class="image">
                            <img src="<cms:show service_image/>" alt="" />
                            <div class="overlay-box">
                                <div class="overlay-inner">
                                    <div class="content">
                                        <h4><a href="<cms:show service_heading_link/>"><cms:show service_heading_text/></a></h4>
                                        <div class="category"><cms:show service_category/></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <cms:if my_count='8' || k_count=k_total_records>
                    </div>
            </cms:if>
        </cms:show_repeatable>

[KK]

I was in the process of posting a solution (also using <cms:zebra>) but you beat me to it

I was in the process of posting a solution (also using <cms:zebra>) but you beat me to it

Oops Sorry KK but thank you so much for replying and taking the time to post a solution, appreciate it.

Hopefully will be ok from now with the rest of the site but if I get stuck again I'll create a new post