WordPress Image Crop Function

Clients often struggle with how to create images that have a particular width and height. Most people do not have access or are not comfortable with manipulating images using graphics software. In order to help clients years ago Webprem wrote 2 tutorials on how to work with images using free graphics software called Pixlr.

Webprem also wrote a 3rd tutorial on the fact that if a client needed an image that is wide and not very tall it is helpful for them to understand that some images will not work for their needs. That tutorial is located at:

Learn How to Resize and Crop Images within WordPress

This may be easier for clients to do as long as they are given access to the backend of a WordPress website. For purposes of this tutorial the original image dimensions were 4000px wide by 2731px tall. Our goal is to scale and crop the image so that the remaining image is 1920px wide by 480px tall.

Step One
Step One: Select Media on left hand side within backend of WordPress website

Step Two
wordpress-edit-media-03 Step Two: Click 
 Select Files

Step Three
wordpress-edit-media-02 Step Three: Select
Add New from within Media Library

Step Four
wordpress-edit-media Step Four:  Red rectangle labelled A displays file size which is 3 MB with dimensions of 4000px wide by 2731px tall.

Red rectangle labelled B is where you click to Edit Image

Step Five
wordpress-scale-media-01 Step Five: Let’s say I want to make my 4000px wide image above a 1920px wide image. When I enter 1920 into the left-hand “width” box, the system will automatically calculate the px in the right-hand “height box” in order to keep the proportions of my original image.

Step Six
wordpress-scale-media-02 Step Six: You can see above that when I entered 1920, the system automatically calculated 1311 for the height value.  Now click the Scale button and your image will take on your new dimensions. However, a new button will also appear, letting you restore your original image if you like.

 

Step Seven

wordpress-crop-media-01Step Seven: In order to crop the height of the image manually you simply click on the image, and then holding your mouse down, drag the box that appears.

Step Eight
wordpress-crop-media-02 Step Eight: You can move this box around and drag the edges to get it the way you want it, plus you can also manually enter a number like 480 in the right hand “height-box” above. Once you have it the way you want it, simply click the top left-hand Crop button above the image, and this will crop your image.  Then click the Save button found just below the image.

Step Nine
wordpress-edit-final-result
Step Nine: After you have saved the  cropped image in Step Eight then close the image and reopen the image.  You can now see the file size is only 191 KB and the dimensions are 1920px wide by 480px tall.