Grow your CSS skills. Land your dream job.

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

  • # February 3, 2012 at 1:46 am

    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.

    # February 3, 2012 at 10:30 am

    you can set the thumbnail to a specific size by using

    the_post_thumbnail('thumbnail');

    then edit the thumbnail size in your media settings

    # February 3, 2012 at 12:12 pm

    @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://code.graygilmore.com/blog/using-wordpress-featured-image-post-thumbnail

    If you have any questions, just ask here!

    # February 7, 2012 at 11:31 pm

    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!

    # February 8, 2012 at 1:09 am

    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/

    # February 8, 2012 at 11:48 am

    You could crop the image by setting the widthxheight of a contianing div to 125×125 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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".