Adding images to posts and pages

- [Voiceover] In front of me here, I have a new post that I've created and published talking about a new line of products for my fictitious company. Now I want to add some images to this post, because as you can see when I switch to the front end of the site, even though the information is interesting, it is not particularly appealing visually speaking, and I am talking about new products so it would make sense to add photos of the actual product into the post. On my computer I already have a folder full of images I can use that have been edited and formatted to be displayed on the web, and now it's time to add some of these images into my post in different ways.

That's what we'll be doing in the rest of this chapter. Adding images into posts and pages is done directly from the content editor, so I'll switch back here. Now, here you have several options. If you want to, you can place your cursor anywhere in your editor, and then just open your folder, drag and drop whatever images you want to appear into the editor and this will automatically open the add media dialog. The problem with that is, when you do it that way it's very easy to forget to place your cursor where you want it, and then the images will appear randomly within your content, so what I like to do is first go into my editor and find where I want the image to appear.

In this case, I want to add an image either above or next to this almost last line in my article that says, the new line of supplements join our roster of popular sports products, so I'm gonna place my cursor in front of it, hit Return one time to create a line where my image is gonna go temporarily, then click on the Add Media button at the top here, and this opens my insert media panel. Now, by default WordPress will always open this panel in the media library mode that shows off all the media items that you have previously uploaded into WordPress.

In our case we haven't added anything yet, but as you start building out your site, you'll have tons of materials in here, and the whole idea is if you upload an image once, you can then use it again and again on different pages, and that's why you have the media library. I'm gonna upload a new file, so I'll click Upload Files, and from here, I can either click the Select Files button to open a file explorer on my computer, or I can simply navigate to the folder that has the images I want, grab the image I want, and just drag and drop it into the insert media dialog.

Once the image is uploaded into my site, I switch back to the media library where I can see the image or images I just uploaded get highlighted, and then on the right here, I get all the information about my attachment. At the top, you see a preview of the entire image followed by the file name. Then we have the date it was uploaded, and the size both in terms of file size and physical size. There is an edit image button, but I would avoid using it because it doesn't work all that well. If you want to edit your images, you should do it before you upload it to WordPress, and you can also delete the image permanently.

Just wipe it out completely, it will no longer be in WordPress. What comes below here is the information that gets added to the attachment page of the image, so this is how WordPress indexes your image. We start out with a title where we can describe the image for WordPress so we can find it again later. All H+ Sport Products. Then we have an optional caption. This is the caption that would appear underneath the image in the editor and on the front end of your site.

Then we have the alternative text. Now, the alternative text is interesting, because it varies depending on what function the image plays. The simple rule is this. If the image contains text or some other data that's important, the alt text should be that text. If the image has some informational relation to the content in the article, say a photo of a person, the alt text should describe the image, and in this case, that's what applies. If the image is a link to another page, the alt text should describe the link target, and if the image has no functional value and is purely decoration, the alt text field should be left empty.

In my case, I'm gonna use the alt text to describe what's in the image so that someone who uses a text-to-speech browser and also so that Google understands what's in the image. I'll say H+ sport products including vitamin waters, protein bars, and supplements. The last field, description, is the text field that's attached to your attachment page. If you want to link to the attachment page, and your theme supports attachment pages, you can add HTML into this description field, and then people will be able to read more information about this product.

In most cases, this is not a field you'll be using, but there are some fringe cases where you'd want to use the attachment page, and in that case the description field is what you want to fill out. Once you've filled out all the metadata for the image, it's time to decide how we want to display the image in the context of our post. All of this is done under attachment display settings. To start off, we decide how we want to align the image. Here you use the drop-down to say either left, center, right, or none, so in my case I'm gonna set it to center. Then we choose where we want to link the image to.

We can either link the image to the media file, so that would be the original sized image. That's what you want to do if you want to make the image pop up in a light box or something else in your browser. You can link to the attachment page which will take you to the attachment page. You can link to a custom URL which allows you to use an image to link to either another post on your site, or anywhere else on the web, or you can choose none which removes the link altogether. I'm gonna choose media file, and then you can see the link appear down here. Finally, I have to choose what size of image I want to display, so depending on the size of image you uploaded, you'll have different options here.

In my case, the image I uploaded was 1,000 pixels wide, which is smaller than the large size, so therefore I don't have a large size, but I still have the square thumbnail, and also a medium size. I'll choose the medium size, click Insert Into Post, and now you'll see the image along with the caption appear in my post. Once the image is added, I can edit how it appears in the context of my post by clicking on it. If I click on the image, I get this popup that gives me some tools I can use. Here I can quickly change the alignment of the image to left, center, right, or none, which takes away the alignment and just displays it alongside the rest of the content.

I'm gonna set this to right. Then if I want to remove the image, I can simply click Remove, or if I want to edit the image further, I can click the Edit pen here. This will take me to a different type of modal window that allows me to edit the image details. From here I can edit the caption and the alternate text. I can change the display settings, so the alignment, the size, and also the link to property, and down here under advanced options, I can set up a title attribute for the image. That would be what pops up if you hover your mouse over the image.

This is not very commonly used, but it's available. You can set up an image CSS class if you want to do some advanced development. You can choose if your link opens in a new window or tab if you want to. That's especially useful if you're using an image to link to another site somewhere else on the web, and you can also set a link relation and a link CSS class if you want to. Finally you have these two options here, edit original which like I said you shouldn't use, because the editor is not very good, and replace. Now, replace is actually interesting, because it allows you to go into the library, or to upload a new file, and swap one image out for another and it'll be placed in the same place in your editor.

That can be useful if you accidentally add the wrong image, but for now, I'm simply gonna leave everything as it is, click Update. See that the image displays where I want it to, then update my post, and go and view the post on the front end to make sure everything is working properly. Now I'll scroll down, here's my image with my caption, and if I click on the image, I'm taken to a larger version of the image. Now, this user experience is not great right now, so we're gonna fix that later on in the plugins chapter. For now I'm just gonna leave it the way it is.