Forum for discussing general topics related to Couch.
2 posts Page 1 of 1
Hi... ok I am soooo extremely new to using COUCH but so far I think it is absolutely wonderful!! However being a COMPLETE newbie to COUCH I would like to request help with the following:

I have a Colorbox gallery that I have setup for a client. You can view the gallery page here:
http://ezautosales.biz/sacjobs/sys/gallery.php

As you can see there is a grid of thumbnails for the gallery... however there is also the option to change the gallery view to display details related to each image next to each thumbnail in a vertical list down the page. If you click the 2 icons in the top right hand corner of the gallery grid you can see how the gallery toggles back and forth between the grid view and the view for the detailed list of images.

If anybody could provide me the proper code in order to make the thumbnails (which should be linked to the larger images that open in the colorbox window when clicked) as well as the description text for each image that you see in the "detailed list" view of the gallery editable so that my client can easily add new images with the description text to the gallery as well as edit/change existing descriptions and images I would be forever grateful! I have read every post in the forum related to images, galleries, colorbox, lightbox, etc. and I just do not seem to understand where to even begin even though I have gone over each related post time and time again. Please any help would be so very much appreciated.

Here is my code for the gallery page so far:

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Our Work' />
<!DOCTYPE html SYSTEM "http://www.sacdesigner.net/xhtml1-iframe.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sculpt Your Stone- An Artificial Rock Making Process - Our Work</title>

<!-- ////////////////////////////////// -->
<!-- //      Start Stylesheets       // -->
<!-- ////////////////////////////////// -->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/custom-style.css" rel="stylesheet" type="text/css" />
<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/noscript.css" rel="stylesheet" type="text/css" media="screen,all" id="noscript" />

<!-- ////////////////////////////////// -->

<!-- //      Javascript Files        // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/filterable.pack.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">         
   $(document).ready(function(){
   //Corner Setting for IE8
   $("#pagetitle-wrapper").corner("8px");   
         
   // Portfolio Setting
   $('#controls a').click(function(){   
   var r = $(this).attr('rel');   
   var c = $('#portfolio').attr('class');   
   if (r != c) {
         $('#controls a').removeClass('active');
         $(this).addClass('active');
         $('#portfolio').fadeOut(100, function(){
         $('#portfolio').removeAttr('class');
         $('#portfolio').addClass(r);
         $('#portfolio').fadeIn(100);                     
         });            
         }               
      });            
   });      

   //Colorbox Jquery
   $(document).ready(function(){            
      $("a[rel='portfolio']").colorbox({transition:"fade"});            
      $(".login").colorbox({width:"400px"});            
   });

    // Background Slide Setting   
   var scrollSpeed = 50; // speed in milliseconds   
   var current = 0; // set the default position   
   var direction = 'h'; // set the direction
   function bgscroll(){
       current -= 1; 
       $('div#glow-bg-inner').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");   
   }
    setInterval("bgscroll()", scrollSpeed);      
</script>

</head>

<body>   
   <div id="container">       
        <div id="top-container-inner">
           
            <div id="glow-bg-inner">
           
               <!-- BEGIN OF MAINMENU -->
                <div id="menu-wrapper">
                    <div id="menu-container">
                        <div id="mainmenu">
                            <ul id="menu">

                                <li><a href="index.html">Home</a></li>
                                <li><a href="history.html">History</a></li>
                                <li><a href="products.html">Products</a></li>
                                <li class="current"><a href="gallery.html">Our&nbsp; Work</a></li>
                                <li><a href="videos.html">Instructional&nbsp; Videos</a></li>

                                <li><a href="contact.html">Contact&nbsp; Us</a></li>

                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div id="login-wrapper"><a class="login" href="login.html"><span>Login</span></a></div>

                    </div>
                </div>
                <!-- END OF MAINMENU -->

               
                <!-- BEGIN OF HEADER --><br><br> <br><br>
<div><h1>&nbsp;&nbsp;&nbsp;<a href="index.html"><img src="images/logo.png" alt="" /></a></h1><br><br><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Our Rock Sculpting Work Speaks For Itself!</h3>                                         
</div>               
<!-- END OF HEADER --><br>
               
                <!-- BEGIN OF CONTENT -->

                <div id="content">
                   <div class="maincontent">             
                       
                        <div id="top-content">
                           <!-- begin of portfolio filter -->
                            <ul id="portfolio-filter">

                                <li>For more details on each project please use the icons on the right. For full view of our work, click on the thumbnail of your &nbsp;&nbsp;&nbsp;&nbsp;choice in the gallery.</li>
                            </ul>

                            <!-- end of portfolio filter -->

                            <div id="controls"><a rel="icon" class="active"><img src="images/thumb-select.png" alt="" /></a><a rel="list"><img src="images/list-select.png" alt="" /></a></div>    
                        </div>
                       
                        <div class="col-1">
                           <!-- begin of portfolio list -->
                            <ul id="portfolio" class="icon">
            
                                <li class="category1">

                                    <div>

                                    <a href="images/portfolio-big/w-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb.jpg" alt="" /></a>

                                    <h6>Project Name 1</h6>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
                                    <ul class="services-list">
                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>
                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
                                    </ul>

                                    </div>
                                </li>
                               
                                <li class="category2">
                                    <div>
                                    <a href="images/portfolio-big/w2-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb2.jpg" alt="" /></a>
                                    <h6>Project Name 2</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>
                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                               
                                    </ul>
                                    </div>

                                </li>

                               
                                <li class="category3">

                                    <div>
                                    <a href="images/portfolio-big/w3-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb3.jpg" alt="" /></a>
                                    <h6>Project Name 3</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
                                    </ul>

                                    </div>

                                </li>

                               
                                <li class="category4">
                                    <div>

                                    <a href="images/portfolio-big/w4-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb4.jpg" alt="" /></a>
                                    <h6>Project Name 4</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                 
                                    </ul>

                                    </div>

                                </li>

                               
                                <li class="category1">

                                    <div>

                                    <a href="images/portfolio-big/w5-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb5.jpg" alt="" /></a>
                                    <h6>Project Name 5</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>
                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                     
                                    </ul>

                                    </div>

                                </li>

                               
                                <li class="category2">
                                    <div>
                                    <a href="images/portfolio-big/w6-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb6.jpg" alt="" /></a>
                                    <h6>Project Name 6</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
                                    </ul>
                                    </div>

                                </li>

                               
                                <li class="category3">

                                    <div>

                                    <a href="images/portfolio-big/w7-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb7.jpg" alt="" /></a>
                                    <h6>Project Name 7</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                     
                                    </ul>

                                    </div>

                                </li>

                               
                                <li class="category4">
                                    <div>

                                    <a href="images/portfolio-big/w8-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb8.jpg" alt="" /></a>
                                    <h6>Project Name 8</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>
                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
                                    </ul>

                                    </div>

                                </li>


<li class="category1">

                                    <div>

                                    <a href="images/portfolio-big/w9-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb9.jpg" alt="" /></a>

                                    <h6>Project Name 9</h6>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">
                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>
                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
                                    </ul>

                                    </div>
                                </li>

                               
                                <li class="category2">
                                    <div>
                                    <a href="images/portfolio-big/w10-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb10.jpg" alt="" /></a>
                                    <h6>Project Name 10</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                               
                                    </ul>
                                    </div>

                                </li>

                               
                                <li class="category3">

                                    <div>
                                    <a href="images/portfolio-big/w11-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb11.jpg" alt="" /></a>
                                    <h6>Project Name 11</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
                                    </ul>

                                    </div>

                                </li>

                               
                                <li class="category4">

                                    <div>

                                    <a href="images/portfolio-big/w12-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb12.jpg" alt="" /></a>
                                    <h6>Project Name 12</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                 
                                    </ul>

                                    </div>
                                </li>

                               
                                <li class="category1">

                                    <div>

                                    <a href="images/portfolio-big/w13-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb13.jpg" alt="" /></a>
                                    <h6>Project Name 13</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                     
                                    </ul>

                                    </div>

                                </li>

                               
                                <li class="category2">

                                    <div>
                                    <a href="images/portfolio-big/w14-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb14.jpg" alt="" /></a>
                                    <h6>Project Name 14</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
                                    </ul>
                                    </div>

                                </li>

                               
                                <li class="category3">

                                    <div>

                                    <a href="images/portfolio-big/w15-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb15.jpg" alt="" /></a>
                                    <h6>Project Name 15</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                     
                                    </ul>

                                    </div>

                                </li>

                               
                                <li class="category4">

                                    <div>

                                    <a href="images/portfolio-big/w16-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb16.jpg" alt="" /></a>
                                    <h6>Project Name 16</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>

                                    <ul class="services-list">

                                       <li>Inventore veritatis et quasi architecto beatae vitae</li>

                                        <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
                                        <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
                                        <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
                                    </ul>

                                    </div>
                                </li>                                 
                               
                            </ul>

                            <!-- end of portfolio list -->                              
                        </div>                                       
               
                </div>

                <!-- END OF CONTENT -->                             
                       
                <div id="bottom-wrapper">                           
                         <div id="bottom-content">                       
                               <div class="logofooter-column">&nbsp; &nbsp;</div>                       
                 <div class="contactbottom-column">                           
                                      <h6>Contact Us</h6>                           
                                      <p>Toll Free# 855.55.797.8663 <br/>                           
                                         Terry@sculptyourstone.com <br/>                           

                                    Matt@sculptyourstone.com                                                             </p>                       

</div>                                               
                           <div class="linkbottom-column">                           

                                 <h6>Helpful Links</h6>                           


<ul class="list-bottom">                               
<li><a href="links.html">Color Examples</a></li>                               
<li><a href="links.html">Texture Examples</a></li>                               
<li><a href="links.html">Pattern Examples</a></li>                           
</ul>                       
</div>                       

<div class="mailingbottom-column">
                            <h6>Mailing List</h6>

                            <p>Sign up if you would like to receive occasional tips & tricks from us.</p>

                            <form id="newsletter" action="#" method="get">

                                <fieldset class="search-fieldset">
                                <input type="text" id="nlt-form" value="Your email address..." onblur="if (this.value == ''){this.value = 'Your email address...'; }" onfocus="if (this.value == 'Your email address...') {this.value = ''; }" />
                                <input type="submit" class="sub-button" value="Go" />                           
                                </fieldset>                        
                                </form>
                        </div>            
                    </div>

                </div>                                               


<div id="copyright-text">Copyright &copy; 2011 Sculpt Your Stone. All rights reserved &nbsp; | &nbsp; Design by <a href="http://sacdesigner.net">Sacdesigner</a> &nbsp; | &nbsp; <a href="#top" class="scroll">back to top</a>&nbsp;<a href="#top" class="scroll backtop"><img src="images/back-top.png" alt="" /></a>               

</div>

                   
               </div>

               
               
            </div>   
                       
        </div>                                       

<script type="text/javascript">$('#noscript').remove();</script>
<div style="clear:both; width:0; height:0; margin:0 "><br>&nbsp;<br></div>   
</body>
</html>
<?php COUCH::invoke(); ?>


Thank you in advance... and thank you for the wonderful work you have done creating COUCH. So far it has been so much better than any other CMS platform I have attempted to integrate by far!!
Hello and welcome to our forums :)

I had a look at the link you posted. As with all the galleries, your gallery too consists of discrete items that are being listed on the page ('grid' and 'list' being handled by JavaScript)

To implement this in Couch, we can follow the standard method of creating one cloned page for each of the gallery items. Each cloned page will have the relevant editable regions containing data (thumbnail, main image, description etc.) pertaining to that gallery item.

This is how we can proceed -

First of all declare your template as 'clonable' so that we can create multiple pages out of it.
Code: Select all
<cms:template title='Our Work' clonable='1'>

</cms:template>

Now define all the editable regions required to capture the data for each gallery item. A far as I could see, each of your gallery item requires the following inputs -
1. Project title
2. Project's main image
3. The image's title
4. Thumbnail of the image above
5. Description of the project.

Every cloned page already has a 'title' system field so we can skip that and create the rest like this -
Code: Select all
<cms:template title='Our Work' >

   <cms:editable name='project_image' label='Main Image'
      height='500'
      show_preview='1'
      type='image'
   />
   
   <cms:editable name='project_image_title' label='Image Title'
      type='text'
   />
   
   <cms:editable name='project_image_thumb' label='Image Thumbnail'
      width='198'
      height='202'
      show_preview='1'
      assoc_field='project_image'
      type='thumbnail'
   />
   
   <cms:editable name='project_desc' label='Description'
      type='richtext'
   />

</cms:template>


Visit gallery.php being logged-in as super-admin. The admin-panel should now display a default page for this template along with the editable regions we defined above.

Create a few cloned pages - each representing a gallery item.

With the items (cloned pages) in place, we can now move on to getting them listed.

Listing the items.
Listing is quite straightforward once we zero-in on the relevant portion of your HTML template.

Following is the part where you are displaying the thumbnails of the gallery (I am showing it in outline for now - will expand it in the steps to come)
Code: Select all
<ul id="portfolio" class="icon">
   <li class="category1">..</li>
   <li class="category2">..</li>
   <li class="category3">..</li>
   <li class="category4">..</li>
   <li class="category1">..</li>
   <li class="category2">..</li>
   <li class="category3">..</li>
   <li class="category4">..</li>
   <li class="category1">..</li>
   ..
</ul>

Each <li>..</li> represents a single item of the gallery and contains the thumbnail, main image, title, description etc.

As is the norm with almost all the lists you'll come across, all the items within this list are almost identical in HTML structure (the content, of course, varies).
Therefore instead of handcoding all the items in the list, we can use only one item to represent all the items and then use Couch to repeat that item for as many items as are present in the list. This is how we proceed -
1. Isolate a single item that can be repeated. Our code now becomes -
Code: Select all
<ul id="portfolio" class="icon">
   <li class="category1">..</li>
</ul>


2. Wrap around this single <li>, the Couch 'pages' tag which will repeat the <li> as many times as there are cloned pages for the specified template -
Code: Select all
<ul id="portfolio" class="icon">
<cms:pages masterpage='gallery.php' >
   <li class="category1">..</li>
</cms:pages>
</ul>


If you visit your template now you'll find the first item being repeated the number of times there are cloned pages for gallery.php.

Now to make changes to this single <li> to make it represent all the cloned pages.
As we know, Couch makes available the data contained within the editable regions of the pages as variables of the same name.
Let us substitute the hardcoded HTML by the dynamic variables.

This is the expanded <li>..</li> portion showing the existing hardcoded markup -
Code: Select all
<ul id="portfolio" class="icon">
<cms:pages masterpage='gallery.php'>
<li class="category1">
   <div>
      <a href="images/portfolio-big/w-big.jpg" rel="portfolio" title="Project Item"><img src="images/portfolio-thumb/w-thumb.jpg" alt="" /></a>

      <h6>Project Name 1</h6>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate.</p>
      <ul class="services-list">
         <li>Inventore veritatis et quasi architecto beatae vitae</li>
         <li>Corporis suscipit laboriosam nisi ut aliquid exea commodi</li>                   
         <li>Voluptatibus maiores alias consequatur aut perferendis</li>                               
         <li>Soluta nobis eligendi optio cumque nihil impedit</li>                                       
      </ul>
   </div>
</li>
</cms:pages>
</ul>


After replacing the relevant parts by the variables, we end up with -
Code: Select all
<ul id="portfolio" class="icon">
<cms:pages masterpage='gallery.php'>
<li class="category1">
   <div>
      <a href="<cms:show project_image />" rel="portfolio" title="<cms:show project_image_title />"><img src="<cms:show project_image_thumb />" alt="" /></a>

      <h6><cms:show k_page_title /></h6>

      <cms:show project_desc />
   </div>
</li>
</cms:pages>
</ul>


Visit gallery.php again and you should get a listing of the items you created as cloned pages.

One minor point remains.
The original listing marks each successive <li> as 'category1', 'category2' etc. and wraps around to 'category1' after every four items.
To replicate the behaviour, change the following line
<li class="category1">
to
<li class="category<cms:zebra '1' '2' '3' '4' />">

and that should be it.

I haven't tried out the code on my system so there could be some minor syntactic mistakes in the code but over all this is the logic that can be used.
If you give it a second look, you'll find that it almost the same as the 'Portfolio' section of our tutorial. The same logic can be applied to almost any section that has repeated elements.

Please try it out and let me know if you have any questions. Thanks.
2 posts Page 1 of 1