Using the WordPress media manager, it’s
extremely simple to insert, align and link your individual images and image
galleries.
To insert an image into your Page/Post, 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.
No matter whether you’ve clicked the Add Media button or simply dragged and
dropped your image into the Visual Editor, once your image is uploaded, your
Media Library is displayed, which contains all your previously uploaded images.
The image(s) that you’ve just uploaded will be automatically ‘selected’ for
easy insertion into your Page or Post. Selected images are shown with a ‘tick’
icon in the top right corner of the image.
After uploading your
image(s), you can then select other previously uploaded images by holding down
the Ctrl key (Cmd key on Macs) and simply clicking on them. To deselect an
image, click the ‘tick’ in the top right corner of the image.
At the bottom of the window
you will see a count of the number of images currently selected.
There are several options within this Insert Media window to help make it
easier to add images into your Page or Post.
By default, all previously
uploaded images are shown, starting with the most recent uploads. If you’d like
to narrow this list down, at the top of the window is a dropdown list that
allows you to filter your displayed images by All media items, items Uploaded
to this post/page, or Images, Audio files, Video files or Unattached files. You can also filter your media files by selecting a date, or
alternatively, there is also a Search field that allows you to search for specific images.
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
For each image, you can
select how you would like the image aligned, either Left, Center or Right aligned, using the Alignment dropdown list. You can also
select None for no alignment which
will mean the image will display using the default alignment setting for your Theme.
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).
Once you’ve selected all your
images, click the Insert into post button to insert the selected image(s) into your Post at the current cursor
position (when editing a Page, this button will say Insert into page).
If you’d like to change the
order of your images, click the Edit Selection link at the bottom of the Insert Media window. The window will change so that only the selected images are shown.
Alternatively, clicking the Clear link will deselect all images.
After clicking the Edit Selection link at the bottom of the Insert Media window, all the currently selected images are shown.
You can change the order in which the images will appear in your Page or Post
by clicking and dragging each image to reorder them. You can also update the
image Title, Caption, Alt Text and Description for
each image. To remove one of your selected images, click the small ‘-’ that
appears in the top right corner of the image when you hover your cursor over
the tick.
Clicking the Return to library button will take you
back to the previous screen that allows you to select or deselect your images.
When you’re editing your
Post/Page, if you wish to insert an image that you uploaded earlier (as opposed
to uploading a new image), click the Add
Media
button again("
). Once the pop-up window
displays, click the
Media Library tab
at the top of the pop-up window rather than dragging a new file
into the upload window. All your
previously uploaded images will be displayed, with the most recent ones shown
first.
Select the image(s) that you’d like to insert
into your Page or Post and then simply click the Insert into post button (or if you’re editing a Page, this button
will say Insert into page). As
mentioned earlier, you can also click the Edit Selection link at the bottom
of the window if you’d like to change the order the images are inserted.