Cropping Post Thumbnails on Blog List

I've been trying to modify the images displayed on my blog homepage without much success. The images I've saved to media are very wide formated (often twice as wide as tall). However I want to display the thumnails on the blog list as squares. This means I need to crop them, preferably while centering the image.

How do I do this?

I don't fully understand the code in the documentation or forums well enough to implement it, but I've tried variations of this:

$resized_src = beans_edit_image( $image_src, array(
 'resize' => array( 300, 300, array( 'center', 'center' ) )
) );

No luck.

What has worked to an extent is this:

add_action( 'wp', 'beans_child_thumbnails_magic' );

function beans_child_thumbnails_magic() {
  if ( is_archive() || is_home() || is_search() ) {
   set_post_thumbnail_size( 300, 300, true );
  }
}

However with a big caveat: no cropping takes place. The thumnail ratio is preserved, with the widest dimension equaling 300px. That means I get some images that are 150px/300px, as opposed to them getting cropped to 300px/300px. Why is this?

I should mentioned that out of necessity I implemented the following code earlier in my functions.php:

// Let WordPress handle the image sizes.
add_filter( 'beans_post_image_edit', '__return_false' );

Beans was not displaying thumbnails on my blog post list, so turning off the beans editing solved the issue. I assume using this code precludes some of the bean functionality (like using 'beans_edit_image')? If so how may I achieve my goal with the beans post image editing turned off? Or is there a way to both turn on beans post image editing, solve the non-display problem, plus crop?

Any suggestions?

Hello Rob,

You have to use a filter. For instance, create a home.php template and, in this template, add this :

add_filter( 'beans_edit_post_image_args', 'myprefix_post_image_edit_args' );
function myprefix_post_image_edit_args( $args ) {
    return array_merge( $args, array(
        'resize' => array( 170, 170, true ),
    ) );
    }

Hope it helps. Mat

Hi Matt,

Thanks! That does work in resizing. I assume the images are cropped successfully, but I can't tell because of the image display issue I mentioned earlier. When I remove add_filter( 'beans_post_image_edit', '__return_false' ); from my functions.php file none of my blog thumbnails show up, which makes resizing/cropping them a rather mute point. However I need to remove that line of code to get your filter to function. So...catch 22.

When I have post_image_edit turned off, I get the following code on my page:

<source media="(max-width: 480px)" srcset="http://localhost:8888/wp-content/uploads/beans/images/pexels-photo-147408-2-2978a33.jpeg" data-markup-id="beans_post_image_small_item">
<img width="300" height="300" src="http://localhost:8888/wp-content/uploads/beans/images/pexels-photo-147408-2-1a3c971.jpeg" alt="" itemprop="image" data-markup-id="beans_post_image_item">

Which doesn't display the thumbnails successfully. The image simply can't be found. However when add_filter( 'beans_post_image_edit', '__return_false' ) is in place, the code output to my page is as follows:

<img width="1200" height="800" src="http://localhost:8888/wordpress%203/wp-content/uploads/2017/07/pexels-photo-147408-2.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wordpress%203/wp-content/uploads/2017/07/pexels-photo-147408-2.jpeg 1200w, http://localhost:8888/wordpress%203/wp-content/uploads/2017/07/pexels-photo-147408-2-300x200.jpeg 300w, http://localhost:8888/wordpress%203/wp-content/uploads/2017/07/pexels-photo-147408-2-768x512.jpeg 768w, http://localhost:8888/wordpress%203/wp-content/uploads/2017/07/pexels-photo-147408-2-1024x683.jpeg 1024w" sizes="(max-width: 1200px) 100vw, 1200px">

which works! BUT then your filter has no effect.

My understanding of how Wordpress and Beans handle images and feature image thumbnails is too limited to untangle this myself. Any other thoughts? Thank you!