{"id":55902,"date":"2015-10-16T05:59:10","date_gmt":"2015-10-16T09:59:10","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=55902"},"modified":"2017-09-11T06:34:25","modified_gmt":"2017-09-11T10:34:25","slug":"wordpress-how-to-resize-and-crop-images-in-media-library","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-resize-and-crop-images-in-media-library.html","title":{"rendered":"WordPress. How to resize and crop images in Media library"},"content":{"rendered":"

\r\n

This tutorial provides an explanation of how to resize<\/strong> and crop<\/strong> images in Media Library<\/strong> in WordPress.<\/p>\r\n

WordPress. How to resize and crop images in Media library<\/a><\/p>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n
    \r\n
  1. \r\n

    Log into your WordPress admin panel and navigate to Media -> Library<\/strong>:<\/p>\r\n

    \"Navigate_to_Media_Library\"<\/a>\r\n\t\t\t<\/li>\r\n

  2. \r\n

    Select the picture you want to work with and click on it.<\/p>\r\n<\/li>\r\n

  3. \r\n

    Hit the Edit Image<\/strong> button under the picture:<\/p>\r\n

    \"Click_Edit_Image_button\"<\/a>\r\n\t\t\t<\/li>\r\n

  4. \r\n

    In order to resize<\/strong> your image, locate the Scale Image<\/strong> section on the top right side of the screen.<\/p>\r\n

    Please note that scaling should be done before cropping and you can only make images smaller (not larger).<\/p>\r\n<\/li>\r\n

  5. \r\n

    Change the width or height (the first and second fields respectively) to the desired dimension and you will see that other field will be adjusted automatically and proportionally.\r\n\t\t\t\t<\/p>\r\n<\/li>\r\n

  6. \r\n

    Once you are done, hit the Scale<\/strong> button:<\/p>\r\n

    \"Change_dimensions_and_click_Scale_button\"<\/a>\r\n\t\t\t<\/li>\r\n

  7. \r\n

    Refresh and check your website to see your changes.<\/p>\r\n

    You can verify whether the image dimensions are correct by using a developer tool, for example Firebug (for Mozilla Firefox):<\/p>\r\n

    \"Check_dimensions_in_Firebug\"<\/a>\r\n\t\t\t<\/li>\r\n

  8. \r\n

    In order to crop<\/strong> your image, click on it and drag with your mouse to select that part of the image you would like to have.<\/p>\r\n<\/li>\r\n

  9. \r\n

    Once you have selected the desired part of the image, you will see that dimensions are displayed in Selection<\/strong> input fields under Image Crop<\/strong> section. If you wish, you can enter these dimensions manually as well, otherwise you may skip this step.\r\n\t\t\t\t<\/p>\r\n<\/li>\r\n

  10. \r\n

    If you would like to crop your image according to a specific aspect ratio, you should enter the values (e.g. 1:1 (square), 4:3, 16:9, etc.) into Aspect ratio<\/strong> fields (otherwise you may skip this step as well). Hold down the Shift<\/code> key on your keyboard and drag one of the edges of your selection to enlarge or reduce the size of a cropped area. If you already made a selection, the specified aspect ratio will automatically change your selection box to match it.\r\n\t\t\t\t<\/p>\r\n<\/li>\r\n

  11. \r\n

    Once you are done with cropping, hit the Crop<\/strong> button just above the picture and you will have your new image:<\/p>\r\n

    \"Crop_and_adjust_selection_click_Crop_button\"<\/a>\r\n\t\t\t<\/li>\r\n

  12. \r\n

    If you do not like your cropped image for some reason, you can press the Revert<\/strong> or Redo<\/strong> buttons above the picture to revert or redo your last change respectively and start cropping once again:\r\n\t\t\t\t<\/p>\r\n

    \"Revert_and_Redo_buttons\"<\/a>\r\n\t\t\t<\/li>\r\n

  13. \r\n

    Select to what sizes (thumbnail, all sizes, etc.) of current image you would like to apply your changes by choosing one of the options in Thumbnail Settings<\/strong> section.<\/p>\r\n<\/li>\r\n

  14. \r\n

    Press the Save<\/strong> button in order to save your cropped image:<\/p>\r\n

    \"Select_image_sizes_and_click_Save_button\"<\/a>\r\n\t\t\t<\/li>\r\n

  15. \r\n

    Refresh and check your website to review your edited picture.<\/p>\r\n<\/li>\r\n

  16. \r\n

    Also, if you are not happy with your changes, you can always restore original image<\/strong> by pressing the Restore image<\/strong> button below the Scale Image<\/strong> section:\t<\/p>\r\n

    \"Restore_original_image\"<\/a>\r\n\t\t\t<\/li>\r\n<\/ol>\r\n

    Now you know how to resize<\/strong> and crop<\/strong> images in Media Library<\/strong> in WordPress.<\/p>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n

    WordPress. How to resize and crop images in Media library<\/a><\/p>\r\n

    <\/p>","protected":false},"excerpt":{"rendered":"

    This tutorial provides an explanation of how to resize<\/strong> and crop<\/strong> images in Media Library<\/strong> in WordPress.<\/p>\n","protected":false},"author":95,"featured_media":55913,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[2085,537,526,803,568,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/55902"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/95"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=55902"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/55902\/revisions"}],"predecessor-version":[{"id":83136,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/55902\/revisions\/83136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/55913"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=55902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=55902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=55902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}