Working With Images In Wordpress

February 20, 2015

Working with a new Content Management System can be daunting at first. WordPress is one of the easiest platforms we have worked with from a client viewpoint, but even WordPress has it’s quirks. This is the first in a series of articles about working with WordPress.

Today we will be looking at inserting images into pages and posts.

Inserting Images

To add an image to a page or a post, start by placing your cursor where you you like the image to appear, then click on the Add Media button.

A screen similar to the following will be displayed.

By default, the Media Library is displayed. The Media Library contains all the images that have been uploaded to your website.

If the image you want to add to your page or post is located in the Media Library, simply click on the image you want to use. The image will then be highlighted.

If the image you want to add to your page or post is not located in the Media Library, click on Upload Files.

You can then either browse to the image on your computer and double-click on the filename, or drag and drop the image file into the upload window.

In either case, the image will now appear in your Media Library.

You will then be able to edit the information for the file and set the display settings.

Editing Image Information

To edit the information, fill in the fields in the ATTACHMENT DETAILS section.

Title: The name of the image (for your own identification)
Caption: Only enter text here if you want to add a caption to your image. The text you enter here will be displayed below the image. If left blank, no caption will appear.
Alternate Text: This is descriptive text describing the image. It is important to fill this in, as it is used in the alt tag for the image. Alt tags are are not only good for SEO purposes, but they are important to use for accessibility. Screen readers use this tag for people who have impaired sight.
Description: A short description of the image (for your own use)

The ATTACHMENT DISPLAY SETTINGS pane controls how the image is displayed when viewed on the site.

You have options to set how you would like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, In addition you can set what size image you would like to display on your page.

The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:

Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
Center: Centers the image horizontally on the page. The text will flow above and below the image.
Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
None: Inserts the image in to the page with no alignment

The Link To settings determine the URL/web address to which the image will be linked when clicked on by a visitor to your site. You can specify the following image link settings:

Attachment Page: Links your inserted image to its WordPress media attachment page.
Media File: Links your inserted image directly to the original, full-size version of the file
Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked..
None: This setting will remove the link completely, rendering the image “un-clickable”.

The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:

Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note: by default the Thumbnail size is a square, so some cropping of your original image may occur.
Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

Once you have completed the above steps, click the Insert Into Post button.

Your image will then show up in your post.

This is how it looks in the editor.

This is how it looks on a website.

Editing Images

If you would like to change the size or the alignment of an image, click on the image with your post, and then click on the Edit Image button (the pencil).

This will allow you to edit the size, details and display settings of the image.

You can also edit the image size and alignment directly in the WordPress editor.

Resizing An Image In The Editor

To resize the image directly in the editor, simply click on the image to make it “draggable”.

To resize the image, simply drag it to the desired size.

The result will look something like this (depending on how large, or how small, you made your image)

Aligning An Image In The Editor

There are 2 methods of editing images in the editor. One is using the main editor icons. If you want your image to be right-aligned, entered, or left-aligned, you can simply use the appropriate buttons in the wordpress editor.