by
KK » Wed Apr 06, 2011 6:43 pm
Hi,
That is an interesting requirement you have there.
Basically you wish to have a gallery of images (with their associated thumbnails) within
each post where the number of images within the gallery will vary from post to post.
A sample markup of a gallery with only two images could be -
- Code: Select all
<div class="workimg">
<div id="photo_1"><img src="images/img_hori_plholder.jpg" width="500" height="200"/></div>
<div id="photo_2" style="display:none;"><img src="images/img_vert_plholder.jpg" width="400" height="600" alt="" /></div>
<ul class="sqthumbs">
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_1', 3);"><img src="images/img_vert_plholder_thumb.jpg" width="90" height="90" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_2', 3);"><img src="images/img_vert_plholder_thumb.jpg" width="90" height="90"alt="" /></a></li>
</ul>
</div>
- where we are showing the full images above the thumbnails (only the first image is shown. All the rest are hidden). The thumbnails have associated JavaScript that makes visible the related image.
Had there been 6 images above instead of two, the markup would have had six divs (photo_1 to photo_6) and 6 thumbnails.
So the requirement we have in hand is to-
1. Have a way to allow the user add a variable number of images in each post.
2. Depending upon how many images a post has, dynamically generate the markup such as shown above.
Couch, for now, has no provisions of dynamically adding editable regions to a post so we cannot have something where the user can keep on adding as many images he desires within a particular post.
However, as a reasonable substitute, what we can do is statically
define the maximum number of images likely to be shown on a post.
Thus, for example, if a gallery on a post is likely to have at most 6 images, we can define 6 editable regions of type 'image' and their associated regions of type 'thumbnail'.
For each post, the user is not required to fill in all the 6 available images. He can fill in only two if required.
While generating the markup, we can check if an editable region contains any value. If it does, we generate the div and the thumbnail, else we ignore it.
This way we can have the 'variable number of images within a post' that you asked for.
Let us begin by defining the editable regions.
To make this process less of a chore, we can use the 'repeat' tag of Couch to help us.
Within the 'template' tag where you have defined the existing editable regions for the template, use the following code -
- Code: Select all
<cms:editable name="group_gallery" label="Gallery" type="group" />
<cms:repeat count='6' startcount='1' >
<cms:editable
name="gallery_img_<cms:show k_count />"
label="Image <cms:show k_count />"
width="500"
height="500"
show_preview='1'
preview_height='200'
group='group_gallery'
type="image" />
<cms:editable
name="thumb_gallery_img_<cms:show k_count />"
assoc_field="gallery_img_<cms:show k_count />"
label="Thumbnail <cms:show k_count />"
desc="Thumbnail of image above"
width='90'
height='90'
group='group_gallery'
type="thumbnail" />
</cms:repeat>
In the code above, we are defining a group called 'group_gallery' and then we are using the 'repeat' tag to loop through 6 times. At each iteration it will define an editable region of type 'image' and an associated 'thumbnail'.
Notice how we are using the 'k_count' variable set by 'repeat' (it will start from '1' and will increase at each iteration to go upto '6') to set unique names for the images and thumbnails.
We'll end up having 6 editable regions named 'gallery_img_1' to 'gallery_img_6' and 6 thumbnails named 'thumb_gallery_img_1' to 'thumb_gallery_img_6'.
With the editable regions created, we are now set to generate the markup.
First the main images. We'll use the 'repeat' tag again to do the job for us -
- Code: Select all
<div class="workimg">
<cms:repeat count='6' startcount='1' >
<cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
<cms:if "<cms:not_empty my_img_src />" >
<div id="photo_<cms:show k_count />" ><img src="<cms:show my_img_src />" /></div>
</cms:if>
</cms:repeat>
</div>
Notice how we make use of the 'k_count' variable to generate each region's name and then we fetch in the path of image contained within them (we have to use 'get' instead of the usual 'show' because the variable name is not static and is generated on the fly at each iteration. See
http://www.couchcms.com/docs/tags-reference/get.html for more info)
Also notice how we first check if the region is not empty before outputting an div for it.
The code above will generate as many divs as there are editable regions with values.
Each of these divs will also be visible. What we require is to make only the first div visible and set 'style="display:none;"' for the rest of the divs.
We modify the code to add this check -
- Code: Select all
<div class="workimg">
<cms:repeat count='6' startcount='1' >
<cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
<cms:if "<cms:not_empty my_img_src />" >
<div id="photo_<cms:show k_count />" <cms:if k_count != '1'>style="display:none;"></cms:if> ><img src="<cms:show my_img_src />" /></div>
</cms:if>
</cms:repeat>
</div>
We check above we add the 'display:none' style to all divs except the first (i.e. with k_count='1').
We can generate the markup for the thumbnails in identical fashion -
- Code: Select all
<ul class="sqthumbs">
<cms:repeat count='6' startcount='1' >
<cms:set my_thumbnail_src="<cms:get "thumb_gallery_img_<cms:show k_count />" />" />
<cms:if "<cms:not_empty my_thumbnail_src />" >
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_<cms:show k_count />', 3);"><img src="<cms:show my_thumbnail_src />" width="90" height="90" alt="" /></a></li>
</cms:if>
</cms:repeat>
</ul>
The final code -
- Code: Select all
<div class="workimg">
<cms:repeat count='6' startcount='1' >
<cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
<cms:if "<cms:not_empty my_img_src />" >
<div id="photo_<cms:show k_count />" <cms:if k_count != '1'>style="display:none;"></cms:if> ><img src="<cms:show my_img_src />" /></div>
</cms:if>
</cms:repeat>
<ul class="sqthumbs">
<cms:repeat count='6' startcount='1' >
<cms:set my_thumbnail_src="<cms:get "thumb_gallery_img_<cms:show k_count />" />" />
<cms:if "<cms:not_empty my_thumbnail_src />" >
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_<cms:show k_count />', 3);"><img src="<cms:show my_thumbnail_src />" width="90" height="90" alt="" /></a></li>
</cms:if>
</cms:repeat>
</ul>
</div>
It is a tad more complex than what we usually have to write but it gets the job done.
Do let me know if this helped.