I am currently building a one page lightbox gallery grid with the Magnific Popup plugin (http://dimsemenov.com/plugins/magnific-popup/). The gallery contains differently sized images. If you click on a thumbnail in the grid (which have to be sized all equally 200 x 200 pixel), the lightbox pops up. So I don't need individual pages for every image.

The HTML markup looks like the following:

Code: Select all

<div class="gallery-wrapper">

            <a href="http://c4.staticflickr.com/8/7608/16661753958_652a85155f_k.jpg" title="" class="gallery-item">  
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http:////c4.staticflickr.com/4/3776/11797162326_321b4d4adc_k.jpg" title="" class="gallery-
            item"><img src="http://placehold.it/200x200" alt=""></a>

            <a href="http:////c4.staticflickr.com/4/3755/9167118171_dc731eed37_k.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http:////c1.staticflickr.com/9/8622/16549850470_c1f001cb02_k.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c2.staticflickr.com/4/3883/15044493496_17790469b8_k.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c2.staticflickr.com/6/5256/5524683800_ba5704eb98_b.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c1.staticflickr.com/9/8084/8396438310_345438bc9a_k.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c2.staticflickr.com/8/7647/16296472224_c37a227d70_h.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c2.staticflickr.com/8/7383/9705051016_89d2b3333c_k.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c1.staticflickr.com/3/2872/12841640295_82637566d7_b.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c1.staticflickr.com/5/4089/5054597192_13cfd97999_b.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c1.staticflickr.com/1/183/447797783_c5dd29d3e9_b.jpg" title="" class="gallery-item">
            <img src="http://placehold.it/200x200" alt=""></a>

            <a href="http://c1.staticflickr.com/1/25/62877469_af5117bdde_b.jpg" title="" class="gallery-item"><img 
            src="http://placehold.it/200x200" alt=""></a>

</div>

Now, I would like to make it as easy as possible to upload new images for the gallery. What I would like to avoid is that the user has to manually create thumbnails for the grid. Ideally, equally sized thumbnails (200 x 200 px), are dynamically generated from the uploaded image as a an extract of the large image. I think it would not be a good idea to proportionally resize the original image, because the original size will be unknown, i.e. the thumbnails would be distorted.

Is that possible with Couch?

Furthermore, do I have to set this up with cloned pages or is a single page sufficient? I don't want the gallery images to be displayed on individual pages, just within the lightbox on the same page.

[KK]

Hi,

I think you can use a clonable template and define two regions within it - one 'image' and the other 'thumbnail'. The 'thumbnail' region allows choosing which part of the image to create the thumbnail from so it should suffice your need.

Please see http://www.couchcms.com/docs/tags-refer ... bnail.html to choose which parameters to use with the 'thumbnail' region. You'll notice that your apprehension about the thumbnails coming out 'distorted' is nothing to worry about.

Also, using a clonable template does not impose that you need to show the clonable pages as separate pages on the front-end - you can show all of them on a single page (i.e. use only the 'list-view' and just don't implement the 'page-view').

Hope this helps.

Thanks KK.

That should work perfectly.