How to Change Image Dimensions for Attached Images in WordPress

hedgehog-mascot

WordPress allows you to specify three image dimensions via WordPress Dashboard > Settings > Media. These three image sizes are thumbnail, medium, and large. You can define the dimensions for these images in pixels.

Attachment Display Settings

When you are attaching an image to your post or page via the Add Media button, WordPress presents you with a list of Attachment Display Settings in the bottom right corner of the Insert Media window.

attachment-display-settings

Attachment display settings

The list for image sizes includes:

  • Thumbnail,
  • Medium,
  • Large, and
  • Full Size

But what do you do when WordPress doesn’t let you select from all options? For example, it doesn’t show you the large option. This can happen if you define dimensions that are too large for your usual image uploads.

In that case, there is a simple way to manually override your selection from the Insert Media window.

If an option is missing in the drop-down list of image sizes, then select the next (larger) image size. In this case, this is the full size option.

Then click on the Insert into post button.

The code inserted into your post or page will be something like this:

Manual Calculation

Launch the Calculator from Start > All Programs > Accessories and calculate the correct width and height of a large image.

On my blog the maximum width of an image attached to a post or page is 620 pixels.

If you don’t know the correct maximum width, then right-click on your post in Firefox or Chrome and select Inspect Element from the context menu.

inspect-element

Inspect Element

Now that I know the correct maximum width of a large image, I can do the following calculation:

Use three or four decimal points in the result of step 1. And round up or down the result to a whole number in step 2.

Since I already knew the correct width from Inspect Element (620 pixels), all I needed to calculate was the correct height of the image (395 pixels).

Now I can edit the code for the image like this:

Note that I changed three things: the width, the height, and the class of the image.

The large version of the image will be now displayed, even though WordPress didn’t originally offer me this image size.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Leave a Reply

Your email address will not be published. Required fields are marked *