Working With WordPress Images

By now, you have hopefully had an opportunity to become familiar with the basics of working with pages and posts. Now we’re going to move on to adding a little sizzle to your content with some WordPress images. As with the other posts in this series, we’re just covering the basics, and there are some items that we won’t talk about. There are quite a few different ways to work with media in WordPress. In this post, we’ll introduce the Media Library as well as the “Add an Image” tool in the editors.

The Media Library

Wordpress Images: A look at the Media LibraryIn the main navigation menu you will find the Media menu item. Expanding the menu item will reveal the options Library and Add New. Let’s start by taking a look at the library itself. Go ahead… click it.

Add New Media

Wordpress Images: A look at the upload new media viewBefore we get into working with WordPress images, let’s first take a look at getting images into WordPress in the first place. Click Add New in the Media menu and you’ll be transported to the Upload New Media view. Here it’s pretty simple. Click the Select File button and you’ll be able to navigate to the files of your choice. You can upload files other than images. For the sake of simplicity, we’ll stick with images. You can also select multiple files at once, and the uploader will begin the sequence of uploading the images one at a  time. Once the image is complete it will show an Edit Image view. If you’ve uploaded multiple images you will see a Show link to the right. Clicking it will expand into an Edit view, which you can collapse by clicking the now viewable Hide link. If you’re bored at this point, feel free to alternate clicking the Show and Hide link several times.

Edit Media

Wordpress Images: A look at the Edit Image windowWithin the realm of Edit Media resides the current information on the image,  and you can change a few things on the image here; such as the title, alternate text, the caption, description and location of the file or the file URL. You will also see a button under the thumbnail that reads “Edit Image”. At this point the thought, “Aren’t we already editing the image?”, may be scurrying through your mind. If is, you are right, but there is more. If you venture to click the Edit Image button you’ll see what I mean. The thumbnail is automagically(you bet it’s a word!) replaced with a mini image editor where you can crop, rotate and even flip the image. You are also empowered with the ability to apply the changes to all image sizes, just  the thumbnail, or all sizes but the thumbnail. Cropping can be a bit tricky and the (help) link can be helpful. For the most part make sure that you click and drag to highlight the area that you want to crop first.

The Library List

Wordpress Images: A populated Media LibraryThis should resonate a little Déjà vu. The list itself is very similar to the list for pages and posts. Mousing over a list item will present the following options as well: Edit, Delete Permanently and View.  From the list you can venture off further into the image. View will take you to an image view from your website and Delete Permanently will… well, you know, delete the image. Clicking the thumbnail, the file name, or the Edit link will take you to the basic Edit Media Screen. Don’t forget to click save when you’re done.

Adding an Image

We have some of the basics of how to get images into WordPress, now let’s see how you use them. Go ahead and start a new post. Above the editor you’ll  notice “Upload/Insert” with four icons to the right of it. The first icon is the Add an Image icon. Click the Add an Image icon.

There are four main sections in the Add an Image window, however at this point only three will be available. From Computer should be the section that is highlighted by default and basically is a repeat of the Add New Media. Also, any images that are uploaded here are added to the Gallery and the Media Library.

The second section is From URL. This will allow you to grab a URL for an image on the web and plug it into your post. Be careful of copyright infringement on this one. Just because an image is on someone else’s website doesn’t mean you have the right to put it on yours. Also, be careful about the stability of the URL. If the source for that image changes, then you suddenly lose that pretty picture you just placed on your post.

The third section is the Gallery, and you will only see this section if you have uploaded an image to this post or inserted an image from the Media Library to this post. In essence, it shows a list of images that have been attached to this post.

The final section is the Media Library and shows a list of images that are in the Media library. Since you’ve mastered the Media Library or at least read up on it a bit, you will be able to manage this section without a problem.

So how do I get the picture in the post?

Wordpress Images: Getting ready to upload an image

From any of the lists that are available in the above mentioned sections you can click on the Show link next to the image you wish to place in the post. This will take you to the Edit Image view with a few extra options at the bottom of the image info area.

The Link URL is an important item to note. This determines if anything happens when your visitors clicks on the image. You can click None which clears the Link URL and essentially means nothing will happen when the image is clicked upon. The File URL will take the user to the image file itself and the Post Url will take the user to the image view section, basically placing the image in a post like setting. It’s not a bad idea to experiment with these so that you have a good idea what each link option will do for you. You can also place your own URL as well taking the user to any website you so desire.

Wordpress Images: A closer look at the upload image buttonNotice the Alignment and Size options as well. Alignment will assign an alignment property for the image and effects how where the image is placed on the page and how the adjacent text flows with the image. The Size option will determine how large of a file to stick into the post (These default sizes can be adjusted under Settings > Media in the main navigation menu).

Featured Images are a neat and fairly recent addition to WordPress. If your theme supports a featured image it will place the set image in a predetermined location and size. This can make life a little easier and your website a little more uniform. If your theme doesn’t include a home for a featured image than you don’t need to worry about it.

The Delete link is a seemingly obvious option here, but alas, expect the unexpected. Clicking the Delete link will show a text confirmation that appears below the Delete link rather than a pop-up asking with the big OK / Cancel options. No worries though, for you are now prepared to handle this elusive change. And no, I didn’t beat my head for 3 minutes trying to figure out why my image wasn’t deleting… it was 2 minutes. Consider yourself 2 minutes richer. You’re welcome.

Finally, we get to the Insert Into Post button lingering at the bottom. Your options are set and your link is entered. Click the Insert Into Post button and see the fruits of your labor. Good job, take a 5 minute break and enjoy your victory.

Pages on the other hand can get tricky with images… oh wait, it handles the same. You should be good to go there as well.

Moving on from Wordpress Images

Congratulations ! You’re done! You now know all there is to know on the basics of using WordPress. Of course, there’s always more to learn, but you now know enough to get a site rolling. Go on now, have at it!

Tags: , , , , , , , , , , , , , ,

No comments yet.

Leave a Reply