Hei Guys,
I have been having problems setting up a filterable photo gallery that is part of a One-page (parallax) website.
So far, I have created a separate page, gallery.php as per the instructions in the tutorials and eventually been able to create folders that i have in return uploaded relevant images into. The gallery features isotope filtering with three different categories. No subfolders. That is, All, Boys, Girls, and Others.
The code in the gallery.php is as follows:
I am not certain where I am going wrong because as much as the Admin section seems functional and OK, i cannot be able to make the filters work (the folder names are visible in the front-end). In short, displaying the gallery in the front-end and making the filters work is the main concern.
Here is the code from the index.php (main page):
Any assistance would be highly appreciated.
Thanks.
I have been having problems setting up a filterable photo gallery that is part of a One-page (parallax) website.
So far, I have created a separate page, gallery.php as per the instructions in the tutorials and eventually been able to create folders that i have in return uploaded relevant images into. The gallery features isotope filtering with three different categories. No subfolders. That is, All, Boys, Girls, and Others.
The code in the gallery.php is as follows:
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Gallery' clonable='1' dynamic_folders='0' gallery='1'>
<!-- filters -->
<cms:folder name="beauty" title="girls" />
<cms:folder name="theatre" title="boys" />
<cms:folder name="various" title="various" />
<cms:editable
name="gg_image"
label="Image"
desc="Preview image"
height="800"
show_preview='1'
preview_height='200'
type="image"
/>
<cms:editable
name="gg_thumb"
assoc_field="gg_image"
label="Image Thumbnail"
desc="Thumbnail image"
width='115'
height='115'
enforce_max='1'
type="thumbnail"
/>
<cms:editable
name = 'grid_thumb'
assoc_field = 'gg_image'
label = 'Grid Thumbnail Image'
desc = 'Thumbnail Image'
width = '420'
height = '320'
crop = '1'
type = 'thumbnail'
/>
<cms:editable
name='image_desc'
label='Description'
height='40'
type='textarea'
/>
<cms:editable
name='project_designer'
label='Designer Name'
height='40'
type='richtext'
/>
</cms:template>
<?php COUCH::invoke(); ?>
I am not certain where I am going wrong because as much as the Admin section seems functional and OK, i cannot be able to make the filters work (the folder names are visible in the front-end). In short, displaying the gallery in the front-end and making the filters work is the main concern.
Here is the code from the index.php (main page):
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Main Pages' >
<! -------- -->
</cms:template>
<html>
<body>
<! -- content from various sections of the website -->
<!-- portfolio -->
<div id="portfolio" class="sections ws">
<div class="content">
<div class="quote-icon"><i class="fa fa-suitcase fa-2x"></i></div>
<div class="container grid1">
<h3 class="sections-head">Portfolio</h3>
<h2>My work</h2>
<div class="small-separator"></div>
</div>
<div id="options" class="clear">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="filter actcat"><a href="#" data-filter="*">All</a></li>
<cms:folders masterpage='gallery.php' hierarchical='1' depth='1'>
<li class="filter">
<a href="#" data-filter=".folder<cms:show k_folder_name />"></a>
<cms:show k_folder_name />
</li>
</cms:folders>
</ul>
</div>
<div class="aih">
<ul id="folio_container" class="grid-full animaper">
<cms:pages masterpage='gallery.php' include_subfolders='1' >
<li class="box mix mix_all folder-<cms:show k_page_folder_name /> all">
<a href="<cms:show gg_image />" data-rel="prettyPhoto[gallery] class="respimg"
alt="<cms:show k_folder_title />">
<img src="<cms:show grid_thumb />" alt="<cms:show k_folder_title />">
<div class="folio-name clear">
<div class="folio-overlay">
<span class="overlay red"></span>
<h4><cms:show project_designer /></h4>
<h6><cms:show k_folder_name /></h6>
</div>
</div>
</a>
</li>
</cms:pages>
</ul>
</div>
</div>
</div>
<!-- end portfolio -->
</body>
</html>
<?php COUCH::invoke(); ?>
Any assistance would be highly appreciated.
Thanks.
