Forum for discussing general topics related to Couch.
5 posts Page 1 of 1
Hello all, I coded the page for my gallery a few months ago, and revisiting it this week, I realized that I forgot to add pagination to it :lol: Anyway, I have tried playing around with the code and I can't seem to find where to place it to make it right. Here's what the unmodified code looks like:

Code: Select all
<section class="portfolio port-wrap padding-top-80 padding-bottom-80 ">
            <ul class="tabs style-1 text-center margin-bottom-40">
               <li class="tab-title"><a href="#." onclick="history.go(-1)">Back</a>
               </li>
               <li class="tab-title"><a href="/gallery.php">Gallery Home</a>
               </li>
            </ul>
            <!-- PORTFOLIO ITEMS -->
            <div class="container">
               <div class="items item-space row col-3 animate fadeInUp" data-wow-delay="0.4s">
                  <cms:if k_is_home>
                     <!-- list all folders -->
                     <cms:folders masterpage=k_template_name>
                        <!-- ITEM -->
                        <article class="portfolio-item pf-web-design">
                           <div class="portfolio-image"> <a href="<cms:show k_folder_link />"> <img class="img-responsive" alt="Open Imagination" src="<cms:show k_folder_image />"> </a>
                              <div class="portfolio-overlay style-4">
                                 <div class="detail-info">
                                    <div class="position-center-center"> <a href="<cms:show k_folder_link />"><h3 class="no-margin"><cms:show k_folder_title /></h3></a>
                                       <hr class="balck"> <span><a href="<cms:show k_folder_link />"></a></span>  <a href="<cms:show k_folder_link />" class="go"><i class="fa fa-search"></i></a>
                                    </div>
                                 </div>
                              </div>
                        </article>
                     </cms:folders>
                     <cms:else_if k_is_folder />
                     <!-- if folder has only one child page (find this using k_folder_pagecount variable) -->
                     <cms:if k_folder_pagecount='1'>
                        <!-- redirect to that child page -->
                        <cms:pages masterpage=k_template_name folder=k_folder_name>
                           <cms:redirect k_page_link /></cms:pages>
                        <cms:else />
                        <!-- show a list of child pages -->
                        <cms:pages masterpage=k_template_name folder=k_folder_name>
                           <!-- ITEM -->
                           <article class="portfolio-item pf-web-design">
                              <div class="portfolio-image"> <a href="<cms:show k_page_link />"> <img class="img-responsive" alt="Open Imagination" src="<cms:show gg_thumb />"> </a>
                                 <div class="portfolio-overlay style-4">
                                    <div class="position-center-center"> <a href="<cms:show k_page_link />"><h3 class="no-margin"></h3></a>
                                       <span><a href="<cms:show k_page_link />"></a></span>  <a href="<cms:show k_page_link />" class="go"><i class="fa fa-search"></i></a>
                                    </div>
                                 </div>
                              </div>
                           </article>
                        </cms:pages>
                     </cms:if>
                     <cms:else_if k_is_page />
                     <!-- show images on page -->
                     <!-- PORTFOLIO ITEMS -->
                     <div class="container">
                        <div class="with-nav">
                           <img class="img-responsive margin-bottom-30" src="<cms:show gg_image />" alt="">
                        </div>
                        <div class="row">
                           <div class="col-md-8 padding-right-30">
                              <h2 class="margin-top-0 margin-bottom-20">Description</h2>
                              <p>
                                 <cms:show description />
                              </p>
                           </div>
                           <!-- PORTFOLIO INFO -->
                           <div class="col-md-4">
                              <ul class="project-info">
                                 <li>
                                    <h6>CAMERA</h6>
                                    <span class="text-color-primary"><cms:show camera /></span>
                                    <h6>LOCATION</h6>
                                    <span class="text-primary"><cms:show location /></span>
                                 </li>
                              </ul> <a href="#." class="btn btn-med btn-color white-text font-normal margin-top-50">BUY PRINTS</a>
                           </div>
                        </div>
                     </div>
                  </cms:if>
                  </div>
               </div>
         </section>
         </div>
      </div>
      <!-- PORTFOLIO -->
      <section class="portfolio port-wrap padding-top-80 padding-bottom-80 ">
         <div class="text-center margin-bottom-80">
            <h3>Most Recent Photos</h3>
         </div>
         <!-- PORTFOLIO ITEMS -->
         <div class="container">
            <div class="items item-space row col-3 animate fadeInUp" data-wow-delay="0.4s">
               <cms:pages masterpage="gallery.php" include_subfolders='1' limit='12'>
                  <!-- ITEM -->
                  <article class="portfolio-item pf-web-design">
                     <div class="portfolio-image"> <a href="<cms:show k_page_link />"> <img class="img-responsive" alt="Open Imagination" src="<cms:show gg_thumb />"> </a>
                        <div class="portfolio-overlay style-4">
                           <div class="position-center-center"> <span><a href="<cms:show k_page_link />"></a></span>  <a href="<cms:show k_page_link />" class="go"><i class="fa fa-search"></i></a>
                           </div>
                        </div>
                     </div>
                  </article>
               </cms:pages>
            </div>
         </div>
      </section>


And this is the way I tried it.

Code: Select all
<section class="portfolio port-wrap padding-top-80 padding-bottom-80 ">
            <ul class="tabs style-1 text-center margin-bottom-40">
               <li class="tab-title"><a href="#." onclick="history.go(-1)">Back</a>
               </li>
               <li class="tab-title"><a href="/gallery.php">Gallery Home</a>
               </li>
            </ul>
            <!-- PORTFOLIO ITEMS -->
            <div class="container">
               <div class="items item-space row col-3 animate fadeInUp" data-wow-delay="0.4s">
                  <cms:if k_is_home>
                     <!-- list all folders -->
                     <cms:folders masterpage=k_template_name>
                        <!-- ITEM -->
                        <article class="portfolio-item pf-web-design">
                           <div class="portfolio-image"> <a href="<cms:show k_folder_link />"> <img class="img-responsive" alt="Open Imagination" src="<cms:show k_folder_image />"> </a>
                              <div class="portfolio-overlay style-4">
                                 <div class="detail-info">
                                    <div class="position-center-center"> <a href="<cms:show k_folder_link />"><h3 class="no-margin"><cms:show k_folder_title /></h3></a>
                                       <hr class="balck"> <span><a href="<cms:show k_folder_link />"></a></span>  <a href="<cms:show k_folder_link />" class="go"><i class="fa fa-search"></i></a>
                                    </div>
                                 </div>
                              </div>
                        </article>
                     </cms:folders>
                     <cms:else_if k_is_folder />
                     <!-- if folder has only one child page (find this using k_folder_pagecount variable) -->
                     <cms:if k_folder_pagecount='1'>
                        <!-- redirect to that child page -->
                        <cms:pages masterpage=k_template_name folder=k_folder_name>
                           <cms:redirect k_page_link /></cms:pages>
                        <cms:else />
                        <!-- show a list of child pages -->
                        <cms:pages masterpage=k_template_name paginate='1' limit='5' folder=k_folder_name>
                           <!-- ITEM -->
                           <article class="portfolio-item pf-web-design">
                              <div class="portfolio-image"> <a href="<cms:show k_page_link />"> <img class="img-responsive" alt="Open Imagination" src="<cms:show gg_thumb />"> </a>
                                 <div class="portfolio-overlay style-4">
                                    <div class="position-center-center"> <a href="<cms:show k_page_link />"><h3 class="no-margin"></h3></a>
                                       <span><a href="<cms:show k_page_link />"></a></span>  <a href="<cms:show k_page_link />" class="go"><i class="fa fa-search"></i></a>
                                    </div>
                                 </div>
                              </div>
                           </article>
                           <!-- PAGINATION -->
<cms:if k_paginated_bottom >
        <ul class="pagination">
      <cms:if k_paginate_link_prev >
          <li><a href="<cms:show k_paginate_link_prev />"><i class="fas fa-arrow-left"></i></a></li>
      </cms:if> 
      <cms:if k_paginate_link_next >
          <li><a href="<cms:show k_paginate_link_next />"><i class="fas fa-arrow-right"></i></a></li>
      </cms:if> 
        </ul>
      </div>
</cms:if>    
                        </cms:pages>
                     </cms:if>
                     <cms:else_if k_is_page />
                     <!-- show images on page -->
                     <!-- PORTFOLIO ITEMS -->
                     <div class="container">
                        <div class="with-nav">
                           <img class="img-responsive margin-bottom-30" src="<cms:show gg_image />" alt="">
                        </div>
                        <div class="row">
                           <div class="col-md-8 padding-right-30">
                              <h2 class="margin-top-0 margin-bottom-20">Description</h2>
                              <p>
                                 <cms:show description />
                              </p>
                           </div>
                           <!-- PORTFOLIO INFO -->
                           <div class="col-md-4">
                              <ul class="project-info">
                                 <li>
                                    <h6>CAMERA</h6>
                                    <span class="text-color-primary"><cms:show camera /></span>
                                    <h6>LOCATION</h6>
                                    <span class="text-primary"><cms:show location /></span>
                                 </li>
                              </ul> <a href="#." class="btn btn-med btn-color white-text font-normal margin-top-50">BUY PRINTS</a>
                           </div>
                        </div>
                     </div>
                  </cms:if>
                  </div>
               </div>
         </section>
         </div>
      </div>
      <!-- PORTFOLIO -->
      <section class="portfolio port-wrap padding-top-80 padding-bottom-80 ">
         <div class="text-center margin-bottom-80">
            <h3>Most Recent Photos</h3>
         </div>
         <!-- PORTFOLIO ITEMS -->
         <div class="container">
            <div class="items item-space row col-3 animate fadeInUp" data-wow-delay="0.4s">
               <cms:pages masterpage="gallery.php" include_subfolders='1' limit='12'>
                  <!-- ITEM -->
                  <article class="portfolio-item pf-web-design">
                     <div class="portfolio-image"> <a href="<cms:show k_page_link />"> <img class="img-responsive" alt="Open Imagination" src="<cms:show gg_thumb />"> </a>
                        <div class="portfolio-overlay style-4">
                           <div class="position-center-center"> <span><a href="<cms:show k_page_link />"></a></span>  <a href="<cms:show k_page_link />" class="go"><i class="fa fa-search"></i></a>
                           </div>
                        </div>
                     </div>
                  </article>
               </cms:pages>
            </div>
         </div>
      </section>


Unfortunately this did not work. What am I doing wrong?
Hi,

Your code is fine - it is just that you are not showing any text for the 'next', 'prev' links.
I added the missing text as follows and things are working as expected for me -
Code: Select all
<cms:if k_paginated_bottom >
    <ul class="pagination">
        <cms:if k_paginate_link_prev >
            <li><a href="<cms:show k_paginate_link_prev />"><i class="fas fa-arrow-left"></i>PREV</a></li>
        </cms:if> 
        <cms:if k_paginate_link_next >
            <li><a href="<cms:show k_paginate_link_next />"><i class="fas fa-arrow-right"></i>NEXT</a></li>
        </cms:if> 
    </ul>
</cms:if>

Hope this helps.
Thanks for the tip! unfortunately it still is not working as intended. The next button is showing on top of an image.

Here.png
Here.png (484.02 KiB) Viewed 892 times


You can see that the "next" button is on top of the middle image.

Code: Select all
<cms:if k_is_home>
    <!-- list all folders -->
      <cms:folders masterpage=k_template_name>   
       <!-- ITEM -->
          <article class="portfolio-item pf-web-design">
            <div class="portfolio-image"> <a href="<cms:show k_folder_link />"> <img class="img-responsive" alt="Open Imagination" src="<cms:show k_folder_image />"> </a>
              <div class="portfolio-overlay style-4">
                <div class="detail-info">
                  <div class="position-center-center">
                    <a href="<cms:show k_folder_link />"><h3 class="no-margin"><cms:show k_folder_title /></h3></a>
                    <hr class="balck">
                    <span><a href="<cms:show k_folder_link />"></a></span> <a href="<cms:show k_folder_link />" class="go"><i class="fa fa-search"></i></a>
                </div>
              </div>
            </div>
          </article>
      </cms:folders>       
<cms:else_if k_is_folder />
    <!-- if folder has only one child page (find this using k_folder_pagecount variable) -->
    <cms:if k_folder_pagecount='1'>
        <!-- redirect to that child page -->
        <cms:pages masterpage=k_template_name folder=k_folder_name>
            <cms:redirect k_page_link />
        </cms:pages>
    <cms:else />
        <!-- show a list of child pages -->
        <cms:pages masterpage=k_template_name paginate='1' limit='18' folder=k_folder_name>   
         <!-- ITEM -->
          <article class="portfolio-item pf-web-design">
            <div class="portfolio-image"> <a href="<cms:show k_page_link />"> <img class="img-responsive" alt="Open Imagination" src="<cms:show gg_image />"> </a>
              <div class="portfolio-overlay style-4">
                  <div class="position-center-center">
                    <a href="<cms:show k_page_link />"><h3 class="no-margin"></h3></a>
                    <span><a href="<cms:show k_page_link />"></a></span> <a href="<cms:show k_page_link />" class="go"><i class="fa fa-search"></i></a>
                </div>
              </div>
            </div>
          </article>
                 <!-- PAGINATION -->
<cms:if k_paginated_bottom >
        <ul class="pagination">
      <cms:if k_paginate_link_prev >
          <li><a href="<cms:show k_paginate_link_prev />"><i class="fas fa-arrow-left"></i>PREV</a></li>
      </cms:if> 
      <cms:if k_paginate_link_next >
          <li><a href="<cms:show k_paginate_link_next />"><i class="fas fa-arrow-right"></i>NEXT</a></li>
      </cms:if> 
        </ul>
      </div>
</cms:if>
        </cms:pages>
    </cms:if>
<cms:else_if k_is_page />
    <!-- show images on page -->
            
        <!-- PORTFOLIO ITEMS -->
      <div class="container">
        <div class="with-nav">
          <img class="img-responsive margin-bottom-30" src="<cms:show gg_image />" alt="" > </div>
        <div class="row">
          <div class="col-md-8 padding-right-30">
            <h2 class="margin-top-0 margin-bottom-20">Description</h2>
            <p><cms:show description /></p>
          </div>
          <!-- PORTFOLIO INFO -->
          <div class="col-md-4">
            <ul class="project-info">
              <li>
                <h6>CAMERA</h6>
                <span class="text-color-primary"><cms:show camera /></span>
                <h6>LOCATION</h6>
                <span class="text-primary"><cms:show location /></span>
           </li>
            </ul>
            <a href="#." class="btn btn-med btn-color white-text font-normal margin-top-50">BUY PRINTS</a> </div>
        </div>
      </div>   
</cms:if>
            


How can I fix that?
That is squarely a frontend issue - i.e. it is you who knows better what HTML/CSS/JS to use to get things look the way you desire. Couch can only help you in generating that desired markup.
Mmmm Okay. That is unfortunate. i've tried playing around with that code extensively, putting different padding and margins wherever I could. Looks like I'll have to hire someone to code it for me as I am not a developer and bought the template. Thanks anyway for the help.
5 posts Page 1 of 1
cron