Editing Images

The Beans Image API lets you resize, crop, rotate, flip and change the quality of any image in your website. Edited images are created on the fly and cached to ensure fast delivery. Edited images are duplicates of the originals and stored in a shared folder (wp-content/uploads/beans/images/ by default), which makes it easy to delete them via the Admin->Appearance->Settings->Flush Images setting without impacting the originals. New images are re-created on the fly. It is important to know that all images must be edited using beans_edit_image(). The second argument of this function is where it all happens. The array key defines which of the WP_Image_Editor function to use while the array value is used to define the function arguments. Don’t let the technical description fool you, seeing the examples below will make you realize how simple it is.  

Resize

In the example below, the image is resized to 600px wide.

$resized_src = beans_edit_image( $image_src, array(
  'resize' => array( 600, false )
) );

 

Crop

Images can be cropped using the resize function or the crop function. In the example below, the image is cropped to 600px wide and 400px high using the resize function. The cropping position is set to center and top.

$resized_src = beans_edit_image( $image_src, array(
 'resize' => array( 600, 400, array( 'center', 'top' ) )
) );

The crop function is used for more advanced cropping, such as precisely defining the cropping position. In the example below, the image is cropped 600px wide and 400px high, precisely from 89px left and 22px top.

$resized_src = beans_edit_image( $image_src, array(
  'crop' => array( 89, 22, 600, 400 )
) );

 

Rotate

Images can be rotated by setting the angle in degrees. In the example below, the image is rotated to 90 degrees.

$resized_src = beans_edit_image( $image_src, array(
 'rotate' => array( 90 )
) );

 

Flip

Images can be fliped horizontally or vertically. In the example below, the image is flipped horizontally.

$resized_src = beans_edit_image( $image_src, array(
  'flip' => array( true, false )
) );

 

Change quality

Images quality is set on a 1-100% scale as an integer (1-100). In the example below, the image quality is set to 50%.

$resized_src = beans_edit_image( $image_src, array(
 'set_quality' => array( 50 )
) );