Hi

I was wondering how would I make the blog_list.html appear in grid format so I have two columns side by side instead of the blog being in rows as it currently is

My current code is below

Code: Select all

<div id="services"  class="clearfix spacer grid" style="width: 95%;">
        
      <div class="hr grid_12 clearfix">&nbsp;</div>
        
      <!-- Column 1 /Content -->
      <div class="grid_8">
      
         <!-- Blog Post -->
         <cms:pages masterpage='blog.php' 
                  folder=k_folder_name 
                  start_on=k_archive_date 
                  stop_before=k_next_archive_date 
                  paginate='1' 
                  limit='3' >
                  
            <div class="post">
               <h3 class="title"><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h3>

               <cms:if k_page_foldertitle >
                  <cms:set my_category=k_page_foldertitle />
               <cms:else />
                  <cms:set my_category='Uncategorised' />
               </cms:if>
                    
                    <strong>Posted <cms:date k_page_date format='jS F Y'/></strong>
                    
                    <br><br>
                    
               <!-- Post Image -->
               <img class="thumb" alt="" src="<cms:show blog_image />" />
               <!-- Post Content -->
               <cms:excerptHTML count='75' ignore='img'><cms:show blog_content /></cms:excerptHTML>
               <!-- Read More Button -->
               <p class="clearfix"><a href="<cms:show k_page_link />" class="button right"> Read More...</a></p>
            </div>
            
            <cms:if k_paginated_bottom >
               <!-- Blog Navigation -->
               <p class="clearfix">
                  <cms:if k_paginate_link_next >
                     <a href="<cms:show k_paginate_link_next />" class="button float">&lt;&lt; Previous Posts</a>
                  </cms:if>
                  
                  <cms:if k_paginate_link_prev >
                     <a href="<cms:show k_paginate_link_prev />" class="button float right">Newer Posts >></a>
                  </cms:if>
               </p>
            </cms:if>
         
         </cms:pages >

      </div>

Thank you in advance

[KK]

Hi,

How you wish to display the posts is totally at your discretion - Couch is not concerned with what HTML/JS/CSS you choose to use.

Please post the pure HTML/JS/CSS markup showing some dummy posts the way you want and I'll try to help you in retrofitting Couch into it..

Hi

Below is the code I have on the home page and it has two columns side by side but just unsure how to integrate it into the blog_list.html page

Code: Select all

<div id="about"  class="container spacer about">
  <div class="row">
  <div class="col-sm-6 wowload fadeInLeft">
    <h4><i class="fa fa-paint-brush"></i> </h4>
    BLOG POST TOP LEFT FIRST
  </div>
  
  <div class="col-sm-6 wowload fadeInRight">
  BLOG POST TOP RIGHT FIRST
  </div>
  
</div>

<div class="row">
  <div class="col-sm-6 wowload fadeInLeft">
    <h4><i class="fa fa-paint-brush"></i> </h4>
    BLOG POST TOP LEFT SECOND
  </div>
  
  <div class="col-sm-6 wowload fadeInRight">
  BLOG POST TOP RIGHT SECOND
  </div>
  
</div>

</div>

So the plan is to have two columns of the blog articles side by side, like the following if possible

Blog One | Blog Two
Blog Three | Blog Four

[KK]

Hi,

In your code, you are effectively adding a row after each two posts.
This kind of row based layout is discussed in great length in one of our threads. You should find the following post from that thread useful -
viewtopic.php?f=2&t=9932&start=10#p23108

The only change you would need is setting the 'my_max_columns' to '2' because you need only two columns.

Please try adapting the code for your use-case and let me know how it goes.

Think I have done it, just a quick one

Do I need to keep the load more link, I am guessing I do as the limit is 6, does that mean per page?