Insert Media into Posts and Pages

WordPress Content Management: Learn how to insert media into posts and pages in WordPress.

Included in this tutorial are uploading images, linking to videos and managing the WordPress media library.

The process described in the video and below also applies to adding a single image from NextGen Gallery.

Did you know that the images in these tutorials have all been inserted as single images?

Step 1 – Open the editor and place your cursor

insert media into wordpress
Step 1 Open your page or post for editing

Open the page or post
you want to insert the image into.

IMPORTANT – Place your cursor on the page where you want the image to appear before clicking the insert media button.

Just above the editor tools click the button next “Add Media” – a pop up window appears as shown below.

dragandropmedia2

Alternatively simply drag and drop the images into the editor as shown on the image below bypassing the use of the “add media” button.

as of version 3.9 drag and drop images directly in the editor
as of version 3.9 drag and drop images directly in the editor

Once you drop the images in the editor an upload dialogue box opens.

You can upload one or many images. On most servers you’ll be limited to images of 2MB or less in size, so if you have a high-res digital camera you might need to resize the images before uploading.

To upload multiple images simply select the different images while holding CTRL. You may only insert one image at a time directly on a page.

Once you’ve selected the images, press the Open button. The upload will start, showing a progress bar as it uploads and creates optional images sizes.

Uploading in progress
Uploading in progress

 Step 2 – Select options

Artbiz

This dialogue provides a lot of options and controls – let’s go through them:

Title – The name of your image. This text may appear when a visitor’s cursor rests on an image. See also SEO for Artists

Caption – the caption text for the image that will appear under the image on your site.
You can also add links into your captions. Please see the Create a Hyperlink tutorial as you a simply create the link using this method and copy and paste it into the caption box.

Alternative Text – a brief description of the image (is used by search engines to index your image). See also SEO for Artists

Description – the description,  mainly for use when you use the built in gallery for WordPress.

Alignment – This allows you to set how the image is aligned, none, left, center, right.

Link To – this is the default URL address where the image is stored on your site.  But it also allows you to create a link to another website – quickly and effectively. You can also press the three buttons – None, meaning the image has no link; File URL, the default; and Post URL, which will show your image within the design of the site rather than as an image on its own.

Size – choose which size of image to insert.  If it’s not too large, you can use the Full Size image – just make sure it fits into the space available. Otherwise, a Thumbnail, by default, is a 150 x 150px square; Medium is resized to fit into a 300 x 300px space and will maintain the aspect ratio.  The default thumbnail size can be changed under Settings>Media.

Once you’ve selected your options, press the Insert into Post button to add the image to your content.

The image in the page editor

The image appears on the page and you can apply further adjustments if needed to the settings described above.

To do this hover on the picture, you’ll see a row of icons appear as shown below. The “X” will delete the image from the page (it will still be in the media library) and a pencil to click to edit further. You can also change the float of the image from left, center, right and none.

edit-image

Apply further image editing

Change your image alignment, captions or add more info.

editimageadvanced

LINK TO Options

Media File: will link the image to the full size image in a pop up if you have a lightbox plugin installed or to the full size image on a new page.

Attachment Page: most themes have an attachment page that will display the image with a description if you type on in and previous and next links

Custom URL: if you want the image to link to another page the type or copy and paste the URL in box below, removing the default one that links to the image.

None: Select none if you don’t want the image link to any of the above

Resize Image

If needed drag the corners of the image to reduce of enlarge the image. This is particularly handy when trying to get a paragraph of text to align with the image.

editimagedragtoresize

Edit Image

Crop, rotate or flip the image from right inside the page editor.

editimagecrop


Adding video clips to your posts

Since WordPress 2.9, video embedding facilities have been added to WordPress. Simply put, all you need to do now is get the link for a video, paste into the editor, select it and click on the video link button.

inserting video
Inserting Video

NOTE: If the video you want to embed is one of your own, upload it to the media library, then copy and paste the Link URL provided on to the page/post. Then proceed as outlined on the image above.

Further reading from WordPress http://codex.wordpress.org/Embeds


WordPress Default Gallery

NOTE: THIS PROBLEM SEEMS TO BE FIXED IN 3.5 JUST MAKE SURE YOU SELECT THE APPROPRIATE LINK WHEN INSERTING YOUR IMAGE. SEE STEP 3 ABOVE

Notice the highlighted text on the image below “Gallery (2)”. This is the default gallery that comes with WordPress. On an Artbiz site we use NextGen Gallery in place of the default gallery. You may wonder what this is and you can read all about it at this post WordPress Gallery

wordpress gallery
The WordPress Default Gallery

Troubleshooting:
When you upload an image on a post or page it gets listed in under the gallery tab. If you insert the image again via the Gallery tab WordPress automatically assigns the attachment template to the image. This is fine if you want to use the built in WordPress Gallery but if you are trying to link out to an external website or just want an enlargement of the image with thickbox, these links will fail.

To correct this, the image “Link URL” needs to be changed to “Link to Image” in order to remove the attachment template that WordPress applies. Update and then open the image once more to type in the external URL if you want to link to another website or page.

Quick Study Video for Inserting Single Images on to a Page

Add Video


Now that you have inserted some media and have typed in some text let’s add a hyperlink to some of the text

Return to Top ▲Return to Top ▲