Problems, need help? Have a tip or advice? Post it here.
24 posts Page 1 of 3
I noticed in the tutorial that to put more than one image for a project we can use the group type tag. What happens if we have different numbers of images for every projects, say like multiple images in a blog post? How do we go about doing that?
Hi,

The 'group' tag you mentioned is actually meant to only show a bunch of related editable regions together in the same collapsible panel.

To have multiple images, e.g. within the contents of a blog post, you can use the image upload button that is available on the CKEditor (editable region of type 'richtext').

Hope this answers the question.
Don't understand where the CKEditor is?
Hi,

When you define an editable region as being of type 'richtext' e.g.
Code: Select all
<cms:editable name='blog_content' type='richtext' />

the wysiwyg editor that Couch shows for this region is actually CKEditor (it is the name of one of the two most widely used WYSIWYG editors - the other being TinyMCE).

What we are interested in is the image upload button that is available in its menu -
CKEditor.png
CKEditor.png (8.65 KiB) Viewed 9951 times

Click on the marked button and you'll be able to upload and add images within your post.
I see what you mean. Actually I was hoping to control it better. I would like to save abit of space with this js gallery within a post. So that users use thumbs to control the images in the project. Is there a way to do it by coding? Noticed there was a way of nesting info but not sure if that's applicable here. Here's my code for a post in my work.php

Code: Select all
<div class=contentarea>
                       <div class=header>
                              <h1><a href="<cms:show k_page_link/>"><cms:show k_page_title/></a></h1>
                  <!--  <h1 class="subhead"> - Vector Illustration</h1>-->
                      </div>
<!--                      <div class="workimg"><img src="<cms:show work_image/>" width="359" height="464" /></div>-->
                      <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>                     
                  <div>
                         <cms:show work_content/>
                      </div>
                      <div class="tags"> Tags: <a href="#">illustration</a>, <a href="#">drawing</a>, <a href="#">vector</a></div>
                     </div> 
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.
U r amazing at your turn around! I'll mull over the code abit and let you know.
Hey I kept getting this error :"ERROR: Tag "editable": 'name' contains invalid characters. (Only lowercase[a-z], numerals[0-9] and underscore permitted. The first character cannot be a numeral)"

After testing it out apparently I can't used "<" in the editable tags? like in your code
<cms:editable name="gallery_img_<cms:show k_count />" A bit confused.
Hi,

I re-tested the posted code by copying and pasting it back into my template and everything is working just fine.
I suggest you copy the code for creating the editable regions from the post above and paste it back into your template once again. Perhaps something was missed in doing it the first time.

The <cms:editable name="gallery_img_<cms:show k_count />" />that you mentioned will be expanded to <cms:editable name="gallery_img_1" />, <cms:editable name="gallery_img_2" />, <cms:editable name="gallery_img_3" /> etc. with each iteration of the repeat tag, so that is not a problem.

Do let me know. Thanks.
hmm copy and pasted and it worked not sure where my typo was.

Another problem here, a previous editable doesn't go away after defining these new editables. 'work_image' still shows up in couch.

Previous
Code: Select all
   <cms:template title='Work' clonable='1'>
    <cms:editable name='work_content' type='richtext'/>
   
    <cms:editable name='work_image' label='Work Image' crop='1'  type='image'/>
    <cms:editable
    name ='thumb'
    label='Image Thumbnail'
    desc='Thumbnail image'
    show_preview='1'
    assoc_field='work_image'
    width='195'
    height='90'
    type='thumbnail'
    />
   
   
    <cms:folder name="animation" title="Animation" />
    <cms:folder name="design" title="Design" />
    <cms:folder name="drawing" title="Drawing" />
   
    <cms:editable name='tags' label='Tags' desc='Use comma to separate multiple tags' type='text' />
</cms:template>


New editables
Code: Select all
<cms:template title='Work' clonable='1'>
   <cms:editable name='work_content' type='richtext'/>
   
   <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:editable
      name="thumb_gallery2_img_<cms:show k_count />"
      assoc_field="gallery_img_<cms:show k_count />"
      label="Thumbnail2 <cms:show k_count />"
      desc="Thumbnail2 of image above"
      width='195'
      height='90'
      group='group_gallery'
      type="thumbnail" />
</cms:repeat>         
   
   
    <cms:folder name="animation" title="Animation" />
    <cms:folder name="design" title="Design" />
    <cms:folder name="drawing" title="Drawing" />
   
    <cms:editable name='tags' label='Tags' desc='Use comma to separate multiple tags' type='text' />
</cms:template>


Seems like every time I mess with the editables the previous ones that I deleted still appear as fields on couch.
24 posts Page 1 of 3