Hello All Couchies...

I am trying to do make an isotope gallery (eg: http://codecanyon.net/item/isotope-gallery-wordpress-plugin/full_screen_preview/4699060) using CouchCMS clonable pages concept with dynamic folders.

As shown in the URL above, there are four options for filtering, viz:
1. All
2. Wordpress
3. Web Design
4. Photography

I have been able to achieve filters 2 to 4. What I can't figure out is how to get the Filtering "ALL" to work. As I have already mentioned, I am using the Clonable feature with Dynamic Folders, I want to be able to:
1. Implement "ALL" Filter
2. Show few Images, i.e. no more than 20 images in the all filter.

My code for achieving the filtering is:

Products Page (Template Definition):

Code: Select all

<cms:template title='Products Page - Editing' clonable='1' dynamic_folders='1'>
       <cms:repeatable name='prod' label='Products'>
           <cms:editable name='prod_image' label='Image' type='image' show_preview='1' preview_width='100' input_width='50' />
            <cms:editable name='prod_name' label='Name' type='text' />
            <cms:editable name='prod_desc' label='Description' type='nicedit' />
        </cms:repeatable>
</cms:template>

Products Page (Isotope Gallery Definition):

Code: Select all

<cms:show_repeatable 'prod' >
    <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four <cms:show k_page_foldertitle /> isotope-item">
        <div class="portfolio_img"> 
            <img src="<cms:show prod_image />" > 
        </div>        
        <div class="item_overlay">
            <div class="item_info"> 
                <h4 class="project_name"><cms:show prod_name /></h4>
                
            </div>
        </div>
    </div>
</cms:show_repeatable>

And I am calling the name of the folder from a snippet, using the code:

Code: Select all

<ul class="clearfix">
   <cms:pages masterpage='products.php'>
    <li>
       <a id="all" href="#" data-filter=".<cms:show k_page_foldertitle />" >
          <h5><cms:show k_page_foldertitle /></h5>
       </a>
    </li>
    </cms:pages>
</ul>

My current output is as shown in this image. The "All" Filtering is missing.

isotope_gallery.png (296.71 KiB) Viewed 2969 times

[KK]

Hi,

You can hard-code the 'All' item as shown below (not sure what 'data-filter' it takes - you'll have to adjust ut) -

Code: Select all

<ul class="clearfix">

    <li>
        <a id="all" href="#" data-filter=".whatever" >
          <h5>All</h5>
        </a>
    </li> 

   <cms:pages masterpage='products.php'>
    <li>
       <a id=".<cms:show k_page_foldername />" href="#" data-filter=".<cms:show k_page_foldertitle />" >
          <h5><cms:show k_page_foldertitle /></h5>
       </a>
    </li>
    </cms:pages>
</ul>

As for showing no more that 20 items, since you are using repeatable-regions for the images, you'll have to use a variable as a counter and output the images only if the value is less than the value you want.

Does this help?

@ KK Sir,

Why didn't that strike me??? I could have had hardcoded it...

It works just as i wanted it... thanks a ton sir!!!

Regards,
Aashish

P.S.: In the Isotope Gallery that I am using, the data-filter for the "All-Filter" is " * "

Hey KK,
With respect to this thread, I wondering how to set and unset the active class on "All" for filters, since the All value is hardcoded. How can Couch inform the "All" filter not to take the active class when it is being used on another filter item?
Below is my code. The class name is "filter-each--active" .

Code: Select all

<div class="filter-block">
    <div class="k-heading">Filter Press</div>
    <cms:set my_current_folder=k_folder_name />
    <a href="/press.php" class="filter-each filter-each--active">All</a>
    <cms:folders>
      <a href="<cms:show k_folder_link />" class="filter-each <cms:if k_folder_name=my_current_folder>filter-each--active</cms:if>""><cms:show k_folder_title /></a>
    </cms:folders>
  </div>