How to upload and display images using WordPress 3.5 +

By February 13, 2013Blog, Tips, Wordpress

WordPress is one of the premiere software suites used by bloggers all over the world. It offers simple and extremely flexible tools for editing and publishing content to a blog as quickly as it can be created. Many bloggers are proud to have their articles posted via the WordPress platform, and word of mouth has generated a lot of popularity. Because of this, many new users are sitting down with WordPress for the first time each day. New users may be riddled with questions while getting used to the software, and thanks to the power of the internet help is just a few keystrokes away.

Images are an integral part of the blogging experience. Photos can enhance any story and spice up an article by providing visual aid on the subject at hand. Learning how to upload and display images on your WordPress blog will go a long way in helping you create attractive posts that don’t overwhelm users with huge walls of nonstop text.

Before we begin it may be in your best interest to look into Image Optimization, compressing images to have a smaller file size while still retaining most of the image quality. There are many formats, JPG, PNG and GIF being the three most popular formats for the Web. Each one has their benefits. JPG/JPEG is used for still images not requiring transparency and images containing a lot of subtle detail, while still offering a decent file size to quality ratio. GIF is used mostly for simpler images or animations, but is often of lower quality than JPG for stills. PNG concentrates on pristine quality at the expense of also being the largest file format. It is also capable of full transparency effects.

There are many programs that handle image compression, too many to list and cover here as that is beyond the scope of this tutorial. We suggest using Picasa, as it is a powerful image manager in its own right but will let you just compress your images to be a more reasonable size with little effort. And did we mention it’s free? Once your images have been compressed, should you choose to do so, continue to your WordPress powered blog.

1.) Uploading images from your computer

wordpress-images (1)Log in to your WordPress account and either begin a new blog post or page from your dashboard by selecting “Posts – Add New” or “Page – Add New”, or reopen an existing post and send it to edit mode. Navigate to wherever you would like to place your image in your post/page and click to place your cursor in that spot. From there, select “Add Media” on the top left corner of the WordPress editor.

wordpress-images (9)From here, a new window should display allowing you to drag and drop your photo files directly onto it or if you’d prefer you may use the Select Files button which brings up the normal file selection box for your operating system. If you’re using an older browser that does not support HTML5 you may not have the option to drag and drop the files, so if you wish to use this please be sure to run one of the latest versions of Google Chrome, Mozilla Firefox or Opera. The uploading may take some time depending on the size of your images and current internet connection.

2.) Selecting your Image Properties

wordpress-images (8)After the uploading completes you’ll be able to give each image specific properties:

Title – A name for the image, an easier way for you to identify the image on the edit page. This will only be seen by you. If you wish to add tooltip/hovertext you can do so after inserting the image in the post and editing it by clicking on the image and then the edit button in the image.

Caption – Text displayed under the image. This will show up on your post.

Alt Text – Text displayed when the image is unable to load, this is also what search engines will see and display when they index your page.

Description – You can insert any information about the image here that you wish to keep with you while you are working on your post. This will only be visible on the image’s attachment page.

Alignment – Selecting how you wish to have your image displayed in your article. The image can be set to display on the left, right and center of the post.

Link To – If you want to let the reader view your picture in its full size you may choose the option you prefer here. None removes the link to any larger version, Media File will link to the full size image file directly while Attachment Page sends the reader to the attachment page so they may see the full description you may have entered above.

Size – Set the exact resolution you wish for the image to be in your article here. This will not affect the full size of the image, only the size of the image visible in your post.

Once you have adjusted the settings for your images to your heart’s content, you’re set! Just click Insert into Post and your images will be placed exactly where the cursor was when we started!

3.) Inserting images hosted on external sources

WordPress lets you display images in your articles that are hosted on other websites. In order to do so load into your new post/page or the page you choose to edit, then place your cursor and click where you wish the image to go. Click on “Add Media”, however instead of using the default box which lets you upload from your computer, move down the left hand side of the “Add Media” pane and select “From URL”.

wordpress-images (7)

On this page, simply paste the URL of the source image you wish to display on your post into the URL section. A preview of the image will be pulled up as WordPress recognizes the image to make sure this is the right image you wish to insert. You may give the image a caption and alt text as well as choosing its orientation from here. Once you’ve completed any settings you wish to change, click “Insert Embed” and you’re done! A word of warning with this method: This does not upload the image to your WordPress, it only uses the image from the source URL to pull the data. If the source image is deleted where it was originally linked from, it will disappear from your post as well! Some sites also disallow external linking and may replace the image you wanted with a warning image or something unfavorable to discourage using someone else’s bandwidth.

4.) Inserting Media you’ve already uploaded

When you’ve uploaded something to your WordPress blog it gets deposited into a library that you may pull from at any time to reuse the same image without needing to reupload. In order to access this list of images, click on where you wish to place the image within your post and click “Add Media” as above. This time, navigate to “Media Library” on the media pane.

wordpress-images (6)

This window will pull any images you have uploaded and display them in an album. Scroll through and choose the image you wish to reuse. A pane will display on the right hand side with all of the information about the image. You may opt to change the settings to better fit your new post, as it will display whatever information was last used for the image including its alignment to the text. Finish editing your settings and click “Insert into Post”!

If you wish to add an image to your library for later use without needing to be in a post, from your dashboard simply select “Media – Add New”.

5.) Editing your Images through WordPress

wordpress-images (5)WordPress makes it easy and convenient to publish text and insert media into posts, but it also hosts a simple image editor to enable more power over how your image is displayed on your posts. To edit an image, log in to your dashboard and select Media – Library then find the image you wish to edit and click Edit in the image’s info pane. From here you can control the usual aspects of information editing as mentioned above, however you now have the ability to select “Edit Image” as a button under the displayed image.

A few icons are displayed above your image, each one hosting a separate tool to change your image. Any edits you make via this tool are reversible, so don’t worry about losing the original and unedited image if you made a mistake. The Icons are as follows:

wordpress-images (11)

Crop – This tool lets you select how much and what parts of your image are visible.

Rotate Counter-Clockwise – Rotates the image Counter-Clockwise

Rotate Clockwise – Rotates the image Clockwise

Flip Vertically – Flips the image based on the vertical axis

Flip Horizontally – Flips the image based on the horizontal axis.

Undo & Redo – Lets you go back through edits or restore edits you undid. This can be done as many times as needed.

Scale Image – This lets you scale the image based off of its original proportions. Making an image larger than its original size will degrade the quality, so don’t do that unless you absolutely have to.

Image Crop – Gives you access to more specific adjustments related to your crop, including setting the aspect ratio of the image and cropping based on specific pixel counts.

You can choose to restore the original image if it had been previously edited here, save your changes or cancel your current changes and return to your library.

6.) Inserting a Gallery

wordpress-images (3)A gallery will throw more than just a hint of spice into your posts, and WordPress contains the ability to create them with ease! Open your post or page you wish to insert the gallery into, save it at least once then select “Add Media” in the editor. Choose “Create Gallery” from the media pane.

For your gallery you can upload new images or select previously uploaded images from your library. Upload any new pictures first so that they are added into your library, then proceed to select the images you want from your media library. To select multiple images, hold CTRL while you click each image. Then select “Create Gallery” at the bottom.

wordpress-images (2)The next screen will enable you to edit image information like normal, as well as enter specific captions for the gallery. You can drag and drop images in any order you like, or tell the gallery to randomize the order if the pictures don’t need to be displayed in a specific sequence. You may then edit the gallery itself by entering how many columns your gallery should be and how you would like the gallery to be displayed. If you wish, you can have a traditional grid based gallery or a fancy slideshow! When you’ve edited your gallery to the specifications you want, click on “Insert Gallery”, and you’re done.

Lyle Dillie

Author Lyle Dillie

More posts by Lyle Dillie

Leave a Reply