Need help? Check out our Support site, then


Crop/resize thumbnail images to consistent dimensions?

  1. andrewdopheide
    Member

    I've used the "gallery" shortcode to include a couple of simple image galleries in my blog (for example, on http://andrewdopheide.wordpress.com/illustration/). I've specified the thumbnail image size in "media settings" to be 200 x 150 pixels. In my image galleries the thumbnails are 200 pixels wide, but their heights vary - it's obviously resizing the images to 200 pixels wide, but ignoring the height, leaving them in proportion to the original image width.

    Is there any way to resize/crop thumbnail images so that they are all 150 pixels high? - either using css (I have a custom css upgrade) or in some media setting which I've somehow overlooked. I know this can be done on self-hosted wordpress.org blogs, but I'm stuck on how to do it with wordpress.com...

    The blog I need help with is andrewdopheide.wordpress.com.

  2. I missed this before. Sorry about that!

    On the media settings page, the sizes are a container not an exact crop.

    There is a way to clip images using CSS, but you have to set the position to absolute and so in a gallery you have to set the size dimensions for the container element manually. If the images are shorter than 150px tall, the container around them will not shrink to fit the image. So, if you want to set a 200px by 150px size for gallery images in the Twenty Eleven theme, then you could use this custom CSS code:

    .page-id-4 #content .gallery .gallery-icon a {
        display: block;
        position: relative;
        width: 200px;
        height: 150px;
        border: 1px solid #ddd;
    }
    
    .page-id-4 #content .gallery .gallery-icon a:focus,#content .gallery .gallery-icon a:hover,#content .gallery .gallery-icon a:active {
        background: #eee;
    }
    
    .page-id-4 #content .gallery .gallery-icon a img {
        position: absolute;
        top: 0;
        left: 0;
        clip: rect(0px,194px,144px,0px);
        border: none;
        overflow: hidden;
    }

    Note: the .page-id-4 part of each selector limits this edit to just your illustration page. If you wanted it to work on all pages, you could use .page instead.

    This was a good question. Let us know how it goes and if the clip CSS works out for you.

  3. andrewdopheide
    Member

    Thanks for this suggestion! It almost achieves what I'm after, except for a couple of things.

    When the image size differs from the CSS-specified gallery frame size, the image ends up aligned at the top of the gallery frame, with either a white space beneath it, or the bottom of the image cut off to fit inside the frame, depending on whether it is smaller or larger than the frame. I can make images fill the frame by specifying their pixel height using CSS, but this results in the images being stretched vertically, which isn't ideal.

    Is it possible to further adjust the CSS to achieve either (or both) of the following? -
    1. The image is made to float in the vertical centre of the gallery frame, regardless of whether it's larger or smaller than the frame.
    2. If the vertical dimensions of the image are less than those of the gallery frame, the image is scaled in proportion (horizontally and vertically) to the correct height to fill the frame, but the resulting excess width is cropped. (I suspect this might not be possible, but I'd be happy to be proven wrong).

    Also, I note that if the browser window width is reduced, the images lose their horizontal spacing and pile up on top of one another, but if the browser window height is reduced, the images retain their vertical spacing. Is it possible to make the horizontal spacing remain constant when the browser window width is reduced?

  4. The stretching is happening because you set a height on the "img" tag. Take away the height on that and what this solution does is set the container for each image, the "a" tag in this case, with a static width and height and then clip any images larger than that to the set size. There's not a way that I know of to vertically center the images if they are absolutely positioned (which the clip property requires).

    The best solution may be to stick with the standard gallery! Did you know you can exclude images like that short one? You can also click on the gallery and click the edit icon that appears and drag the images around so the ones with similar heights are closer together, which may give you a more consistent result if you get images with similar dimensions all on the same row.

    [gallery exclude="314" order="DESC" columns="4"]

  5. andrewdopheide
    Member

    Thanks designsimply, your advice is very much appreciated. You may be right that the simplest way is to stick with the regular gallery and exclude the oddly-proportioned images (yes, I did know that was possible). It does seem unfortunate that wordpress won't allow you to control how your thumbnails are cropped and sized...perhaps that'll become possible in the future (I hope!).

  6. Updating the way galleries work is something that falls under the core WordPress project, but it is definitely something on the wishlist there!

Topic Closed

This topic has been closed to new replies.

About this Topic