images sizes and hard vs soft crop

[J. Weidlein]

Hi – I am new to this forum as well as to jumpstart. My problem is two-fold, and concerns non-uniformly sized images. Many (but not all) of our pictures have a ratio of about 3:2 (width:height.). These pictures have an empty space below them in the mini-post-lists, which uses the ‘square-smaller’ crop size (70 x 70). How can I get square crops from these non-square images?

A related issue is the variable heights of images in sliders and post grids. I tried using the TB Image sizes plugin, using 3:2 aspect ratios and hard cropping but it seemed to have no effect. The only thing that did work was to edit some pictures that did not have the 3:2 aspect ratio so that they did, and then to regenerate the thumbnails. Is that the only solution?? Our previous theme used the timthumb image resizer and worked fine with these images.

thanks for any help!

Topic

[Jason Bobich]

Hello,

Keep in mind that most of this is general to WordPress, opposed to Jump Start. So, let’s go over some basic things about WordPress crop sizes. Hopefully this information will answer your questions and sort out of some of the confusion.

1) WordPress crops images at the time you upload them. This means that when you upload an image, it’s going to make all of its registered crop sizes at that time. So, if you have an image you uploaded before you installed the theme, it’s not going to be cropped with the theme’s crop sizes.

Likewise, if you have an uploaded image, and you change any registered crop sizes (i.e. with the TB Image Sizes plugin or through your own Child theme customization), you must either re-upload the images or run the regenerate thumbnails plugin in order for you to see any effect.

This may seem cumbersome if you’re messing with your image sizes a lot and making changes, but once you have everything set, this is so much more efficient than using something like Timthumb which generates images on the frontend of your website and caches them; this is just not how WordPress is designed to work, and above all else, Timthumb is a huge security risk. — Many hosts actually scan their servers now and alert customers that they must disable any themes containing Timthumb.

2) When you upload an image (or re-generate your thumbnails), WordPress will attempt to make each registered crop size of the image. If the image is smaller than any of the crop sizes, they cannot get made. In other words, WordPress cannot crop up.

So, if you have a crop size that is 940×350 (Jump Start’s full-size slider for example) and you upload an image that is not both at least 940 pixels in width and 350 pixels in height, the crop size will not be made.

3) If a crop size does not exist, when that image’s crop size is displayed on the front end of your website, WordPress will take the raw un-cropped version of that image.

So, taking the last example: If you upload an image that is not both at least 940 pixels wide and 350 pixels tall, when your slider displays on the front end your website, it’s going to just slap the raw image in there, which is not going to look right.

4) Hard vs Soft crop: When you register a crop size, WordPress allows you to set the “crop mode” — This is kind of confusing at first, but once you understand and it clicks in your mind, it’s a nice feature to have.

A hard crop means that it’s going to take your image, no matter what the aspect ratio, and crop it to those exact dimensions.

So, if you uploaded a 1,000×1,000 image for that slider crop size, it’s going to crop it exactly 940×350 — To do this, it’s going to scale it down to 940px in width and then crop whatever is left off the top and bottom making it 350px in height.

A soft crop will re-size the image without cropping any of it off.

So, if you upload an image that’s 1,000×1,000 WordPress would then crop this to 350×350 for our slider crop size of 940×350. The reason is because WordPress is fitting it within our 940×350 window, but without cropping any of it off.

======

Now, with that information, does anything still not make sense?

[Author]

Replies