Displaying square featured images on blog page

[hyperdrive_boom]

Good afternoon,

I have a section called ‘Blogs…’ powered by ‘The Grid’ on my homepage which displays the last 2 blog posts. The featured image is made square. Is there a way on my blog page where the same featured images could also be square.

They are currently their normal sizes which makes everything uneven

Thank you,
Jason

[ruenel]

Hello Jason,

Thanks for writing in!

I went ahead and made the necessary changes in your site to make the featured images as square. I did the following:

1.) First, I added this custom PHP code in your child theme’s functions.php file in Appearance > Themes Editor:

// Square Featured Image
// =============================================================================
// 
// 

add_image_size( 'squared', 450, 450, true );

//
// Output featured image in an <a> tag on index pages and a <div> for single
// posts and pages.
//

if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      $thumb = get_the_post_thumbnail( NULL, 'squared', NULL );


      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }
endif;

2.) I installed a 3rd party plugin, Regenerate Thumbnails and then I have regenerated the thumbnails so that a Squared Image is generated for the featured image.

Please check your blog index now.

[hyperdrive_boom]

Perfect thank you!

[jade]

You’re welcome, @hyperdrive_boom.