Problems, need help? Have a tip or advice? Post it here.
6 posts Page 1 of 1
I regularly have to deal with the following problem.

Suppose I have a slider with dimensions of 940 by 450 pixels. Couch will handle the photos by cropping. The client upload photos, but not all photos are nicely displayed in the slider. This is because not all photos are always of the same size.

Is there a way around this problem without using Photoshop?
Hi,

Try setting the crop parameter of the editable region to '1'
Code: Select all
<cms:editable name='slide_image' 
  width='950'
  height='450'
  crop='1'
  type='image' />

With explicit values provided for both the dimensions (as in the example above), Couch will always output a image that is of exactly the given dimensions. This might involve 'cropping' off certain portions of the original image in a bid to shoe-horn the image into the fixed dimension frame but your slideshow will never break.

Please see http://www.couchcms.com/docs/tags-refer ... image.html - specifically the 'crop 'section with 'Specifying both the dimensions' for how this works.

Hope this helps.
hello ... on the subject of images ..... I find that images present a few challenges to both me and the client (unless they are competent with image editing software - which is not often) - resizing, cropping, compressing and so on. It all seems to be fine when the location and approximate size of the image are predefined, with its own editable region and image uploader in the Admin Panel. This gives the opportunity to control maximum size etc.

If the client is going to insert images into a Richtext editable region using the image icon in the toolbar - things are left more to chance.

For a moment I was thinking about having an image editable region which would allow the client to input the width / height parameters in separate text editable regions - and therefore benefit from the resizing and compressing features of the uploader. But then I remembered that Couch editable tags cannot be nested.

Perhaps I should set up an image editable region with a maximum width of 'as big as could be required for the page' and get the client to upload images from their computer to the server using that.

This posting is really a bit of "thinking aloud" - so forgive the rambling! I'd be interested if anyone else had any bright ideas though ...
Hi Kamran,

I've already set up Couch to handle the images. This is my code:

Code: Select all
<cms:repeatable name='slider' label='Slider' order='1'>
    <cms:editable type='image' input_width='150' name='image' crop='1' height='450' width='940' label='Foto' show_preview='1' preview_width='150' />
    <cms:editable name='image_thumb' label='Image Thumbnail' desc='Thumbnail of the main image above' width='110' height='65' enforce_max='1' assoc_field='image' show_preview='1' type='thumbnail' />
    <cms:editable type='text' name='image_title' label='Titel' />
</cms:repeatable>

But you also have some pictures where parts of the picture are cut off, mostly some of the top and the bottom of the picture. You can not move the pictures up or down in order to prevent parts of the picture are cut off. Maybe this option would a nice addition to Couch.

Now I have to use Photoshop to crop the images, because most of the clients are not competent with image editing software.

Sorry that I did not explain well in my previous post.
@martijn

I see that you are trying to use editable region of type 'thumbnail' as a 'repeatable' region. This, sadly, is not possible and the thumbnail's definition will simply be ignored.

Had a 'thumbnail' region been available for use as 'repeatable' region, your problem would have been solved as 'thumbnail' editable region provides the user the option to choose the quadrant to create the thumbnail from (e.g. top-left or bottom-right etc.).

So, I am afraid, no easy solution to your problem for now.
I can only suggest that, in all probability, there would be only one instance of the slideshow that you are creating.
If that is so, we can create it using the regular cloned pages instead of the repeatable regions.
For example, we could have a template (say named slideshow.php), define two editable regions within it - one main image and other a thumbnail associated with the main image, and then create a cloned page for each slide in the slideshow.

The trick here would be to use the 'thumbnail', instead of the main image, to create the slideshow (i.e. use the crop='1' and the required dimensions with the thumbnail while providing no dimensions to the main image).
This way the client can upload image of any dimensions into 'image' region but then use the control provided by the 'thumbnail' region to tweak the resulting thumbnail that will be used in the slideshow.

@potato
As you mentioned, images inserted directly within the richtext region cannot be manipulated like those uploaded using dedicated editable regions.

Usually there is some kind of a limit that needs to be imposed on such images that appear free-form interspersed with the text e.g. there could be two acceptable sizes.
One way of doing this could be by using 'dummy' repeatable regions - e.g. we can have two repeatable regions each having an editable region of type 'image' with the size constrains imposed.
The client then, instead of inserting image directly within the richtext editor, uses the proper repeatable regions to upload images and pastes the path that appears here into the richtext editor's 'insert image' dialogbox.
When the page is saved, the images get resized as specified.
On the front-end we simply ignore these repeatable regions.
Just a thought.
Thank for your tip, Kamran. I'm now using the regular cloned pages instead of the repeatable regions and it works great with the option to choose the quadrant to create the thumbnail from.
6 posts Page 1 of 1