Change default featured image size

Hello,

On single post, I want to add the featured image as a fullwidth image just after the header markup. So I've added this in my functions.php :

if ( is_singular( 'post' ) ) {
 beans_modify_action_hook( 'beans_post_image', 'beans_header_after_markup' );
}

But in Beans the default width of featured images seems to be 800px. I would like to change this by using the Beans API image filter and set this size to a larger one, to display a fullwidth image.

What would you recommend ?

Mat

Hello,

I have found this solution. It works, but is it the best way to achieve this ? Isn't there a more straightforward/easier solution to move the featured image below the header in a fullwidth size ?

// Remove image in post.
add_action( 'wp', 'beans_child_setup_document' );

function beans_child_setup_document() {

    // Only apply if for single view.
    if ( is_single() ) {
        beans_remove_action( 'beans_post_image' );
    }

}

// If we are on post, add featured image below header in a fullwidth format.
add_action( 'beans_header_after_markup', 'sps_add_image_under_header' );

function sps_add_image_under_header () {

  if ( !is_singular( 'post' ) )
   return;

 global $post;

 $thumb_id = get_post_thumbnail_id();
  $thumb_url_array = wp_get_attachment_image_src( $thumb_id, 'full-size', true );
 $resized_src = beans_edit_image( $thumb_url_array[0], array(
    'resize' => array( 1600, 300, true )
  ) );

  ?>
  <figure class="uk-margin-top-remove">
   <img src="<?php echo $resized_src; ?>" class="" alt="<?php the_title(); ?>">
  </figure>
 <?

}

Any advice would be much much appreciated ! 🙂

Mat

Hey Mathieu,

First I would like to congratulate you for coming up with a solution which shows great understanding of Beans 😉

While your code would work, it is a little overkill and there is an easier solution. You could use the beans_edit_post_image_args (see hook reference here) filter which is made for that. Below is the example code snippet to crop the post image to 1600x300 as in your code:

add_filter( 'beans_edit_post_image_args', 'example_post_image_edit_args' );

function example_post_image_edit_args( $args ) {

  return array_merge( $args, array(
   'resize' => array( 1600, 300, true ),
 ) );

}

If you want to resize the responsive small size (480px screens and smaller), you can use the filter beans_edit_post_image_small_args in the same fashon.

Alternatively, you could use WordPress to handle the image sizes since they have added responsive in version 4.4. Note that this will then use the_post_thumbnail() to output the image instead of Beans Image API. To do that, use the code snippet below.

add_filter( 'beans_post_image_edit', '__return_false' );

When it comes to finding actions and filters, you may either find it in Beans Code Reference or straight in Beans Theme code. Personally, I usually always look in the code if they are well engineered and documented. Therefore, I would strongly suggest to understand the Framework Structure and look in the code when you are search for actions and filters 🙂

Happy coding Mat,

A huge thanks to you, Thierry ! I'll definitevely have further looks inside the Beans Code Reference. 🙂 Have a nice evening, Mat