{"id":121919,"date":"2013-09-23T08:00:42","date_gmt":"2013-09-23T12:00:42","guid":{"rendered":"http:\/\/wpmu.org\/?p=121919"},"modified":"2013-09-22T23:54:59","modified_gmt":"2013-09-23T03:54:59","slug":"crop-image-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/crop-image-wordpress\/","title":{"rendered":"How to Crop an Image Inside of WordPress"},"content":{"rendered":"

When people upload images to their WordPress sites, they often blow through the process so quickly that they never realize half the things you can do with images. One of those things is cropping images right inside of the Media Library.<\/p>\n

In this post, we\u2019ll go through how to do that.<\/p>\n

\n
\"cutting\"<\/div>\n<\/div>\n

Getting to the Editing Screen<\/b><\/h2>\n

You can get to the editing screen by one of two ways.<\/p>\n

You can go through the Media Uploader as you normally do when you insert an image into your posts.<\/p>\n

\n
\"add-media\"<\/div>\n<\/div>\n

Just click on the image you want when the Media Library loads up, and then click \u201cEdit\u201d on the right-hand side.<\/p>\n

\n
\"media-uploader\"<\/div>\n<\/div>\n

Or you can go directly to the Media Library from your left side menu \u2013 Media > Library. In this case, once you find the image you want, hover over it and click \u201cEdit.\u201d And then when the new screen appears, you\u2019ll need to click \u201cEdit\u201d again just under the image on the left.<\/p>\n

Here\u2019s the second edit button.<\/p>\n

\n
\"2nd-edit-button\"<\/div>\n<\/div>\n

In the Editing Screen<\/b><\/h2>\n

Whichever way you choose, you\u2019ll come to the editing screen, which will look like this.<\/p>\n

\n
\"editing-screen\"<\/div>\n<\/div>\n

Flipping Your Image<\/b><\/h2>\n

Right above the picture, you\u2019ll see a number of buttons that will allow you flip the image in a number of different ways.<\/p>\n

\n
\"flip\"<\/div>\n<\/div>\n

For example, say I\u2019d like to make the jellyfish in my image flip and go in the other direction. No problem.<\/p>\n

\n
\"flipping-picture\"<\/div>\n<\/div>\n

Scale Your Image<\/b><\/h2>\n

Another option you\u2019ll have is to scale the image down on the right hand side. (Note: you can only make images smaller, not bigger.)<\/p>\n

\n
\"scale\"<\/div>\n<\/div>\n

Let\u2019s say I want to make my 1024px wide image above a 700px wide image. When I enter 700 into the left-hand \u201cwidth\u201d box, the system will automatically calculate the px in the right-hand \u201cheight box\u201d in order to keep the proportions of my original image.<\/p>\n

You can see below that when I entered 700px, the system automatically calculated 525px for the height value.<\/p>\n

\n
\"scale-700px\"<\/div>\n<\/div>\n

Once you click the \u201cScale\u201d button, your image will take on your new dimensions. However, a new button will also appear, letting you restore your original image if you like.<\/p>\n

\n
\"restore\"<\/div>\n<\/div>\n

Crop by Dragging<\/b><\/h2>\n

In order to crop the image manually however you like, you simply click on the image, and then holding your mouse down, drag the box that appears.<\/p>\n

\n
\"click-and-drag\"<\/div>\n<\/div>\n

You can move this box around and drag the edges to get it the way you want it. Once you have it the way you want it, click the top left-hand \u201cCrop\u201d button above the image, and this will crop your image.<\/p>\n

\n
\"crop\"<\/div>\n<\/div>\n

Here\u2019s my newly cropped image. You\u2019ll notice that a lot of the top and bottom blue have been cropped out. It\u2019s also only 700px wide now.<\/p>\n

\n
\"cropped-image\"<\/div>\n<\/div>\n

Setting the Aspect Ratio<\/b><\/h2>\n

Something else you can do is to set the aspect ratio of the manually created cut-out. For example, let\u2019s say you\u2019d like your image to have a 16:9 aspect ratio. Simply put 16 and 9 in the aspect ratio boxes, and then before you click on the image and begin dragging your cut-out box, hold down the Shift key<\/b>.<\/p>\n

\n
\"16-9-ratio\"<\/div>\n<\/div>\n

When you have it the way you like it, as above, click the \u201cCrop\u201d button in the upper left-hand corner above the picture as demonstrated in the previous step.<\/p>\n

That’s It<\/strong><\/h2>\n

And that\u2019s it. While you certainly don\u2019t have all the advantages of a full-blown graphics program, if you need a quick edit, doing it right inside of WordPress itself is certainly an option.<\/p>\n

Photo credit: Jez Page<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Forget graphics programs. You can edit your images right inside of WordPress.<\/p>\n","protected":false},"author":84404,"featured_media":121921,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[16],"tutorials_categories":[],"class_list":["post-121919","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-images"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/121919","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=121919"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/121919\/revisions"}],"predecessor-version":[{"id":216444,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/121919\/revisions\/216444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/121921"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=121919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=121919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=121919"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=121919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}