Cropping & Resizing inside WordPress

WordPress now includes quite sophisticated tools to crop and resize images without leaving your website or having to purchase any special software. This is especially useful for reducing the size of photos from your digital camera and cropping just a selection of an image.

• Crop your image to an exact size for your slideshow or sidebar images
• Scale your image (keeping dimensions) to reduce the total file size (a great idea to keep loading times and hosting charges to a minimum)
• Rotate images or flip images vertically or horizontally
• Crop the thumbnail only to show the best square section
• Crop everything except the thumbnail

THIS IS A FREE TUTORIAL

Cropping an Image

If you downloaded an image and you only want to show part of it on your website, you can crop a section of your image.

1. On your WordPress admin sidebar, go to Media/Add New
2. Browse your computer and upload your  image
3. While the popup image window is still open, click on ‘Edit Image’ under the image preview
4. Click on the image and drag a crop box over the section you want to show
5. Adjust the cropped section by click on the points and dragging in or out
6. Click on the crop tool above the image to complete the crop
7. Click the ‘Save’ button to save changes

Scaling Your Image

Option #1 – keep same dimensions, reduce file size

1. On your WordPress admin sidebar, go to Media/Add New
2. Browse your computer and upload your image
3. While the popup image window is still open, click on ‘Edit Image’ under the image preview
4. Click Scale Image link top right
5. Type either a width (first box) or height dimension
6. Tick apply changes to all except thumbnail
7. Click the Scale button
8. Save Changes’ and close window or insert image

NOTE: If you need to crop and re-size your image, crop first, save your changes, then click the show link on the right of your image in the popup window and click on the edit image again to start resizing.

Option #2 – Scale to Exact Dimensions

1. On your WordPress admin sidebar, go to Media/Add New
2. Browse your computer and upload your image
3. While the popup image window is still open, click on ‘Edit Image’ under the image preview
4. Drag your mouse over the image and as you drag you will see the dimensions change on the right
5. Once you have the right dimensions, click the crop tool to crop
6. Apply changes to all except thumbnail
7. Click the ‘Save Changes’ button and close window

See screenshot above under “Cropping an Image”. You can see the width and height on the right as the crop box is being dragged on the left.

Using Your New Image

Adding your image to your website:

If you were editing your image on the post you want it on, just click insert once you’ve finished editing, otherwise

• Edit the page or post where you want your button to appear
• Click the ‘Add Image’ icon above the post content box
• Add a new image or click the Media tab and find your finished button image if already uploaded
• Click on show to see details and make sure you have a relevant title and alt title on the image
• Select size and image alignment
• Click ‘Insert’ button

Using your image on another website

• Go to Media , then Library on your admin sidebar
• Click edit under the image you need
• Copy the link url for that image
• Paste into another website as html
• OR Click view under the image you need then right click and save the image to your computer to use at a later date.

For example. PayPal custom payment page banner, ads on other websites which need to be a specific size, slideshow images for your homepage slideshow which need to be an exact size.

Share this tutorial

•