Resize images

Jochen Gererstorfer

Hello, I found the way to resize the featured images. But I want also to resize the images inside the posts.

I saw somewhere, that we should set the image sizes in the Media Settings to 0, so that WP do not create those smaller images. But it seams that Beans do not create smaller sizes too.

I also need a smaller size for the gallery thumbnails.

What is the Beans way to do that?

thanks Jochen

Thierry Muller

Hi Jochen,

WordPress creates responsive images by default and setting all sizes to 0 will prevent that from working so it might not be the best idea.

You can either modify the WP sizes according to your need which will apply globally for your all images added. Beans Image API is more to be used in your own HTML, so for post and gallery you could use the various image WP filters to replace their output with your own output, in which case you may use Beans Image API.

For example, if you wanted to modify the images added inline in the post, you could use the WP filter image_send_to_editor, use the Beans Image API to create the resized images and write your own HTML output. Here is what the code would look like:

add_filter( 'image_send_to_editor', 'example_responsive_post_image', 10, 8 );

function example_responsive_post_image( $html, $id, $caption, $title, $align, $url, $size, $alt ) {

  $small = beans_edit_image( $url, array(
   'resize' => array( 465, false ),
  ), 'OBJECT' );
  $medium = beans_edit_image( $url, array(
    'resize' => array( 650, false )
 ), 'OBJECT' );

  $html = '<picture>';
    $html .= '<source media="(max-width: ' . (int) $small->width . 'px)" srcset="' . esc_url( $small->src ) . '">';
   $html .= '<source media="(max-width: ' . (int) $medium->width . 'px)" srcset="' . esc_url( $medium->src ) . '">';
   $html .= '<img src="' . esc_html( $url ) . '" alt="' . esc_html( $alt ) . '">';
 $html .= '</picture>';

  return $html;

}

Beans Image API really comes handy when you need to create image sizes on the fly, something that WP can't do as image sizes are set globally.

Hope that helps,

Jochen Gererstorfer

Thank you for the code. I think WP don't like something of it. After adding that code to my functions.php, the editor does not include the image code to the editor. I found a missing comma, but I don't know what else could be wrong?

I am also not sure, if that is what I am looking for. The width of my content area is 705px. If someone uploasds an 1400px wide image, there should be a 750px resized version of the image.

Thierry Muller

Hey Jochen,

Sorry my bad, there was a mistake in my previous snippet with a non matching function names which I updated so it should be working now. Thanks for the heads up!

Regarding your request, I think what your are after might be the snippet below:

add_filter( 'image_send_to_editor', 'example_resize_post_image', 10, 8 );

function example_resize_post_image( $html, $id, $caption, $title, $align, $url, $size, $alt ) {

  // Resize image to 750.
 $image = beans_edit_image( $url, array(
   'resize' => array( 750, false ),
    'set_quality' => array( 100 )
 ), 'OBJECT' );

  return '<img src="' . esc_html( $image->src ) . '" alt="' . esc_html( $alt ) . '" width="' . esc_attr( $image->width ) . '" height="' . esc_attr( $image->height ) . '">';

}

Note that the snippet aboce only resize the images to 750 (if the image inserted is wider indeed) but I didn't add any responsive. If you want to do responsive too, I suggest you take on the challenge and try to write using the first responsive example and the snippet I provided in this reply.

Don't hesitate to ask if you don't get it right 🙂

Happy coding,

Jochen Gererstorfer

I see, but that is a little bit dangerous. If I hit "Flush Images" in the settings, that image link is gone.

I think it is the better way to use the WP media settings and set the big image size to my content width.

Thierry Muller

You are absolutely correct, since the resize is done when the image is added to the editor and not in the front end, it will cause issues if you flush the images as they won't be re-created when the front end load again.

This is actually not a very stable solution and I think the only option then it is to do a preg_replace using the_content filter to replace the images and action the resize.

I can't think of a better solution 🙁

Thierry Muller

I think Chris mention that before the WP resize image was improved. I completely agree with you and that is what I mentioned in this reply.

Setting the WP image sizes is meant to do exactly that, set the post images size globally. Beans Image API comes into play when you need to have more control in the front end for your own gallery, slideshow etc. It allows to edit images on the fly from your template files which is something WP can't do. Both have very different purposes 🙂

Write a reply

Login or register to write a reply, it's free!