Hi! I have been using couch for ages and I love how versatile it is across all new technologies! I've built a responsive bootstrap site with smoothscroll, etc., and I have a responsive gallery inside. Originally I had used the regular portfolio image setup, which loads a larger copy of that image in a lightbox (I'm using Nivo Lightbox). I was finding that I had way too many similar images that really should be part of a set, and not taking up a whole spot in the gallery. So I redid the whole thing using dynamic folders with extended options (I can add tags so the isotope sorting would work) The goal was to have a main category image display (which would be the folder image), and then, when clicked, it would load the first image within that folder in the lightbox. But it seems all I can get it to do is load the page containing all folder images. Show gg image isn't working, I'm assuming because I'm in the folders view and not the images list. Is there a way to capture the link to the first image within a given folder, skipping the page displaying all folder images? Any help would be very much appreciated!
Here is my code:
Template Page Header code:
Template Page body (the important part anyway)
Extended folders code:
Page I want to display the gallery on:
You can view the live example here:
Template page: http://illustrationfixations.com/portfoliogallery.php
Main page (the one that counts!): http://illustrationfixations.com/indextest.php
Everything works, I just can't get it to load the first image from within the folder. Is this possible?
Here is my code:
Template Page Header code:
- Code: Select all
<?php require_once'couch/cms.php'; ?>
<cms:template title='Galleryportfolio' clonable='1' dynamic_folders='1' gallery='1' dynamic_folders='1' folder_masterpage='portfolio-folders.php'>
<cms:editable
name='gg_image'
label='Image'
desc='Upload your main image here'
width='1100'
height='800'
show_preview='1'
preview_height='200'
type='image'
/>
<cms:editable
name='gg_thumb'
label='Image Thumbnail'
desc='Thumbnail of the main image above'
width='800'
height='600'
enforce_max='1'
assoc_field='gg_image'
show_preview='1'
type='thumbnail'
/>
<cms:editable
name='my_thumb_2'
label='Image Thumbnail 2'
desc='Second thumbnail of the main image above'
width='800'
height='600'
assoc_field='gg_image'
show_preview='1'
type='thumbnail'
/>
<cms:editable
name='my_desc'
label='Description'
height='60'
type='textarea'
/>
</cms:template>
Template Page body (the important part anyway)
- Code: Select all
<div id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<h1 class="heading bold"><cms:show k_page_title /></h1>
<h2 class="subheading"><cms:show my_desc /></h2>
<cms:if k_is_list >
<!-- gallery folders -->
<div class="iso-section">
<ul class="filter-wrapper clearfix">
<li><a href="#" data-filter="*" class="selected opc-main-bg">All</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".linedrawings">Line Drawings</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".3D">3D</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".character">Characters</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".scenes">Scenes</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".technical">Technical</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".instructional">Instructional</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".flat">Flat</a></li>
</ul>
<div class="iso-box-section wow fadeIn" data-wow-delay="0.9s">
<div class="iso-box-wrapper col4-iso-box">
<cms:set my_page="<cms:gpc 'pg' method='get' />" />
<cms:if my_page lt '2' >
<cms:folders childof=k_folder_name hierarchical='1' depth='1' include_custom_fields='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="iso-box <cms:show tags /> col-lg-4 col-md-4 col-sm-4 col-xs-6" style="border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #aa7f4d; border-left: 2px solid #aa7f4d;">
<a href="<cms:show k_folder_link />" class="outside">
<img src="<cms:show my_folder_image />" class="img-responsive" alt="<cms:show k_folder_title />"></a>
</div>
</cms:folders>
</cms:if>
</div>
</div>
</div>
<!-- gallery images-->
<div class="iso-section">
<div class="iso-box-section wow fadeIn" data-wow-delay="0.9s">
<div class="iso-box-wrapper col4-iso-box">
<cms:pages folder=k_folder_name include_subfolders='0' limit='18' paginate='1'>
<div class="iso-box col-lg-4 col-md-4 col-sm-4 col-xs-6">
<a href="<cms:show gg_image />" data-lightbox-gallery="<cms:show k_page_foldername/>" title="<cms:show my_desc/>"><img src="<cms:show my_thumb_2 />" alt="<cms:show k_page_title />"></a>
</div>
</cms:pages>
</div>
</div>
</div>
</div><div class="col-md-12">
<cms:else /><!-- k_is_page -->
<div class="col-md-8 col-md-offset-2">
<img alt="<cms:show k_page_title />" src="<cms:show gg_image />"/>
</div>
</cms:if>
<div class="col-md-12">
<p> </p>
<p> </p>
<p><a href="http://www.illustrationfixations.com/index.php#portfolio">- back</a></p>
<p> </p>
</div>
</div>
</div>
</div>
</div>
Extended folders code:
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Portfolio Folders' clonable='1' hidden='1'>
<cms:editable name="my_categories" label="Categories" desc="Check all applicable"
opt_values='linedrawings | 3D | scenes | technical | instructional | flat | character'
type='checkbox'
/>
<cms:editable name='tags' label='Tags' desc='copy and paste tags from above checkbox' />
</cms:template>
<?php COUCH::invoke(); ?>
Page I want to display the gallery on:
- Code: Select all
<div class="iso-box-section wow fadeIn" data-wow-delay="0.9s">
<div class="iso-box-wrapper col4-iso-box">
<cms:folders masterpage='portfoliogallery.php' include_custom_fields='1'>
<div class="iso-box <cms:show tags /> col-lg-4 col-md-4 col-sm-4 col-xs-6" style="border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #aa7f4d; border-left: 2px solid #aa7f4d;">
<a href="<cms:show gg_image />" data-lightbox-gallery="<cms:show k_page_foldername/>" title="<cms:show my_desc/>">
<img src="<cms:show k_folder_image />" class="img-responsive" alt="<cms:show k_folder_title />"></a>
</div>
</cms:folders>
</div>
</div>
You can view the live example here:
Template page: http://illustrationfixations.com/portfoliogallery.php
Main page (the one that counts!): http://illustrationfixations.com/indextest.php
Everything works, I just can't get it to load the first image from within the folder. Is this possible?