Forum for discussing general topics related to Couch.
4 posts Page 1 of 1
I am going to create a photo gallery that has folders/albums, I can create that all ok but my question is, is it possible to have one layout for the gallery list of folders and a second layout for the images itself within the folder, for example the coding is below

gallery list
Code: Select all
<section id="gallery-list-section" class="gl-categories">
            <div class="isotope-wrap tt-wrap">
               
               
               <div class="isotope col-4 gutter-4">
                  
                  <div class="isotope-items-wrap gli-colored gli-alter-5">
                     
                     <div class="grid-sizer"></div>
                           
                            <div class="isotope-item fashion iso-height-1">
                        
                        <div class="gallery-list-item">
                           
                           <div class="gl-item-image-wrap">
                              
                              <a href="client-one.php" class="gl-item-image-inner">
                                 <div class="gl-item-image bg-image" style="background-image: url(assets/img/clients-portfolio/client-one/client-one-photo.jpg); background-position: 50% 50%"></div>
                                 
                                 <span class="gl-item-image-zoom"></span>
                              </a>
                              
                           </div>
                           
                           
                           
                           <div class="gl-item-info">
                              <div class="gl-item-caption">
                                 <h2 class="gl-item-title"><a href="#">Client 1</a></h2>
                              </div>
                           </div>
                           
                        </div>
                        
                     </div>
                     
                  </div>
                  
               </div>
               
            </div>
         </section>


gallery images within folder/album
Code: Select all
<section id="gallery-single-section" style="margin: 65px 0 0 0;">
            <div class="isotope-wrap">
               
               
               <div class="isotope col-4 gutter-3">
                  
                  <div id="gallery" class="isotope-items-wrap lightgallery gsi-color" data-lightgallery="group" data-lg-thumbnail="false">
                     
                     <div class="grid-sizer"></div>
                     
                     <cms:pages masterpage="client-one.php" include_subfolders='0' orderby='weight' order='asc' >
                           
                     <div class="isotope-item">
                               
                               
                                   <a href="<cms:show gg_image />" data-lightgallery="item" class="gallery-single-item lg-trigger" data-sub-html="<p><cms:show my_desc/></p>">
                                      <img src="<cms:show gg_thumb />" class="gs-item-image"/>
                                    <div class="gsi-image-caption"><cms:show my_desc/></div>
                                   </a>
                   
                     </div>
                     
                    </cms:pages>
                     
                  </div>

                  
               </div>
               
            </div>
         </section>


UPDATE: I just found this link to a similar post which may help me viewtopic.php?f=2&t=7868
I have managed to get the main client galleries page with the right layout at http://www.jamescsinclairphotography.co ... leries.php, I used the code below in client-galleries.php

Code: Select all
<cms:if k_is_list >
            <cms:embed 'client-portfolio-list.html' />
            <cms:else />
            <cms:embed 'client-portfolio-images.html' />
            </cms:if>


Then in the snippets folder, I have the following for client-portfolio-list.html
Code: Select all
<section id="gallery-list-section" class="gl-categories">
            <div class="isotope-wrap tt-wrap">
               
               
               <div class="isotope col-4 gutter-4">
                  
                  <div class="isotope-items-wrap gli-colored gli-alter-5">
                     
                     <div class="grid-sizer"></div>
                           
                            <cms:set my_page="<cms:gpc 'pg' method='get' />" />
      <cms:if my_page lt '2' >
         <ul class="gallery folders">
            <cms:folders childof=k_folder_name hierarchical='1' depth='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="isotope-item fashion iso-height-1">
                        
                        <div class="gallery-list-item">
                           
                           <div class="gl-item-image-wrap">
                              
     
      <!-- gallery images-->
      <ul class="gallery">
         <cms:pages folder=k_folder_name include_subfolders='0' limit='18' paginate='1'>
            <li>
               <a href="<cms:show gg_image />" <cms:if my_desc>title="<cms:show my_desc/>"</cms:if>>
                  <img alt="<cms:show k_page_title />" src="<cms:show my_thumb_2 />"/>
               </a>
            </li>
           
            <cms:if k_paginated_bottom ><!-- pagination -->
               <div style="clear:both"><cms:paginator /></div>   
            </cms:if>
           
         </cms:pages>
      </ul>
                           
                           
               
               <!--<li>
                  <a href="<cms:show k_folder_link />">
                     <img alt="<cms:show k_folder_title />" src="<cms:show my_folder_image />"/>
                     <span class="title"><cms:show k_folder_title /></span>
                  </a>
               </li>-->
           
                                       
                              <a href="<cms:show k_folder_link />" class="gl-item-image-inner">
                                 <div class="gl-item-image bg-image">
                                            <img alt="<cms:show k_folder_title />" src="<cms:show my_folder_image />" style="width: 100%;"/>
                                            </div>
                                 
                                 <span class="gl-item-image-zoom"></span>
                              </a>                           
                           
                           
                           <div class="gl-item-info">
                              <div class="gl-item-caption">
                                 <h2 class="gl-item-title"><a href="#"><cms:show k_folder_title /></a></h2>
                              </div>
                           </div>
               
                </div>
             
             </div>
         
          </div>
             
                        
          </cms:folders>
         </ul>   
      </cms:if>
                           
                  </div>
                  
               </div>
               
            </div>
         </section>

<cms:else /><!-- k_is_page -->


I know it needs tidying up abit coding wise but will do that when all working

I then have in the snippets folder client-portfolio-images.html with the following coding
Code: Select all
<section id="gallery-single-section" style="margin: 65px 0 0 0;">
            <div class="isotope-wrap">
               
               
               <div class="isotope col-4 gutter-3">
                  
                  <div id="gallery" class="isotope-items-wrap lightgallery gsi-color" data-lightgallery="group" data-lg-thumbnail="false">
                     
                     <div class="grid-sizer"></div>
                           
                     <div class="isotope-item">
                               
                               
                                   <a href="<cms:show gg_image />" data-lightgallery="item" class="gallery-single-item lg-trigger" data-sub-html="<p><cms:show my_desc/></p>">
                                      <img src="<cms:show gg_thumb />" class="gs-item-image"/>
                                    <div class="gsi-image-caption"><cms:show my_desc/></div>
                                   </a>
                   
                     </div>
                     
                  </div>

                  
               </div>
               
            </div>
         </section>


That's where I am stuck as I got no images showing when click on the album image photo, the source code looks like the following
Code: Select all
<section id="gallery-list-section" class="gl-categories">
            <div class="isotope-wrap tt-wrap">
               
               
               <div class="isotope col-4 gutter-4">
                  
                  <div class="isotope-items-wrap gli-colored gli-alter-5">
                     
                     <div class="grid-sizer"></div>
                           
                                           <ul class="gallery folders">
             
         </ul>   
                                 
                  </div>
                  
               </div>
               
            </div>
         </section>


It looks like the wrong section is used, the section should be the following one
Code: Select all
<section id="gallery-single-section" style="margin: 65px 0 0 0;">
            <div class="isotope-wrap">
               
               
               <div class="isotope col-4 gutter-3">
                  
                  <div id="gallery" class="isotope-items-wrap lightgallery gsi-color" data-lightgallery="group" data-lg-thumbnail="false">
                     
                     <div class="grid-sizer"></div>
                           
                     <div class="isotope-item">
                               
                               
                                   <a href="<cms:show gg_image />" data-lightgallery="item" class="gallery-single-item lg-trigger" data-sub-html="<p><cms:show my_desc/></p>">
                                      <img src="<cms:show gg_thumb />" class="gs-item-image"/>
                                    <div class="gsi-image-caption"><cms:show my_desc/></div>
                                   </a>
                   
                     </div>
                     
                  </div>

                  
               </div>
               
            </div>
         </section>


I am not sure where I have gone wrong as thought the embed coding would make it use the correct section, I am guessing it's the following code is wrong
Code: Select all
<cms:if k_is_list >
            <cms:embed 'client-portfolio-list.html' />
            <cms:else />
            <cms:embed 'client-portfolio-images.html' />
            </cms:if>
UPDATE: I have managed to get it working with the following coding in client-galleries.php
Code: Select all
<cms:if k_is_folder >
            <cms:embed 'client-portfolio-images.html' />
            </cms:if>
           
            <cms:if k_is_list >
            <cms:embed 'client-portfolio-list.html' />
            </cms:if>


In the snippets folder, I have client-portfolio-list.html with the following code
Code: Select all
<section id="gallery-list-section" class="gl-categories">
            <div class="isotope-wrap tt-wrap">
               
               
               <div class="isotope col-4 gutter-4">
                  
                  <div class="isotope-items-wrap gli-colored gli-alter-5">
                     
                     <div class="grid-sizer"></div>
                           
                            <cms:set my_page="<cms:gpc 'pg' method='get' />" />
      <cms:if my_page lt '2' >
         <ul class="gallery folders">
            <cms:folders childof=k_folder_name hierarchical='1' depth='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="isotope-item fashion iso-height-1">
                        
                        <div class="gallery-list-item">
                           
                           <div class="gl-item-image-wrap">
           
                                       
                              <a href="<cms:show k_folder_link />" class="gl-item-image-inner">
                                 <div class="gl-item-image bg-image">
                                            <img alt="<cms:show k_folder_title />" src="<cms:show my_folder_image />" style="width: 100%;"/>
                                            </div>
                                 
                                 <span class="gl-item-image-zoom"></span>
                              </a>                           
                           
                           
                           <div class="gl-item-info">
                              <div class="gl-item-caption">
                                 <h2 class="gl-item-title"><a href="#"><cms:show k_folder_title /></a></h2>
                              </div>
                           </div>
               
                </div>
             
             </div>
         
          </div>
             
                        
          </cms:folders>
         </ul>   
      </cms:if>
                           
                  </div>
                  
               </div>
               
            </div>
         </section>

<cms:else /><!-- k_is_page -->


In the same folder I have client-portfolio-images.html with the following code
Code: Select all
<section id="gallery-single-section" style="margin: 65px 0 0 0;">
            <div class="isotope-wrap">
               
               
               <div class="isotope col-4 gutter-3">
                  
                  <div id="gallery" class="isotope-items-wrap lightgallery gsi-color" data-lightgallery="group" data-lg-thumbnail="false">
                     
                     <div class="grid-sizer"></div>
                           
                            <cms:pages folder=k_folder_name include_subfolders='0' limit='18' paginate='1'>
                           
                     <div class="isotope-item">
                               
                               
                                   <a href="<cms:show gg_image />" data-lightgallery="item" class="gallery-single-item lg-trigger">
                                      <img src="<cms:show gg_image />" class="gs-item-image"/>
                                   </a>
                               
                     </div>
                     
                               
                                </cms:pages>
                               
                  </div>

                  
               </div>
               
            </div>
                   
         </section>


The only issue I have is when I upload a new image in Client One folder, the album image photo changes on client-galleries.php

Can a default one be set for the folder image so it stays the same
UPDATE: Sorry solved the folder image little issue, I used the following

Code: Select all
<cms:show k_folder_image />


instead of

Code: Select all
<cms:show my_folder_image />
4 posts Page 1 of 1