CouchCMS Forum General Discussion
Forum for discussing general topics related to Couch.
5 posts Page 1 of 1
Post a reply
Previous Next

Help me paginate my gallery?

avatar
BrickTheNick
Registered User
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?

Re: Help me paginate my gallery?

avatar
KK
Moderator
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.

Re: Help me paginate my gallery?

avatar
BrickTheNick
Registered User
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 2044 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?

Re: Help me paginate my gallery?

avatar
KK
Moderator
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.

Re: Help me paginate my gallery?

avatar
BrickTheNick
Registered User
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.
Post a reply
Previous Next
5 posts Page 1 of 1
Return to General Discussion