Problems, need help? Have a tip or advice? Post it here.
4 posts Page 1 of 1
Hi,

I have a lightbox called Colorbox and would like to use Couch to enable my client to add their own photos. I've already got Colorbox working, so no problem there. Ideally, I would like to be able to add a new category and within that category have several photos. This format could then be repeated as many times as the client requires.

Is there a way of doing this?

Many thanks,

G.
Hi,

If it's a sort of gallery that you want, the process is very similar to how the 'portfolio' section has been done in Couch's tutorial.

You could, for example, create a clonable template named 'photos.php'. Turn the dynamic folders on by setting dynamic_folders='1' (because we want the client to create categories on their own - see http://www.couchcms.com/docs/miscellane ... lders.html).

Each cloned page created out of this template will represent a discrete photo and can be placed in its own category.

To capture the individual photo's data, create the relevant editable regions. The fields could be -
1. A region of type 'image'. This will contain the photo's path. Set the maximum permissible height and width.
2. If required, create an (or several) associated regions of type 'thumbnail'.
3. If required, a 'richtext' area to enter details of the photograph.
The caption of the photo can be the built-in 'title' field for every clonable page.

Create the list-view to display the thumbnails and captions. The thumbnails can be linked via the colorbox you mentioned to show the main image. Please see the portfolio section of our tutorials for one method of doing this.
The page-view is probably not required here.

This done, the client can now simply create a new page for each new photo he wishes to add. He can then upload the photo and add other details in this new page, select the right category (folder) and save. That is all hat is needed.

Is this what you had in mind? Do let me know.
Thanks.
Hi,

Thank you for your suggestions outlined above. However, I've tried to get this lightbox working but to no avail!

This is the HTML code I'm working with:

Code: Select all
      <ul>
           <li>
               <div>
                    <a href="#" rel="cbox"><img src="/images/223x112.gif" width="223" height="112" alt="" /></a>
               
                <div style="display: none">
                    <a href="#" rel="cbox"></a>
                    <a href="#" rel="cbox"></a>
                    <a href="#" rel="cbox"></a>
                    <a href="#" rel="cbox"></a>
                    <a href="#" rel="cbox"></a>
                </div><!--end display: none-->
               
                    <h4>Gallery Title</h4>
                    <p>Venue <br /> Saturday 24 April, 2010</p>
                    <h5><span>5 photos</span> <br /> Photos by Some Body</h5>
                   
                </div>
            </li>
        </ul>


And here is the Colorbox script:

Code: Select all
<script>
      $(document).ready(function(){
         $("a[rel='cbox']").colorbox({opacity:"0.90"});
      });
</script>



As you can see, the first image appears on the page with the rest of the images hidden by the style "display: none". I want to be able to 'upload' images via Couch and for them to appear in the correct order in the HTML.

The rel="cbox" is the Colorbox tag used to include all images within one gallery set.

Can you help?

Many thanks in advance!

G.
Try this -
Code: Select all
<ul>
   <li>
      <div>
         <cms:pages masterpage='photos.php' limit='1'>
            <a href="<cms:show main_image />" rel="cbox"><img src="<cms:show main_image />" width="223" height="112" alt="" /></a>
         </cms:pages>
         
         <div style="display: none">
            <cms:pages masterpage='photos.php' offset='1'>
               <a href="<cms:show main_image />" rel="cbox"></a>
            </cms:pages>
         </div><!--end display: none-->

         <h4>Gallery Title</h4>
         <p>Venue <br /> Saturday 24 April, 2010</p>
         <h5><span>5 photos</span> <br /> Photos by Some Body</h5>

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

In the code above we assume that the name of the template is 'photos.php' and that of the editable region containing the image is 'main_image'. Please set them to match your setup.

To explain the code a bit -
we use the 'pages' loop twice - first time to bring in only the first page (limit='1') and the second time to bring in the rest of the images except the first we have already fetched (this we do by offset='1').

Hope this helps.
4 posts Page 1 of 1