CouchCMS Forum Bug Reporting and Troubleshooting
Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
Post a reply
Previous Next

How to get this photo galery going?

avatar
janvandijk96
Registered User
Hi Couchers!

I don't know if anyone is willing to help me but i've been trying to get the photo galery for my new site to work for the past days. All of the other pages are working but I just can't get the galery to work myself. The HTML site is finished and everything is working but I just don't know how to get it to work. I've tried to kind of clone the design of the sample photo galery but that didn't work. I've tried to do all the coding myself but I guess I'm just not experienced enough and do not know where to start. Can someone point me in the right direction and tell me where to start and what to do? I would really really appreciate it! Thanks in advance.

I've uploaded a example site on my server, you can look it up at http://ohm-media.nl/couchforumexample. The code is listed below.

Edit: The site is based on Zurb's Foundation

Code: Select all
<!doctype html>
<html class="no-js" lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Sitenaam - Pagina</title>
      <link rel="stylesheet" href="css/foundation.css" />
      <script src="js/modernizr.js"></script>
   </head>

   <body>
   
<!-- START MENU -->
   <nav class="top-bar hide-for-small" data-topbar>
      <ul class="title-area">
         <li class="name">
            <h1><a href="index.html">Sitenaam</a></h1>
         </li>
      </ul>

      <section class="top-bar-section">      

         <ul class="left">
            <li><a href="#">Pagina</a></li>
            <li><a href="#">Pagina</a></li>
            <li><a href="#">Pagina</a></li>
         </ul>
         
         <ul class="right">
            <li><a href="#">Contact</a></li>
         </ul>
         
      </section>
   </nav>

<div class="off-canvas-wrap docs-wrap">
   <div class="inner-wrap">
      <nav class="tab-bar show-for-small">
         <section class="left-small">
            <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
         </section>
         <section class="right tab-bar-section">
            <h1 class="title">Sitenaam</h1>
         </section>
      </nav>

   <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
            <li><label>Menu</label></li>
            <li><a href="#">Pagina</a></li>
            <li><a href="#">Pagina</a></li>
            <li><a href="#">Pagina</a></li>
      </ul>
    </aside>
<!-- ENDE MENU -->

    <section class="main-section">

<!-- START IMAGE HEADER -->
   <img data-interchange="[img/header_small.gif, (small)], [img/header_medium.gif, (medium)], [img/header_large.gif, (large)]" />
<!-- END IMAGE HEADER -->



<!-- START GALERY -->
   <div class="row">
      <div class="large-9 medium-8 small-12 columns">

         <h1>Galery</h1>
               <ul class="clearing-feature" data-clearing>
                  <li class="clearing-featured-img"><a class="th" href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder1" src="http://placehold.it/100x100.gif"></a></li>
                  <li><a href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder1" src="http://placehold.it/100x100.gif"></a></li>
                  <li><a href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder1" src="http://placehold.it/100x100.gif"></a></li>
                  
                  <li class="clearing-featured-img"><a class="th" href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder2" src="http://placehold.it/100x100.gif"></a></li>
                  <li><a href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder2" src="http://placehold.it/100x100.gif"></a></li>
                  <li><a href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder2" src="http://placehold.it/100x100.gif"></a></li>

                  <li class="clearing-featured-img"><a  class="th" href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder3" src="http://placehold.it/100x100.gif"></a></li>
                  <li><a href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder3" src="http://placehold.it/100x100.gif"></a></li>
                  <li><a href="http://placehold.it/1920x1080.gif"><img data-caption="Galery/folder3" src="http://placehold.it/100x100.gif"></a></li>
               </ul>         


      </div>
<!-- END GALERY -->

   <hr class="show-for-small-only" />

<!-- START SIDEBAR -->
      <div class="large-3 medium-4 small-12 columns">
         <h1>Sidebar</h1>
      </div>
   </div>
<!-- EIND SIDEBAR -->

<!-- START FOOTER -->
   <footer class="row">
      <hr />
         
         <div class="row show-for-medium-up">
            <div class="medium-6 columns">
               <p>&copy; Bedrijfsnaam, Naam.</p>
            </div>

            <div class="medium-6 columns">
               <p class="right">Design & Hosting door <a href="http://ohm-media.nl/">Ohm-Media</a>
            </div>
         </div>
         
         <div class="show-for-small-only">
            <div class="small-12 colums">
               <center>
                  <p>&copy; Bedrijfsnaam, Naam.<br />
                  Design & Hosting door <a href="http://ohm-media.nl/">Ohm-Media</p>
               </center>
            </div>
         
         </div>
  </footer>
 <!-- END FOOTER -->

    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>


    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Thanks a lot!

Re: How to get this photo galery going?

User avatar
cheesypoof
Registered User
Can you please explain how you would like the image listing to be organized and ordered? From your example I can see that some images are hidden and consequently only visible in the lightbox. Is this feature something you want to utilize ... or do you instead want to show all of the images in both the lightbox and grid?

I haven't yet had a chance to test the following code, but please do give it a try. We set clonable='1' so that we can create multiple pages (images in this case), dynamic_folders='1' so that we can group these entries together, and gallery='1' to take advantage of the multiple-file uploader and admin image listing.

Per the gallery documentation (docs/concepts/photo-gallery.html), we create editable regions gg_image and gg_thumb. We also need an additional thumbnail editable region for the 100x100 front end image.

Since we are only implementing the home view, we can just redirect all other views to it.
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>

<cms:template clonable='1' dynamic_folders='1' gallery='1' title='Galery'>
   <cms:editable height='1080' label='Image' name='gg_image' order='1' required='1' show_preview='1' type='image' width='1920'/>
   <cms:editable assoc_field='gg_image' crop='1' height='100' label='Thumbnail' name='galerie_thumb' order='2' show_preview='1' type='thumbnail' width='100'/>
   <cms:editable assoc_field='gg_image' crop='1' height='115' label='CMS Thumbnail' name='gg_thumb' order='3' type='thumbnail' width='115'/>
</cms:template>

<cms:if "<cms:not k_is_home/>">
   <cms:redirect url=k_template_link/>
</cms:if>

<!doctype html>
<html class="no-js" lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Sitenaam - <cms:show k_template_title/></title>
   <link rel="stylesheet" href="css/foundation.css" />
   <script src="js/modernizr.js"></script>
</head>

<body>

<!-- START MENU -->
<nav class="top-bar hide-for-small" data-topbar>
   <ul class="title-area">
      <li class="name">
         <h1><a href="index.html">Sitenaam</a></h1>
      </li>
   </ul>

   <section class="top-bar-section">

      <ul class="left">
         <li><a href="#">Pagina</a></li>
         <li><a href="#">Pagina</a></li>
         <li><a href="#">Pagina</a></li>
      </ul>

      <ul class="right">
         <li><a href="#">Contact</a></li>
      </ul>

   </section>
</nav>

<div class="off-canvas-wrap docs-wrap">
   <div class="inner-wrap">
      <nav class="tab-bar show-for-small">
         <section class="left-small">
            <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
         </section>
         <section class="right tab-bar-section">
            <h1 class="title">Sitenaam</h1>
         </section>
      </nav>

      <aside class="left-off-canvas-menu">
         <ul class="off-canvas-list">
            <li><label>Menu</label></li>
            <li><a href="#">Pagina</a></li>
            <li><a href="#">Pagina</a></li>
            <li><a href="#">Pagina</a></li>
         </ul>
      </aside>
<!-- END MENU -->

      <section class="main-section">

         <!-- START IMAGE HEADER -->
         <img data-interchange="[img/header_small.gif, (small)], [img/header_medium.gif, (medium)], [img/header_large.gif, (large)]" />
         <!-- END IMAGE HEADER -->

         <!-- START GALERY -->
         <div class="row">
            <div class="large-9 medium-8 small-12 columns">

               <h1><cms:show k_template_title/></h1>
               <ul class="clearing-feature" data-clearing>
                  <cms:folders hierarchical='1'>

                     <cms:pages folder=k_folder_name>

                        <cms:if k_paginated_top>
                           <li class="clearing-featured-img"><a class="th" href="<cms:show gg_image/>"><img data-caption="Galery/<cms:show k_page_foldertitle/>" src="<cms:show galerie_thumb/>" /></a></li>
                        <cms:else/>
                           <li><a href="<cms:show gg_image/>"><img data-caption="Galery/<cms:show k_page_foldertitle/>" src="<cms:show galerie_thumb/>" /></a></li>
                        </cms:if>

                     </cms:pages>

                  </cms:folders>
               </ul>

            </div>
            <!-- END GALERY -->

            <hr class="show-for-small-only" />

            <!-- START SIDEBAR -->
            <div class="large-3 medium-4 small-12 columns">
               <h1>Sidebar</h1>
            </div>
         </div>
         <!-- END SIDEBAR -->

         <!-- START FOOTER -->
         <footer class="row">
            <hr />

            <div class="row show-for-medium-up">
               <div class="medium-6 columns">
                  <p>&copy; Bedrijfsnaam, Naam.</p>
               </div>

               <div class="medium-6 columns">
                  <p class="right">Design & Hosting door <a href="http://ohm-media.nl/">Ohm-Media</a>
               </div>
            </div>

            <div class="show-for-small-only">
               <div class="small-12 colums text-center">
                  <p>&copy; Bedrijfsnaam, Naam.<br />
                  Design & Hosting door <a href="http://ohm-media.nl/">Ohm-Media</a></p>
               </div>
            </div>
         </footer>
         <!-- END FOOTER -->

      </section>

      <a class="exit-off-canvas"></a>

   </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

<?php COUCH::invoke(); ?>
In the code above, an assumption is made that all images are in folders. Please create a few folders first before you start uploading images. I'm sure you will want to modify this, so do let us know if you need any assistance. :)

Re: How to get this photo galery going?

avatar
janvandijk96
Registered User
Cheesy, thank you SO much :D This really helped me out and my project is finished :D I indeed wanted the featured image to be the lightbox, because the people who are going to look at the gallery will view all the pictures at once. Thanks for your time, I was able to just replace my current file. Thanks again!
Post a reply
Previous Next
3 posts Page 1 of 1
Return to Bug Reporting and Troubleshooting