Images in WordPress
This page will show you how to add images in WordPress the easy way. Images make content more interesting to your user, so it’s important to be able to insert images into posts and pages in a way that allows for harmony between text and type.
For most sites there will be two options for displaying images:
Uses your uploaded image while keeping the aspect ratio intact. Customised pixel dimensions for Thumbnail, Medium and Large size images have been defined for your website. When inserting an image in a page or a post, WordPress will resize the image according to your selection of Thumbnail, Medium or Large. The resulting image will most probably not adhere to the exact width and height specifications for your website as the aspect ratio of the original image is preserved.
Allows you to change the aspect ratio of an uploaded image and crop it according to exact image dimensions specified in your style guide. This means you don’t have to stick to the 3:2 standard photo format shape. Please refer to your site’s style guide to see how many image types are prescribed for your site and what their exact width and height dimensions are, in pixels.
How To Add Images In WordPress Posts or Pages
- To insert an image click on the Insert/Upload icon located above the formatting options. Images can be inserted from the library, from an existing offsite url or uploaded from your hard-drive.
- To upload from your computer, simply drag and drop your image, or hit the Select button to go into a file browser and manually navigate to the image.
- To insert an image from a url, just select the url tab and type or copy/paste the url into the text area provided.
- To insert from the media library, select the media library tab and select an image from the list.
- Once you have chosen your image you can then choose its size (full, large, medium, small and thumbnail), its alignment within the post (none, left, middle, center), description, caption and title.
- If you are using option A, simply select either Medium or Large and WordPress will resize the image for you.
- If you are using option B, select full as you have manually set the pixel size.
- Click the Insert into Post button and voila.
- The image can then be edited or deleted by clicking on the image and choosing one of the icons that appears in the left-hand corner of that image.
- Choosing Edit will open up a new window giving you the same size and alignment options as when you upload and insert images.
- If nothing else is working and the image is not displaying the way you want it to, there is a second tab under the edit image option called Advanced Settings where you can manually change the size of the image and any border or whitespace you might need to separate from the text. Try to never scale an image up as this leads to pixelation, and keep the aspect ratio the same or your image will look stretched or warped.
- The media window will appear when you select to upload or insert an image.
- You can choose to link to an image hosted on another site rather than uploading one yourself.
- The media library is your WordPress image repository. You can choose to use a pre-uploaded image rather than uploading a new one.
- You can either click on Select Files and search for the image you would like to use, or drag your image into the dotted box. Please note that the drag and drop upload only works in browsers with HTML5 upload support such as Chrome, Firefox and Safari. Other browsers will still display the Select Files button.
For an expanded explanation of editing and managing images and media go to the Media Library Page.