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

I am currently creating a website for a client and they have asked to have a gallery functionality on some of the pages. To achieve this, I am using Lightbox by Lokesh Dhakar.

Is there a way, using Couch, to make two sizes of a single image? In this example, I need a thumbnail 270 x 270 and a large version of the image that is shown when the visitor/user clicks the thumbnail (approximately 1000 x 1000).

My code for the gallery:
Code: Select all
<cms:repeatable name='gallery'>
   <cms:editable type='image' name='image' crop='1' width='270' height='270' label='Image' />
   <cms:editable type='text' name='camption' label='Caption' />
</cms:repeatable>
I understand, that I could simply add another image and set the width and height to 1000 x 1000 but that would require the client or person managing the website to upload an image and select it twice which could cause confusion.
- Dan
Hello KK,

I hope you're well? (and thanks for your response regarding this topic).

Sorry that I missed the thumbnail concept from the documents... I've managed to get it working now! Here is my revised code for anyone that needs help doing something similar.

Code: Select all
<cms:show_repeatable 'gallery'>
   <li>
      <a href="<cms:show image />" data-lightbox="gallery-1" data-title="<cms:show caption />">
         <img src="<cms:thumbnail image width='270' height='270' enforce_max='1' />" />
      </a>
   </li>
</cms:show_repeatable>
.
- Dan
Hello Dan :) I am doing good. Thanks.
Your code is perfect; I am glad you could get it working.
KK wrote: Hello Dan :) I am doing good. Thanks.
Your code is perfect; I am glad you could get it working.
Just one last question...

As above, I set the image to 1000 x 1000 by:
Code: Select all
<cms:editable type='image' name='image' crop='1' width='1000' height='1000' label='Image' />
But for some reason, when you click the thumbnail, the enlarged version is showing the original size and not 1000 x 1000, do you have any idea why that would be or what might cause that?
- Dan
The type 'image' region does the cropping/resizing only at the time of saving a new image.
Once an image is saved and the tag's parameters are changed afterwards, they won't automatically apply to existing images - maybe this is what is happening in your case.

To test it -
first visit the template containing the image definition as super-admin on the front-end (to make sure the 1000x1000 dimensions are picked up by Couch).
Next, edit any page with an existing image and slightly change the path of the image (say, add an 'x' somewhere). This will make the path intentionally incorrect. Save the page. The image region will come up empty because the path was incorrect.

Correct the path and save again - this is now akin to saving a new image for Couch so it should apply the cropping to the image.

You should see the cropped image now (click the region;s preview and it should show a square image).
It should reflect on the frontend too. If not, please check if caching is not involved somewhere.

Hope this helps
Hi KK,

I haven't tried implementing your fix yet but came up with the idea of using the thumbnail option twice, is that bad practice? For example, one thumbnail at 270 x 270 and then the enlarged version at 1000 x 1000.

If it's something you would advise against, I will go back and revise my code and implement your suggestion.

I look forward to hearing from you.
- Dan
7 posts Page 1 of 1