Forums

sanclementejoe

On the front page of my website I am displaying all of the artist pages (this is an art gallery website) on the front page in a grid with the page name and thumbnail. It's working fine, but the sizes are a little different for each. How to I crop the images so they are all a perfect square? I am doing this in wordpress.

vindicateme

you can set the thumbnail to a specific size by using

the_post_thumbnail('thumbnail');

then edit the thumbnail size in your media settings

TheDoc

@vindicateme is correct, the_post_thumbnail is your friend! You'll need to set it up in your functions.php though. Once you do, it's super handy. Here is a write up that I did for it: http://blog.designbygray.ca/using-wordpress-featured-image-post-thumbnail/

If you have any questions, just ask here!

sanclementejoe

Hey Doc,

I followed your blog post and it did work in resizing my thumbnails, but it did not crop it to the exact specifications.

I added:

add_image_size( 'custom-1', 125, 125, true );

to my functions.php file and it made the images only 125px wide, but kept the height proportional. This seems like that should have happened if I had the crop set to false, but I do have it set to true!

sanclementejoe

I figured it out. I had to regenerate my thumbnails using a plugin called AJAX Thumbnail Rebuild because when you add a new image size, it only applies to new uploads. Regenerate Thumbnails is also a well know plugin to do this.

Thanks for the help guys. Doc your blog post was very helpful. Here is another very comprehensive guide to featured images and resizing in Wordpress: http://www.studiograsshopper.ch/web-development/wordpress-featured-images-add_image_size-resizing-and-cropping-demo/

Schmotty

You could crop the image by setting the widthxheight of a contianing div to 125x125 and set the overflow to hidden


#imgcontainer {
width:125px;
height:125px;
overflow:hidden;
}

Then you'll need your images to be at minimum 125px either way.

treehouse : what would you like to learn today?

Forums

[Solved] How do I crop a grid of page thumbnails to a specific size