Images

Adding images and other media files such as videos, documents or PDFs is extremely easy within WordPress. All your images and files are stored in the Media Library. Once they’re uploaded into the Media Library, it’s a very simple matter to insert them into your Page or Post content. In the case of files such as Word Documents or PDFs, if necessary, it’s a simple process to create links to those files so that people can then download them.


Inserting An Image

Click the Add Media button and then simply drag your image(s) from wherever they are on your computer, into the browser window. Your file(s) will be automatically uploaded. Alternatively, click the Select Files button and then select the file(s) that you’d like to upload, using the dialog window that is displayed. It’s also possible to simply drag your image straight into the Visual Editor, rather than clicking the Add Media button.

Media > Add New

mediauploader
Image-Media Library

The properties of the currently highlighted image (i.e. The image with the blue border) will be shown on the right-hand side of the Insert Media window. These properties include the filename, the date the file was uploaded and the image size. It’s at this point you can also change the image Title, Caption, Alt Text and Description for each image, as well as the Alignment, Link and the Size at which the image is inserted.

  • Title – is displayed as a tooltip when the mouse cursor hovers over the image in the browser
  • Caption – is displayed underneath the image as a short description. How this displays will be dependent on the WordPress theme in use at the time. You can also include basic HTML in your captions
  • Alt Text – is displayed when the browser can’t render the image. It’s also used by screen readers for visually impaired users so it’s important to fill out this field with a description of the image. To a small degree, it also plays a part in your website Search Engine Optimisation (SEO). Since search engines can’t ‘read’ images they rely on the Alt Text
  • Description – is usually displayed on the attachment page for the media, however this is entirely up to the theme that is currently in use
Image-MediaLibrary-Tip

You can also change what your inserted image(s) will link to using the Link To dropdown list. You have the choice of linking to the image’s attachment page by selecting Attachment Page, or you can link to the full size image by selecting Media File. You can also link to any URL by selecting Custom URL. When you do this, a new field will appear that allows you to enter in the custom URL. You can also choose not to link to anything by selecting None.

When your image(s) are uploaded, WordPress will also create several copies of your file at various sizes. You can choose which one you’d like to insert into your Page or Post using the Size dropdown list. To insert the image at the exact size you uploaded, simply select Full Size. Next to each size listed in this dropdown will be the actual dimensions of the image, in pixels (e.g. 300 x 225).


Edit An Image

When you click on an image in your Page or Post, as well as the alignment, edit and delete icons mentioned above, the image also displays ‘resizing handles’. These are the small squares you see around the edge of the image. To resize your image, simply click and drag one of the corner resize handles.

As with any image editing software though, if you try to enlarge a small image, it will tend to get quite pixelated. It’s always best to insert a large image and then resize down.

editimage editingimages

 

The Thumbnail settings show how the featured image will look like in the overview of the posts. Since the uploaded pictures sometimes are too large or unfitted for the thumbnail, it can be necessary to make the picture fit the thumbnail. This is done by checking of the thumbnail check box in the Thumbnail Settings and then click the save button (please note that sometimes it is necessary to rotate the picture back and forth in order to be able to save the changes). When the picture is saved it should fit with the size of the thumbnail.

Tip

To shrink large images: upload to Compressor first:
http://compressor.io/compress
Then, upload compressed version to WordPress


 

Image Galleries

WordPress has its own simple built-in Image Gallery that allows you to add multiple images to a page in one easy step.

To insert an image gallery into your Page/Post, click the Add Media button. A pop-up window will display that looks the same as the one that displays when you add an image to your Page/Post. You can upload new images to use in your gallery or you can simply choose from your previously uploaded images.

By default, you’ll be shown a list of your previously uploaded images. If you’d like to upload a new image, click on the Upload Files link at the top of the pop-up window.

Click the Create Gallery link in the left-hand navigation then select the images that you’d like to insert into your gallery.

After selecting your images, click the Create a new gallery button at the bottom of the pop-up window. The window will change so that only the selected images are shown.

All the images that appear will be used within your Image Gallery. To reorder the images simply click on an image and drag it to its new position. If you’d like to add captions to your images, click the ‘Caption this image..’. text below each image and then type in your caption. Alternatively, click each image and then update the Title, Caption, Alt Text and Description on the right-hand side of the pop- up window. You can also include basic HTML, such as links, in your captions.

If you decide you no longer want a certain image to appear in your gallery, click the small ‘x’ that appears in the top-right corner of the image.

Since the built-in gallery is quite simple, there aren’t that many options to choose from when setting it up.

Link to – This sets what happens when the thumbnail image is clicked. Selecting Media File will open the full size image directly in your browser window. Selecting Attachment Page will open the image within one of your WordPress formatted pages
Columns – Specifies the number of columns to use when displaying your thumbnail images. Ultimately, this will be dependent on your Theme and how wide your page is. If you find the gallery isn’t displaying properly after changing this number you may need to change it to another number
Random Order – Click this checkbox to display your images in a random order
Size – Selects the size of the image to use in your gallery