Problems, need help? Have a tip or advice? Post it here.
12 posts Page 1 of 2
Hi All,

I am trying to fit couch to what was a wordpress theme, now I am using the documented gallery method but need to adjust it so that the istope filter menu is the "Parent" categories - got this working fine with depth="1" - but the loop to load the child categories I am stuck with, this loop also needs to be able to pull the parent folder id as a class hook to filer by.

I believe it's something in this section that needs modifying but not sure how to approach it:

Code: Select all
<cms:set my_page="<cms:gpc 'pg' method='get' />" />
           <cms:if my_page lt '2' >
                 <cms:folders childof=k_folder_name hierarchical='1' depth='2'>
                
                    <cms:set my_folder_image="" />
                    <cms:if k_folder_image>
                       <cms:set my_folder_image="<cms:thumbnail k_folder_image width='500' height='300' />" />
                    <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_site_link />assets/img/folder-empty.png" /></cms:if>
         




My full "our-work" template is:

Code: Select all
      <div id="main" class="clearfix">

         <div id="container" class="clearfix">

   <!--BEGIN #content -->
    <div id="content">
   
             
      <!-- BEGIN #archive-title -->
       <div id="archive-title">
          
         <div class="inner term-31 term-28 term-37 term-38 term-6 term-29 term-26 ">
            
            <h1 id="page-title">
               Our Work               <span class="icon"><img src="http://demo2.designerthemes.com/adapt/wp-content/themes/adapt/images/icon-ribbon.png" alt="" /></span>
            </h1>
            
            <ul id="filter" class="clearfix">
               <li class="active"><a href="#" data-filter="*">All</a> (11)</li>
               <cms:folders masterpage='our-work.php' hierarchical='1' depth='1'>
               <li class="segment-30"><a href="#" data-filter=".f<cms:show k_parent_folder_id />" title="View all <cms:show k_folder_title />"><cms:show k_folder_title /></a> <cms:show k_folder_totalchildren />
               </cms:folders>
            </ul>
            
         </div>

       </div>
       <!-- END #archive-title -->
       
       <!--BEGIN #masonry -->   
      <div id="masonry">
                  
                  
                  
         <cms:set my_page="<cms:gpc 'pg' method='get' />" />
           <cms:if my_page lt '2' >
                 <cms:folders childof=k_folder_name hierarchical='1' depth='2'>
                
                    <cms:set my_folder_image="" />
                    <cms:if k_folder_image>
                       <cms:set my_folder_image="<cms:thumbnail k_folder_image width='500' height='300' />" />
                    <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_site_link />assets/img/folder-empty.png" /></cms:if>
         

               
            <div class="item normal isotope-item">
         
            <!--BEGIN .hentry -->
               <div id="id<cms:show k_folder_id />" class=".f<cms:show k_parent_folder_id /> showcase type-showcase status-publish format-image hentry">

               <!--BEGIN .featured-image -->
               <div class="featured-image">
                  <div class="da-animate da-slideFromLeft" style="display: block;">
                     <span class="da-wrap">
                        <span class="title"><cms:show k_folder_title /></span>
                           <a href="<cms:show k_folder_link />" class="colorbox-image cboxElement" data-gallery="group-1227">View Work</a>
                        </span>
                  </div>
                  <a href="http://demo2.designerthemes.com/adapt/showcase/bamboo-holder/"><img width="300" height="177" alt="" src="<cms:thumbnail k_folder_image width='500' height='300' />"></a>
               <!--END .featured-image -->
               </div>
                              
                              
               <h2 class="post-title"><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></h2>
               
               <!--BEGIN .post-content -->
               <div class="post-content">
                  
                  <span class="icon"></span>
                                    
                  <p><cms:show k_folder_desc /></p>
                  
               <!--END .post-content -->
               </div>
               
            <!--END .hentry--> 
            </div>
         
         <!--END .item -->   
         </div>
         
         
                 </cms:folders>
           </cms:if>   
                        
      <!--END #masonry -->
      </div>
      
      <div id="masonry-new"></div>
      
      <!--BEGIN .post-navigation -->
      <div class="post-navigation clearfix">
               <!--END .post-navigation -->
      </div>

   </div><!-- #content -->

         <!--END #content -->
         </div>

      <!--END #main -->
      </div>

   <!--END #page -->
    </div>
Hi Patrick,

Not sure what exactly you are trying to do but with my limited knowledge of Isotope gallery, there are two main components to it -
1. The menu items that act as 'filter'
2. The actual image items that are to be filtered.
and what ties the two components together is the CSS class name(s) assigned to the image items.
For example, in the following snippet the class names - 'metal', 'alkali' etc. connect the filter menu with the items.
Code: Select all
<!-- menu -->
<ul id="filters">
  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".metal">metal</a></li>
  <li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
</ul>

<!-- actual items -->
<div id="container">
  <div class="isotope-item transition metal">...</div>
  <div class="isotope-item post-transition metal">...</div>
  <div class="isotope-item alkali metal">...</div>
  <div class="isotope-item alkaline-earth metal">...</div>
  ...
</div>

Now, what you seem to be doing is list all folders as items
and use the top-level folders as the filter menu.
What connects the two components is the 'k_parent_folder_id' variable which is supposed to be the parent folder's id, right?

I can see a few problems with your code -
1. There is no 'k_parent_folder_id' variable. You should actually use 'k_folder_parentid' (cms:dump is our friend here).
2. While creating the filter menu, you are displaying only the top-level folders and using their parent's id. They don't have a parent because they are top level. So please use there own id i.e. 'k_folder_id'.
3. In you code, where you add the class to the items,
Code: Select all
<div id="id<cms:show k_folder_id />" class=".f<cms:show k_parent_folder_id /> 

I think that should not have dot '.'.
Code: Select all
class="f<cms:show k_folder_parentid />

Anyways, even with these rectifications, I am not sure if this achieves what you are after.
Normally, with isotope gallery, you show the *images contained* within the folders as items with the folders serving as the filter menu. You seem to be showing only the child folders (must have very many of them :) ).

Anyways, could you please post in here your actual folder hierarchy?
Will help us in devising the solution.

Thanks.
Hi KK,

Thanks for getting back to me - I think I can nail the filter part but what I am struggling with is showing the 2nd depth to sort, so my filter nav is always level 1 and the child category is always level 2

so the structure is, and this is for a work gallery, where level 1 is the type of work and level two is the client name - and inside the client name are photos

Logo Design
-Will Smith
-Jazzy Jeff
-Carlton
Web Design
-Smithers
-Bart
-Lisa
-Homer
Print Design
-Guns and Rose
-Bon Jovi
-Metallica
-Empire of the Sun
Other
-John Smith
-Jane Doe


So what we actually filter is the Job Type parent category which then shows the various sub categories of clients.

Hope that makes sense.

So it's this chunk of code that I need to show only 2nd level categories and be able to apply the parent_id


Code: Select all
<cms:set my_page="<cms:gpc 'pg' method='get' />" />
           <cms:if my_page lt '2' >
                 <cms:folders childof=k_folder_name hierarchical='1' depth='2'>
                
                    <cms:set my_folder_image="" />
                    <cms:if k_folder_image>
                       <cms:set my_folder_image="<cms:thumbnail k_folder_image width='500' height='300' />" />
                    <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_site_link />assets/img/folder-empty.png" /></cms:if>
         

               
            <div class="item normal isotope-item">
         
            <!--BEGIN .hentry -->
               <div id="f<cms:show k_folder_parentid />" class="f<cms:show k_folder_parentid /> showcase type-showcase status-publish format-image hentry">

               <!--BEGIN .featured-image -->
               <div class="featured-image">
                  <div class="da-animate da-slideFromLeft" style="display: block;">
                     <span class="da-wrap">
                        <span class="title"><cms:show k_folder_title /></span><cms:show k_folder_parentid />
                           <a href="<cms:show k_folder_link />" class="colorbox-image cboxElement" data-gallery="group-1227">View Work</a>
                        </span><cms:dump />
                  </div>
                  <a href="http://demo2.designerthemes.com/adapt/showcase/bamboo-holder/"><img width="300" height="177" alt="" src="<cms:thumbnail k_folder_image width='500' height='300' />"></a>
               <!--END .featured-image -->
               </div>
                              
               <span class="meta-category">
                  <p rel="tag"><cms:show k_parent_folder_title /></p>
               </span>
            
               <h2 class="post-title"><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></h2>
               
               <!--BEGIN .post-content -->
               <div class="post-content">
                  
                  <span class="icon"></span>
                                    
                  <p><cms:show k_folder_desc /></p>
                  
               <!--END .post-content -->
               </div>
OK, got it.

But first, I think you should remove the code you have from the gallery demo. It is not useful in this case (it simply tries to attach an image with every folder - you can do it manually in 'edit folder' so the code is unnecessary).

Coming to the problem at hand, you have the following folder hierarchy
Logo Design
-Will Smith
-Jazzy Jeff
-Carlton
Web Design
-Smithers
-Bart
-Lisa
-Homer
..

but wish to list only the second level folders e.g.
-Will Smith
-Jazzy Jeff
-Carlton
-Smithers
-Bart
-Lisa
-Homer

That is quite easy. The cms:folders tag reports the 'level' of each folder (as a variable named 'k_level') as it iterates through the tree. So, the top level folders will have a level of '0' while the second level will have it as '1' (again, cms:dump will show this). While displaying, we can simply ignore the levels that we do not want. For example as below where we fetch 2 levels of folders but show only the second level -
Code: Select all
<ul>
<cms:folders hierarchical='1' depth='2'>
    <cms:if k_level='1'>
    <li class="segment-30">
        <a href="#" data-filter="f<cms:show k_folder_parentid />" title="View all <cms:show k_folder_title />"><cms:show k_folder_title /></a> <cms:show k_folder_totalchildren />
    </li>
    </cms:if>
</cms:folders>
</ul>

Hope this helps.
Thanks KK, all working now - this is the working code:

Code: Select all
<h1 id="page-title">
               Our Work               
            </h1>
            
            <ul id="filter" class="clearfix">
               <li class="active"><a href="#" data-filter="*">All</a> (<cms:show k_folder_totalchildren />)</li>
               <cms:folders masterpage='our-work.php' hierarchical='1' depth='1'>
               <li class="segment-30"><a href="#" data-filter=".f<cms:show k_folder_id />" title="View all <cms:show k_folder_title />"><cms:show k_folder_title /></a> (<cms:show k_folder_totalchildren />)<cms:show k_folder_id />
               </cms:folders>
            </ul>
            
         </div>

       </div>
       <!-- END #archive-title -->
       
       <!--BEGIN #masonry -->   
      <div id="masonry">
                  
                  
                  
      <cms:folders hierarchical='1' depth='2'>
          <cms:if k_level='1'>

               
            <div class="item normal isotope-item f<cms:show k_folder_parentid />">
         
            <!--BEGIN .hentry -->
               <div id="f<cms:show k_folder_parentid />" class="showcase type-showcase status-publish format-image hentry">

               <!--BEGIN .featured-image -->
               <div class="featured-image">
                  <div class="da-animate da-slideFromLeft" style="display: block;">
                     <span class="da-wrap">
                        <span class="title"><cms:show k_folder_title /></span><cms:show k_folder_parentid />
                           <a href="<cms:show k_folder_link />" class="colorbox-image cboxElement" data-gallery="group-1227">View Work</a>
                        </span>
                  </div>
                  <a href="http://demo2.designerthemes.com/adapt/showcase/bamboo-holder/"><img width="300" height="177" alt="" src="<cms:thumbnail k_folder_image width='500' height='300' />"></a>
               <!--END .featured-image -->
               </div>
                              
               <span class="meta-category">
                  <p rel="tag"><cms:show k_parent_folder_title /></p>
               </span>
            
               <h2 class="post-title"><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></h2>
               
               <!--BEGIN .post-content -->
               <div class="post-content">
                  
                  <span class="icon"></span>
                                    
                  <p><cms:show k_folder_desc /></p>
                  
               <!--END .post-content -->
               </div>
               
            <!--END .hentry--> 
            </div>
         
         <!--END .item -->   
         </div>
         
         </cms:if>
       </cms:folders>
                        
      <!--END #masonry -->
      </div>

Hi Kk,

Not to open another thread on a similar subject, I'll like to achieve a similar objective as this. However, there's a little difference.

I have a three level category of folders, the topmost level folders is desired enumerate all child folders but it should exclude the second level i.e.

Folder level 0
- Folder level
-- Folder level 2

However, I want the topmost folder (folder level 0) to display only all the third level folders (folder level 3) irrespective of.the second level folders (folder level 2) they're child to.

How do I achieve this?

Thanks
Hi Toheeb ,

The 'k_level' variable shows which level the folder being iterated belongs to.
I think we can use that to skip a particular level e.g. as follows where we show a folder only if it is not equal ('ne') to level 2 -
Code: Select all
<cms:folders hierarchical='1'>
    <cms:if k_level ne '2'>
        .. display things ..
    </cms:if>
</cms:folders>

Hope it helps,
Hi KK,

Thank you for the feedback, I'm very grateful.
I have tried applying the k_level as a filter, even before your suggestion, it did not work.

I checked to see the level all the folders were placed, it returned '0', from parent down to grandchildren. Could that be because the folders are dynamically created?
Could you post the exact code you are trying to use please?
<div class=" flex-align-row " >

<cms:folders masterpage='items.php' hierarchial='1' depth='2' folder=k_folder_name childof=k_folder_name root='' extended_info='1' >

<cms:if k_level != '1' >

<a href="<cms:show k_folder_link />" class="" >
<div class=" disp-box " >

<cms:if "<cms:not_empty k_folder_image />" >

<div class=" col-box-img ">

<img src="<cms:show k_folder_image />" />

</div>

</cms:if>

</div>

</a>

</cms:if>

</cms:folders>

</div>
12 posts Page 1 of 2
cron