Hi All,

please help me to write couch cms code, so this istope filter menu work after uploading files from couch cms panel.

here is the html code of gallery page.

<div class="filter-container wow bounceInLeft">
<ul class="filters">
<li class="button filter selected"><a href="#" data-filter="*">Show All</a></li>
<li class="button filter"><a href="#" data-filter=".design">Design</a></li>
<li class="button filter"><a href="#" data-filter=".illustration">Illustration</a></li>
<li class="button filter"><a href="#" data-filter=".branding">Branding</a></li>
<li class="button filter"><a href="#" data-filter=".print">Print</a></li>
</ul>
</div><!-- end filer-container -->

<ul id="portfolio" class="masonry-grid">
<li class="masonry-grid-item illustration">
<div class="hover-box">
<div class="info">
<h5>Tell Me Why the Sky is Red</h5>
<span>Illustration</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_tell_me_why_the_sky_is_red.jpg" alt="">
</li>
<li class="masonry-grid-item design">
<div class="hover-box">
<div class="info">
<h5>Save Our Souls</h5>
<span>Design</span>
<a href="images/thumb_save_our_souls.jpg" data-pretty="prettyPhoto" class="zoom"></a>
</div>
</div>
<img src="images/thumb_save_our_souls.jpg" alt="">
</li>
<li class="masonry-grid-item illustration">
<div class="hover-box">
<div class="info">
<h5>Endless Journey</h5>
<span>Illustration</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_endless_journey.jpg" alt="">
</li>
<li class="masonry-grid-item branding">
<div class="hover-box">
<div class="info">
<h5>City P Gate</h5>
<span>Branding</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_p_gate.jpg" alt="">
</li>
<li class="masonry-grid-item branding">
<div class="hover-box">
<div class="info">
<h5>Protect Me From What I Want</h5>
<span>Branding</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_protect_me_from_what_i_want.jpg" alt="">
</li>
<li class="masonry-grid-item print">
<div class="hover-box">
<div class="info">
<h5>The Hope</h5>
<span>Print</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_the_hope.jpg" alt="">
</li>
<li class="masonry-grid-item print">
<div class="hover-box">
<div class="info">
<h5>A Life Jacket in the Desert</h5>
<span>Print</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_a_life_jacket_in_the_desert.jpg" alt="">
</li>
<li class="masonry-grid-item design">
<div class="hover-box">
<div class="info">
<h5>City P Streetlights</h5>
<span>Design</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_city_p_streetlights.jpg" alt="">
</li>
<li class="masonry-grid-item print">
<div class="hover-box">
<div class="info">
<h5>Home Sweet Home</h5>
<span>Print</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_home_sweet_home.jpg" alt="">
</li>
<li class="masonry-grid-item branding">
<div class="hover-box">
<div class="info">
<h5>Stellar Collision</h5>
<span>Branding</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_stellar-collision.jpg" alt="">
</li>
<li class="masonry-grid-item illustration">
<div class="hover-box">
<div class="info">
<h5>Everlasting Blues</h5>
<span>Illustration</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_everlasting_blues.jpg" alt="">
</li>
<li class="masonry-grid-item branding">
<div class="hover-box">
<div class="info">
<h5>Let's Get Lost</h5>
<span>Branding</span>
<a href="portfolio-single-images.html"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<img src="images/thumb_let__s_get_lost.jpg" alt="">
</li>
</ul>

</div><!--end main-content-->

I'm not certain that I fully understand exactly what you're trying to achieve. If I understand correctly, you have a 'filter' menu, where the user can select the portfolio 'category' of items they want to view - correct?

The main question is: once the user has selected the category from the menu, WHERE do you want the items displayed?

Option 1) On a different page by themselves: this is the easiest and most common option, and is actually covered in the PORTFOLIO TUTORIAL, here: http://www.couchcms.com/docs/tutorials/

Option 2) On a the same page as the menu: in that case, you will have to use javascript to dynamically load the selected list of items onto the page, without navigation. The principle is the same as in 'option 1', except that instead of navigating to a different page, the result is loaded onto the current page via ajax.

Does that help?

[cheesypoof]

@maximusmax, are you trying to create functionality like the following Isotope example - http://isotope.metafizzy.co/filtering.html? Please take a look at a similar topic - viewtopic.php?f=4&t=7560.

@cheesypoof yes I am trying to create funtionality like the following isotope example you have provided and I have already checked the viewtopic.php?f=4&t=7560. but it did not worked out,

[cheesypoof]

You're not giving me much to go on with "it did not work out" @maximusmax

Let's start with the filter buttons - these are just your template folders:

Code: Select all

<cms:folders>
    <cms:if k_folder_pagecount>
        <li class="button filter"><a data-filter=".folder-<cms:show k_folder_name/>" href="#"><cms:show k_folder_title/></a></li>
    </cms:if>
</cms:folders>

We only output folders with pages. The data-filter attribute gets a selector specific to each folder.

Each gallery image is a page:

Code: Select all

<cms:pages>
    <li class="masonry-grid-item folder-<cms:show k_page_foldername/>">
        <div class="hover-box">
            <div class="info">
                <h5><cms:show k_page_title/></h5>
                <span><cms:show k_page_foldertitle/></span>
                <a class="zoom" data-pretty="prettyPhoto" href="<cms:show gg_image/>"></a>
            </div>
        </div>
        <img alt="<cms:show k_page_title/>" src="<cms:show gallery_thumb/>"/>
    </li>
</cms:pages>

The above code is a very standard pages listing. The only distinguishing aspect is the folder-specific class that we also output in the filter buttons.

@cheesypoof Thanks for the code's, I have used the code and its worked.

Thanks
maximus