Hey guys,
Considering using couch for a project, whose CMS integration I will need to do in a couple of weeks. The option is Couch/Django, and we would really like to use Couch (with a license) for this one..
Basically, it's for an artist portfolio site, where the artist has images in 3 different ratios and widths - portrait, landscape and square (or close to a square)...
I'm just wondering how to get the CMS to output these images at different widths? The widths will be 350 for portrait, 520 for landscape and 400 for squares and squarish looking things.. Since there's not much variations in the image sizes, would you suggest just resizing them to the largest size of 520, and having some sort of radio buttons in the CMS: isPortrait, isLandscape, isSquare and then some classes are outputted and I change the image sizes in the CSS? It would be nice, though, if the backend could resize the widths..

Let me know what you think and if I'm not being clear..

[KK]

Hi Karen,

There can be many ways of handling this (one would be the way you suggested).
If we want the CMS to do the resizing automatically, we have three ways available -
1. Editable region of type 'image'
2. Editable region of type 'thumbnail'
3. cms:thumbnail tag

One way could be to use *three* regions of type 'image' (one for landscape, another for portrait etc.) and set the 'width' parameter of each according to the format (i.e. 520 for landscape, 350 for portrait).

While uploading the image, the user can use the region appropriate for the image's format.
Since the 'width' parameter of that region is fixed, the image will always be sized accordingly.

On the display side (i.e. on the front-end), we can check which of the three regions is not empty and display accordingly e.g.

Code: Select all

<cms:if "<cms:not_empty img_landscape />" >
   <img src="<cms:show img_landscape/>" width="520" />
</cms:if>

<cms:if "<cms:not_empty img_portrait />" >
   <img src="<cms:show img_portrait />" width="350" />
</cms:if>

Another way could be to use only a single image region (large enough to accommodate all three formats) and also a radio button type to mark which type of image it is.
One the display side, we can then use the value of the radio button to set the width parameter of cms:thumbnail tag to resize the image.

Does this help?

Hey KK Thanks... 99% going ahead with couch for this project... and yes, this definitely makes sense

[KK]

You are welcome, Karen.
I am glad you found it useful

Excuse me for butting in to your conversation. But the code above is the first time I've seen the cms:not_empty tag. I just wanted to mention that I've always accomplished the same thing in a different way.

Code: Select all

<cms:if img_landscape >
   <img src="<cms:show img_landscape/>" width="520" />
</cms:if>

<cms:if img_portrait >
   <img src="<cms:show img_portrait />" width="350" />
</cms:if>

[KK]

Hi Tim,

Your method is perfectly fine.

In this particular case

Code: Select all

<cms:if "<cms:not_empty img_landscape />" >

is no different from

Code: Select all

<cms:if img_landscape >

because the value is coming from a 'text' input (which is where the uploaded images's path shows up).

However, while checking for values from richtext regions (CKEditor or Nicedit), a direct check could lead to false positives. The reason is that these editors, even when they appear completely empty, tend to have a <BR/> or <P> in their contents.

To handle such cases, the cms:not_empty tag comes in handy (it is documented at http://www.couchcms.com/docs/tags-refer ... empty.html).

I know, using cms:not_empty was redundant in my code but I somehow like using it
It seems to 'convey' the code's intention right.