Forum for discussing general topics related to Couch.
15 posts Page 1 of 2
Hi! I have been using couch for ages and I love how versatile it is across all new technologies! I've built a responsive bootstrap site with smoothscroll, etc., and I have a responsive gallery inside. Originally I had used the regular portfolio image setup, which loads a larger copy of that image in a lightbox (I'm using Nivo Lightbox). I was finding that I had way too many similar images that really should be part of a set, and not taking up a whole spot in the gallery. So I redid the whole thing using dynamic folders with extended options (I can add tags so the isotope sorting would work) The goal was to have a main category image display (which would be the folder image), and then, when clicked, it would load the first image within that folder in the lightbox. But it seems all I can get it to do is load the page containing all folder images. Show gg image isn't working, I'm assuming because I'm in the folders view and not the images list. Is there a way to capture the link to the first image within a given folder, skipping the page displaying all folder images? Any help would be very much appreciated!

Here is my code:

Template Page Header code:

Code: Select all
<?php require_once'couch/cms.php'; ?>
<cms:template title='Galleryportfolio' clonable='1' dynamic_folders='1' gallery='1'  dynamic_folders='1' folder_masterpage='portfolio-folders.php'>
   <cms:editable
      name='gg_image'
      label='Image'
      desc='Upload your main image here'
      width='1100'
      height='800'
      show_preview='1'
      preview_height='200'
      type='image'
   />
   
 
   
   <cms:editable
      name='gg_thumb'
      label='Image Thumbnail'
      desc='Thumbnail of the main image above'
      width='800'
      height='600'
      enforce_max='1'
      assoc_field='gg_image'
      show_preview='1'
      type='thumbnail'
   /> 

   <cms:editable
      name='my_thumb_2'
      label='Image Thumbnail 2'
      desc='Second thumbnail of the main image above'
      width='800'
      height='600'
      assoc_field='gg_image'
      show_preview='1'
      type='thumbnail'
   /> 
   
   <cms:editable
      name='my_desc'
      label='Description'
      height='60'
      type='textarea'
   />
               
</cms:template>


Template Page body (the important part anyway)

Code: Select all
<div id="portfolio">
   <div class="container">
      <div class="row">
         <div class="col-md-12 col-sm-12">
            <h1 class="heading bold"><cms:show k_page_title /></h1>
            <h2 class="subheading"><cms:show my_desc /></h2>
            
                <cms:if k_is_list >
                <!-- gallery folders  -->
               
               
            <div class="iso-section">
                <ul class="filter-wrapper clearfix">   
                          <li><a href="#" data-filter="*" class="selected opc-main-bg">All</a></li>
                          <li><a href="#" class="opc-main-bg" data-filter=".linedrawings">Line Drawings</a></li>
                          <li><a href="#" class="opc-main-bg" data-filter=".3D">3D</a></li>
                         <li><a href="#" class="opc-main-bg" data-filter=".character">Characters</a></li>
                        <li><a href="#" class="opc-main-bg" data-filter=".scenes">Scenes</a></li>
                        <li><a href="#" class="opc-main-bg" data-filter=".technical">Technical</a></li>
                         <li><a href="#" class="opc-main-bg" data-filter=".instructional">Instructional</a></li>
                         <li><a href="#" class="opc-main-bg" data-filter=".flat">Flat</a></li>
                     </ul>
               
                   <div class="iso-box-section wow fadeIn" data-wow-delay="0.9s">
                        <div class="iso-box-wrapper col4-iso-box">
                       
                       
                        <cms:set my_page="<cms:gpc 'pg' method='get' />" />
      <cms:if my_page lt '2' >
      <cms:folders childof=k_folder_name hierarchical='1' depth='1' include_custom_fields='1'>
      <cms:set my_folder_image="" />
     
      <cms:if k_folder_image>
      <cms:set my_folder_image=k_folder_image />
     
      <cms:else />
      <cms:pages folder=k_folder_name include_subfolders='0' limit='1'>
      <cms:set my_folder_image=my_thumb_2 scope='parent' />
      </cms:pages>
      </cms:if>
     
      <cms:if my_folder_image=''><cms:set my_folder_image="<cms:show k_admin_link />theme/images/empty-folder.gif" />
      </cms:if>
                        <div class="iso-box <cms:show tags /> col-lg-4 col-md-4 col-sm-4 col-xs-6" style="border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #aa7f4d; border-left: 2px solid #aa7f4d;">
     
     
               
                  
      <a href="<cms:show k_folder_link />" class="outside">
         <img src="<cms:show my_folder_image />" class="img-responsive" alt="<cms:show k_folder_title />"></a>
                              
     
                           </div>
                           </cms:folders>
      </cms:if>
                      </div>
                     
                     </div>

            </div>
               
               
                <!-- gallery images-->
                <div class="iso-section">
               
                   <div class="iso-box-section wow fadeIn" data-wow-delay="0.9s">
                        <div class="iso-box-wrapper col4-iso-box">
                       
                  <cms:pages folder=k_folder_name include_subfolders='0' limit='18' paginate='1'>
                        <div class="iso-box col-lg-4 col-md-4 col-sm-4 col-xs-6">
                        <a href="<cms:show gg_image />" data-lightbox-gallery="<cms:show k_page_foldername/>" title="<cms:show my_desc/>"><img src="<cms:show my_thumb_2 />" alt="<cms:show k_page_title />"></a>
                            </div>
                           </cms:pages> 
                      </div>
                     
                     </div>

            </div>
         </div><div class="col-md-12">
           
              <cms:else /><!-- k_is_page -->   
     
      <div class="col-md-8 col-md-offset-2">
         <img alt="<cms:show k_page_title />" src="<cms:show gg_image />"/>
      </div>
     
   </cms:if>
           <div class="col-md-12">
             <p>&nbsp;</p>
             <p>&nbsp;</p>
             <p><a href="http://www.illustrationfixations.com/index.php#portfolio">- back</a></p>
             <p>&nbsp;</p>
            </div>
         </div>
      </div>
   </div>
</div>      



Extended folders code:

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Portfolio Folders' clonable='1' hidden='1'>
<cms:editable name="my_categories" label="Categories" desc="Check all applicable"
        opt_values='linedrawings  |  3D  |  scenes | technical | instructional | flat | character'
        type='checkbox'
      />
   <cms:editable name='tags' label='Tags' desc='copy and paste tags from above checkbox' />

</cms:template>

<?php COUCH::invoke(); ?>



Page I want to display the gallery on:

Code: Select all
<div class="iso-box-section wow fadeIn" data-wow-delay="0.9s">
                        <div class="iso-box-wrapper col4-iso-box">
                       
                         <cms:folders masterpage='portfoliogallery.php' include_custom_fields='1'>
                         
                     
                                             
                        <div class="iso-box <cms:show tags /> col-lg-4 col-md-4 col-sm-4 col-xs-6" style="border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #aa7f4d; border-left: 2px solid #aa7f4d;">
     
     
                
      <a href="<cms:show gg_image />" data-lightbox-gallery="<cms:show k_page_foldername/>" title="<cms:show my_desc/>">
         <img src="<cms:show k_folder_image />" class="img-responsive" alt="<cms:show k_folder_title />"></a>
                   
     
                           </div>
                           

                  </cms:folders>
                           
                      </div>
                     
                     </div>


You can view the live example here:

Template page: http://illustrationfixations.com/portfoliogallery.php

Main page (the one that counts!): http://illustrationfixations.com/indextest.php

Everything works, I just can't get it to load the first image from within the folder. Is this possible?
</code girl>
It shouldn't be a problem.
Code sample is here: http://docs.couchcms.com/concepts/listi ... older-view
The logic behind the solution is to get the folder with <cms:folders />, then list pages from this folder only, with limit='1' it would be one single page. orderby and order parameters for the <cms:pages /> would help to get the target page. Once you get the page, all editables are available, including gg_image.

Since you already used "<cms:pages folder=k_folder_name />" in other part of the code and know how it works, I think I misunderstood the question?
Yeah I'm not having an issue pulling the correct page, but I don't want to load the page, just the image. It looks terrible with the page loading within the lightbox, and I don't particularly want it to load a new page before going on to view the images in a lightbox. It may be pie in the sky, but so far I've been able to manipulate Couch into doing just about whatever I want, so I'm really hoping there is a way to target an image within a folder from the folders list view. Does that make more sense?
</code girl>
We should not confuse two seemingly mixed terms - html page and couch cloned page (no html, pure data from editable fields). It is my fault that I didn't say 'cloned page', apologize for that.
See, gg_image that you want to show, belongs to a cloned page. So to display this image without html, you have to pull data from that cloned page, i.e. use <cms:pages />. Am I making this clearer anyhow?
Yes, ok, I know what you mean, I figured it was along those lines, but how do I do that with my current setup?
</code girl>
See your source (the generated HTML):
Code: Select all
      <a href="" data-lightbox-gallery="" title="">
         <img src="http://illustrationfixations.com/couch/uploads/image/full2.jpg" style="width: 120%; height: auto; display: block;
   margin: auto auto;" class="img-responsive" alt="Kinetic Rock Gravel Pit" ></a>

It shows missing links - href="" data-lightbox-gallery="" title=""
This part was generated by following code from your last posted piece:
Code: Select all
<cms:folders ....
    <a href="<cms:show gg_image />" data-lightbox-gallery="<cms:show k_page_foldername/>" title="<cms:show my_desc/>">
</cms:folders>

This is a folder-view, since you enumerate folders with cms:folders. If you consider variables available in folder-view, you can easily see there are no available editables as gg_image or my_desc or variable k_page_foldername, because those are available only within couch's page-view. This is why you get empty values instead correct links.
What link is actually expected in href and data-lightbox-gallery?
Yes! Now you're right up to where I'm stuck. Is there a way to determine what that link will be? I was trying to find a combination that would work in the href="", like calling the folder link / gg_image, some combination to determine the link, or maybe to call that folder page invisibly so it could read the associated gg_image link, but then I run into the problem of making sure it calls the right gg_image. So that's really my original question, how can I figure out what the link to the first image within a folder will be, when you are only on the folders view and not the page view? Is it possible?
</code girl>
You can call pages anywhere using the cms:pages tag.

Inside of your folders call


Place a pages call:
Code: Select all
<cms:pages folder=k_folder_name >
...Code to show your image e.g. <cms:show gg_image />
</cms:pages>
Image
That sounds like we're getting there...I tried this:

Code: Select all
a href="<cms:pages folder=k_folder_name><cms:show gg_image/></cms:pages>" data-lightbox-gallery="<cms:show k_page_foldername/>" title="<cms:show my_desc/>">
         <img src="<cms:show k_folder_image />" style="width: 120%; height: auto; display: block;
   margin: auto auto;" class="img-responsive" alt="<cms:show k_folder_title />" ></a>

But it doesn't seem to work. Can I call a page within a called folder view? The whole code block looks like this:

Code: Select all
<cms:folders masterpage='portfoliogallery.php' include_custom_fields='1'>
            <div class="iso-box <cms:show tags /> col-lg-4 col-md-4 col-sm-4 col-xs-6" style="border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #aa7f4d; border-left: 2px solid #aa7f4d;">
               <div style="overflow: hidden; height: 0; padding-bottom: 70%;">      
      <a href="<cms:pages folder=k_folder_name><cms:show gg_image/></cms:pages>" data-lightbox-gallery="<cms:show k_page_foldername/>" title="<cms:show my_desc/>">
         <img src="<cms:show k_folder_image />" style="width: 120%; height: auto; display: block;
   margin: auto auto;" class="img-responsive" alt="<cms:show k_folder_title />" ></a>
             </div>      
             </div>
      </cms:folders>
</code girl>
...maybe I need to work backwards. Maybe I should call the page view, and have each block display the folder thumbnail. I wonder if that would work...
</code girl>
15 posts Page 1 of 2
cron