Not sure what I'm doing wrong here, I'm trying to restrict the height of the images displayed. No matter what I change in this code, nothing seems to happen. Do I need to re-upload all my images for them to display differently on my site?

Here's my current code:
<cms:repeatable name='Project_Images' order='5'>
<cms:editable
name='proj_images'
label='Images'
type='image'
show_preview='0'
height='500'
desc='Height should be at least 500px'
/>
</cms:repeatable>

<cms:show_repeatable 'Project_Images'>
<img src="<cms:show proj_images />" alt="<cms:show k_page_title />" />
</cms:show_repeatable>

--

I originally had it set to crop the width:
<cms:editable
name='proj_images'
label='Images'
type='image'
show_preview='0'
width='750'
desc='Width should be at least 750px'
crop='1'
/>

[trendoman]

Sure, once database has the image, a change in parameters requires reuploading. Cropping/resizing occurs during the process of upload.

So if I want to crop/resize images on the fly, I should use the thumbnail tag instead?
<cms:thumbnail proj_images width='660' height='450' crop='1' />

What I'd really like to have happen is to display an image with a width no greater than 660 (smaller is fine) and a fixed height of 450. So an image would be resized to the height of 450 and any additional width beyond 660 would be cropped. Is that even possible?

[KK]

Hi Megan,

Code: Select all

So an image would be resized to the height of 450 and any additional width beyond 660 would be cropped. Is that even possible?

With the crop='1' setting you are using, the resulting image will always be *exactly* 660x450px - so, to answer your query, as long as the uploaded original image is bigger in dimensions than 660x450px you'll get a cropped image that will satisfy your criteria of "height of 450 and any additional width beyond 660 cropped".

If the uploaded image happens to be smaller to begin with, the resulting image will still be 660x450px but those dimensions would be reached by enlarging the original dimensions so might look fuzzy.

Would this help?

Well, ideally what I want is the image to first be resized smaller to a height of 450, and THEN if there is any excess in width, it would be cropped. I would like the width to be variable (so very tall photos aren't cropped a lot vertically). Is that possible?

[KK]

Megan, I don't think we can get that kind of cropping without some manual intervention.

There is an 'Advanced cropping' addon (viewtopic.php?f=8&t=9299) that is helpful in such use-cases. Unfortunately it cannot be use as a repeatable-region so won't be of much help in this particular case.

Thanks! I figured as much. I'll check out that plugin for future reference.

What I ended up doing is have Couch resize images to 450 height. The container UL is a set width/height so my slideshow always stays the same size. If the image is bigger than 660, the CSS resizes it smaller. This means the height of the image decreases below 450, but the container still stays 450px. Not perfect, but it will work.

HTML:

Code: Select all

<div class="flexslider">
  <ul class="slides">
  <cms:show_repeatable 'Project_Images'>                                    
    <li><img src="<cms:thumbnail proj_images height='450' crop='1' quality='100' />" alt="<cms:show k_page_title />" /></li>         
  </cms:show_repeatable>
  </ul>
</div>

CSS:

Code: Select all

ul.slides {
  width: 660px;
  height: 450px;
}

.flexslider .slides img {
  max-width: 100%;
}