Images in Posts and Pages: Using WordPress Media Library

One of the features within WordPress I get asked about most is the Media Library.  Specifically how to attach and use images within a blog post or web page.  Unfortunately it is also one of the areas with the poorest documentation.  When I first started using WordPress I searched for any help on how to use the Media Library and eventually I ended up working out how to use it myself through trial and error.  Of course I ended up using the features incorrectly at first and it’s only through familiarity with WordPress that I’ve learnt the correct way to use the Media Library.  So I wanted to share what I’ve learnt with you and hopefully start some good documentation on the image/gallery features within WordPress.

The first thing to understand with adding images to WordPress is attachments.  Attachment is a content type within WordPress.  There are template pages within WordPress themes that handle how to display attachments, there are hooks that call and manage attachments, and in the database there are fields that store the values associated with an attachment.  This is important because if you don’t treat images as attachments then you will miss out on a lot of the features within WordPress for handling them.

There are two ways to add images to your WordPress site.  The first one we’ll look at is to upload the image(s) into the Media Library.  On the left hand menu within WP Admin click on Media and then Add New.

Click the Select Files button and browse to the location of your image or images on your computer.  You can select multiple images if you are using the Flash Uploader by holding down the shift or the CTRL button and selecting each image.  Note the maximum upload size for an image is 8MB.  If your image is over this file size you will need to use an image editing application to resize the image.

Once the images have been uploaded to the Media Library you will need to attach them to the page or post where you want to use them.  Check the box next to each image you want to  attach and click the Attach link in the table next to one of the images.

A pop up box will display a Find Posts or Pages screen where you can search for the post or page by its name.  Select the radial next to your post or page and click Select.

You have now successfully attached an image or images to a post or page.  Now go to either Posts or Pages and edit the post or page you attached the image(s) to.  In my example I have attached 5 images to the page called About.

In the edit page screen click on the icon next to Upload/Insert that looks like a picture frame.

A pop up box will display the Add An Image options.  Select Gallery to get the images you attached to this page or post.

If you want to insert a single image into your post or page click Show next to that image and then select the options you want and click Insert Into Post.  Options include the image Title, Alt Text, Caption, and Description, as well as where the image links to, the alignment of text around the image, and the size of the image.  We will explore options later on.

The image will be inserted where the cursor was placed within the post or page editor.  You can move it by dragging and dropping it and you can edit it by clicking on the image and then click the edit button that looks like a photo.

One feature of WordPress is the ability to insert multiple images as a gallery into a post or page.  To do this when you are on the Gallery screen of the Add An Image pop up configure the Gallery Settings options and click the Insert Gallery button.

The difference between inserting a single image and inserting a gallery is shown in this screenshot of the web page used in my examples.

The second method of attaching an image(s) for use in a post or page is to use the image uploader within the Add An Image screen.  Edit the post or page where you want to attach the image and select the Add An Image button.

Select the From Computer tab and then Select Files.  Follow the same steps to select and upload the image or images as described above.

Now that you’ve uploaded images, attached them to posts or pages, and inserted them as a single image or a gallery within a post or page you are in a position to take advantage of some of the advanced options and features included with WordPress.  Let’s start by looking at options.  We’ve already seen that you can configure an images’ Title, Alt Text, Caption, and Description, as well as where the image links to, the alignment of text around the image, and the size of the image.  So let’s look at these in more detail and what else we can do.  First select an image you have already inserted into a post or page and click the edit button.

On the left hand side of this pop up screen you will see Size.  Here you can scale the image down from 100% to 60% of its current size.  This is a great way to adjust the size from the default full size, Large, Medium, and Thumbnail sizes available when you insert the image.  Below the Size you will see the alignment.  Again this controls how text is aligned to the image.  Select the appropriate radial and see how it changes in the preview above.

At the bottom of the Edit Image screen you will see the Link URL.  You can select to have the image to link to itself (Link To Image) which will open the full size copy of the image or you can enter a URL for a post, page or other URL so that when the visitor clicks on the image they are redirected to that URL.  On the Advanced Settings tab you will find that you can enter a custom size for your image, enter a CSS class or individual enter styles, and enter a border, vertical spacing and horizontal spacing.

Below the Advanced Image Settings you will find Advanced Link Settings where you can control the Link Rel, CSS class, Styles and Target of the link.

Not only does WordPress include some advanced settings and options for images, it also supports shortcodes for images and galleries.  A shortcode is a code you can enter in the visual editor of a post or page to call some feature or functionality.  With the Gallery shortcode you can call an image or a gallery and call options with them.  The basic shortcode we will use is “gallery” (remember shortcodes are wrapped in square brackets [] ).  Insert this into the visual editor for your post or page and WordPress will display the gallery attached to that post or page.

To display a single image using this shortcode enter the following option in the shortcode “gallery include=”23″”.  The number is the attachment ID of the image which can be found by clicking on the image in Media Library and looking for the URL in your browser.  It should look something like this “http://mysite.com/wp-admin/media.php?attachment_id=386”.

If you want to display multiple images then add the attachment ID for each image separated by a comma like so “gallery include=”23,24,25″”.  Some additional options for the gallery shortcode are columns=”2″ where the number is the amount of columns you want displayed, size=”full” where you can choose to display your images as thumbnail, medium, large and full.  Finally you can use the option id=”123″ which will insert a gallery by its ID in another post or page.  For example, if I have created a gallery on a page and I want to display it elsewhere in my site I can insert “gallery id=”123″” where 123 is the ID of my gallery in the visual editor.  The gallery ID can be found in the source code of your post or page where you gallery was inserted.

For more information on the Gallery shortcode refer to the WordPress Codex at http://codex.wordpress.org/Gallery_Shortcode.

Article written by Steve Mortiboy

Steve has over 25 years of project management and service delivery experience. He started his career in defense communications before moving to the British Ministry of Defence where he worked for the British Army. For the past 15 years, Steve has worked in IT, managing large projects and enterprise clients. Recently he has worked with entrepreneurs and small businesses helping them to meet the needs of their growing client base. A recent immigrant from England, he brings some international flavor to the team.