Forum for discussing general topics related to Couch.
19 posts Page 1 of 2
Hi I am looking to create a 3 column grid layout for my blog as opposed to a list.

The start of my html code has

Code: Select all
<div class="row">


Then 3 blog articles are inserted within that div where then it issues another 3 articles within another row.

Is there anyway of telling couch for every 3 blog articles to allocate a new <div class="row">?

for example I am looking to achieve

Code: Select all
<div class="row">
Blog 1
Blog 2
Blog 3
</div>

<div class="row">
Blog 4
Blog 5
Blog 6
</div>


and so on...
Hi,

There could be several ways of implementing this. One way (an adaptation of viewtopic.php?f=8&t=7262) could be as follows -
Code: Select all
<cms:set my_max_columns='3' 'global' />

<cms:pages masterpage='blog.php'>
    <cms:if k_paginated_top >
        <h5>open</h5>
    </cms:if>
   
    <h3><cms:show k_page_title /></h3>
   
    <cms:if k_paginated_bottom || "<cms:not "<cms:mod k_count my_max_columns />" />" >
        <h5>close</h5>
        <cms:if "<cms:not k_paginated_bottom />" >
            <h5>open</h5>
        </cms:if>
    </cms:if>
</cms:pages>

Replace the two 'open's and one 'close' in the code above with your markup to get the kind of layout you wanted.

Hope it helps.
<div class="row">
Blog 1
Blog 2
Blog 3
</div>

Maybe a plain simple zebra?
Code: Select all
<cms:pages>
       <cms:zebra '<div class="row">' '' '' />
              <cms:show blog_article />
        <cms:zebra '' '' '</div>' />
</cms:pages>
@trendoman
Maybe a plain simple zebra?

Problem with this approach would be that if the number of pages are not exact multiples of three, the last row will never get closed.
KK wrote: @trendoman
Maybe a plain simple zebra?

Problem with this approach would be that if the number of pages are not exact multiples of three, the last row will never get closed.

Great! Gotta care about the extremums first and not-so-sweet conditions.
How about this? It uses k_count to keep track of when to start a new DIV and k_folder_totalpagecount to know when to zip up the last DIV.
Code: Select all
<div class="row">
   <cms:pages>
      <cms:show whatever />
      <cms:if "<cms:mod k_count '3' /> == '0' && k_count lt k_folder_totalpagecount >
</div>
<div class="row">
      </cms:if>
      <cms:if k_count == k_folder_totalpagecount >
</div>
      </cms:if>
   </cms:pages>
   
@tim,

great solution! Let's make your idea working:
I'll add an external variable to avoid problem with quotes:
Code: Select all
<cms:set have_more_pages="<cms:mod k_count '3' />" />

Then change k_folder_totalpagecount to k_total_records, as first shows also unpublished pages (+1), and latter shows only real counted content. This helps to avoid unnecessary empty <div class="row"></div> after listing.
Code: Select all
<div class="row">
   <cms:pages>
      <cms:show whatever />
      <cms:set have_more_pages="<cms:mod k_count '3' />" />
      <cms:if  ( have_more_pages == '0' ) && ( k_count lt k_total_records ) >
</div>
<div class="row">
      </cms:if>
      <cms:if k_count == k_total_records >
</div>
      </cms:if>
   </cms:pages>

This is tested and confirmed.

:)
This is tested and confirmed.
Makes all the difference! :)

Thanks for taking the time to make the idea work.
Tim
Not a problem.
A nice painting needs a proper frame :)
Wow thanks for all the support in getting this working.

I'm still finding it a tad tricky to adapt it to my code though.

Here is my code, I just want for every 3 articles for a <div class="hentry-row"> to be issued that holds another 3 articles and so on.

So I will have

Blog 1 | Blog 2 | Blog 3
Blog 4 | Blog 5 | Blog 6



Code: Select all
 <cms:pages masterpage='blog.php' paginate='1' limit='6' >
                           <div class="hentry-row">
                              <article class="loadmore-item col-md-4 col-sm-6 hentry">
                                 <div class="hentry-wrap">
                                    <div class="entry-featured image-featured">
                                       <a href="<cms:show k_page_link />">
                                          <img width="700" height="350" src="<cms:show blog_image />" alt="" />
                                       </a>
                                    </div>
                                    <div class="entry-info">
                                       <div class="entry-header">
                                          <div class="date-badge">
                                             <span class="date">28</span>
                                             <span class="month-year">Oct 2014</span>
                                          </div>
                                          <h2 class="entry-title">
                                             <a href="<cms:show k_page_link />" title="<cms:show k_page_title />">
                                             <cms:show k_page_title />   
                                             </a>
                                          </h2>
                                          <div class="entry-meta">
                                             <span class="meta-author">
                                                <i class="fa fa-pencil-square-o"></i>
                                                <a href="#">Sitesao</a>
                                             </span>
                                             <span class="meta-date">
                                                <time datetime="2014-10-28T03:56:37+00:00">
                                                   <i class="fa fa-clock-o"></i><cms:date k_page_date format='jS M, y'/>
                                                </time>
                                             </span>
                                          </div>
                                       </div>
                                       <div class="entry-content">
                                          <p>
                                             <cms:excerptHTML count='75' ignore='img'>   <cms:show blog_content /></cms:excerptHTML>
                                          </p>
                                                        <p class="readmore-link text-right">
                                          <span class="date">
                                             <time datetime="<cms:date k_page_date format='jS M, y'/>">
                                                <cms:date k_page_date format='jS M, y'/>
                                             </time>
                                          </span>
                                          <a href="<cms:show k_page_link />">Read More</a>
                                       </p>
                                       </div>
                                    </div>
                                 </div>
                              </article>
                                       
                              </div>
                           </div>
                                    <cms:if k_paginated_bottom >
                        <div class="loadmore-action">
                           <div class="loadmore-loading">
                              <div class="fade-loading">
                                 <i></i><i></i><i></i><i></i>
                              </div>
                           </div>
                           <a href="<cms:show k_paginate_link_next />" class="btn-loadmore">Load More</a>
                        </div>
                     </div>
                            </cms:if>
                            </cms:pages>
19 posts Page 1 of 2
cron