Image Manipulation in WordPress

Introduction

Image manipulation saw a complete overhaul in WordPress 3.5. Since its release, developers have more flexibility to enhance the capabilities of the platform. This provides a really powerful way to expand how WordPress generates image sizes.

Prior to version 3.5, WordPress had a lot of the same code spread in its code base. It was possible for images to be saved differently if the developer could not accurately remember where images were last manipulated. These issues were resolved in WordPress 3.5 when the developers abstracted the GD code from the core and transitioned to using a few new classes. WP_Image_Editor became the main class with shared methods and WP_Image_Editor_GD now contains all the code that WordPress had previously.

This is how it looks right now:

// Return an implementation that extends <tt>WP_Image_Editor</tt>
$image = wp_get_image_editor( 'cool_image.jpg' );

if ( ! is_wp_error( $image ) ) {
    $image->rotate( 90 );
    $image->resize( 300, 300, true );
    $image->save( 'new_image.jpg' );
}

Because GD was abstracted, it was possible to easily integrate Imagick support. Resulting in a better image quality, support for Imagick is added by default for all users who have it available on their Web host. This is especially important when working with images with extended color profiles. If the functions that support Imagick are not available, WordPress will default back to GD again. The way the code is written allows developers to integrate their own image manipulation engine or extend the existing ones.

Another big advantage is that the new class can be used directly in a customized plugin or theme by adding one simple function call: wp_get_image_editor( 'cool_image.jpg' );. It is even possible to check if one of the existing editors supports a mime type or method by calling: wp_image_editor_supports($args). More information about the launch of these functions can be found on WordPress.org. For almost two years, developers have been building on these capabilities.

What this means for the community

The typical WordPress user may not be aware of this code and therefore it is not particularly helpful for them. Only a few plugins have been created to harness the power of image manipulation to date. These plugins fully depend on WordPress code and not a third-party library. In the last two years, I have built multiple plugins to show the power of WP_Image_Editor. Some of these plugins feature a gmagick image editor and an improved GD editor. However, they have not yet been widely used by developers.

One specific project that I worked on was WP_Image. This class represents a WordPress media item. If this item is an image, it is possible to create new image sizes, overwrite existing ones, call WP_Image_Editor and modify it to your specifications. The following example creates a new image size and stores it similarly to the WordPress add_image_size() function. Developers will find it easier to use this method, but there is still room for improvement.

$image = new WP_Image(313);
$image->add_image_size( ‘slider’, 900, 200, true );

This code helps by reducing the amount of images that are stored in the uploads folder. If your slider only has six images, it is not necessary to generate thousands of images that will never be used.

The Solution

To provide developers with more power for image manipulation, there is a need to review the function add_image_size(). This great function allows developers to determine the image’s name, width, height, and any areas to be cropped. The limitations of this function only become apparent when attempting to complete more advanced manipulation.

I’m currently working on combing all of my code within one WordPress plugin. Appropriately named the Improved Image Editor, this plugin can be found on WordPress.org and on GitHub. It currently focuses on the API side which makes it particularly helpful for developers. By enhancing a WordPress installation with this plugin, users can already add much more image editing functionality:

Setting the quality of an image size

Improved_Image_Editor::register_image_size_info( ‘medium’, array( ‘quality’ => 20 );

Setting the zoom of an image size

Improved_Image_Editor::register_image_size_info( ‘medium’, array( ‘zoom => 2 );

Setting a filter on an image size

Improved_Image_Editor::register_image_size_info( ‘medium’, array( ‘filters’ => array(‘grayscale’) );

Although it already has some great features, I will always consider this plugin to be a work-in-progress as new capabilities are continuously added. The range of filters will soon be expanded, providing even more advanced manipulation within WordPress. I was able to create this functionality by overwriting the multi_resize() method of WP_Image_Editor. The method is still essentially the same as its original version, but now two methods can be called.

The first call changes the sizes array. This is currently only necessary when adding a filter while using zoom. To accomplish this, it overwrites the image_resize_dimensions() function.

The second method allows other methods to be called on the image object. It checks the image information and can call the set_quality() method or the filter methods. To make things even easier, the filter method needs to be prefixed with filter_.

How to manually install the plugin

The Improved Image Editor plugin can be easily installed from the WordPress directory using the dashboard search option. However, if you’d like to install it manually, here are some instructions:

1. Download the plugin from GitHub or WordPress.org
2. Go to Plugins in your WordPress dashboard and click Add New
3. Click Upload
4. Browse the ZIP file from your hard drive
5. Click Install Now
6. Click Activate Plugin to complete the process

   (More information about installing plugins can be found on the 1&1 Blog)

Final Thoughts

Even at this early stage, it’s easy to see the power of this plugin and why this type of image manipulation should be integrated into WordPress. I will continue to expand the functionality of this plugin and soon WP_Image will be added so developers can work more easily with images in WordPress. With this capability, developers will only need to write a few lines of code to complete the process. Furthermore, users will soon be able to view and manage image size and quality directly within their administration page.

For more tips and advice on how to best use WordPress, for both beginners and advanced users, head to the 1&1 Community or the 1&1 Blog.