Hi everyone, and welcome back to the Web Design with WordPress 101 course. Today we’ll go over how to add photos and images to your WordPress site. We will cover how to add images to a page/post, resize images in WordPress, use the Media Library, introduce some basic image SEO techniques, and more.
The process for adding an image is the same whether you are adding the image to a post or page, so for today’s class I’ll only be using the page editor. Once the page editor has loaded you should notice the “Add Media” button near the top of the editor. Clicking that button will bring you to the “Insert Media” area where you can choose images you have previously uploaded to your site or upload new images to display on your page. I currently have a few image files uploaded to my site, so they are displayed in the “Media Library” tab. If I had multiple types of files in my Media Library I could sort the files by file type using the drop down box near the top of the screen. You can also search for images by name using the “Search” box next to the drop down box.
If you haven’t added images to your media library you can add them with the “Upload Files” tabs. From here you can add new files in one of two ways: You can drop and drag new files to your screen like you would when you move files on your computer. Or you can also choose to select your images from a browser window by clicking the “Select Files” button. Click the button and navigate to where the image is stored on your computer and click “Open” to upload the image.
Once the image has uploaded you should be able to select it from your Media Library and insert it into your page with the button below. The “Attachment Details” on the side give you some options that affect how your image will be displayed on the page. The top of this panel gives you the name of the file, the date it was uploaded, and the size of the image.
Below this, you have the option to fill in the title, caption, alternative text and description fields. The text you enter in the title field will display whenever a user hovers over your image. The caption text will appear right below the image you’ve inserted to your page. The Alt Text allows you to create a message that will be displayed when the picture can’t display on a visitor’s browser. The description field will not be displayed with your image, but provides you with some information about the image. It’s a good idea to fill in these fields with the appropriate information as it helps contribute to the overall SEO of your website. If you recall from earlier classes, SEO refers to Search Engine Optimization. Creating descriptive text for these fields helps search engines identity content relevant to their search parameters.
The “Attachment Display Settings” allows you to alter how the image will display on your page. The alignment determines how the picture will interact with the text included on the page, if any. The “Link To” drop down box gives you some options to link the image. We’ll talk more about linking in our next class and how you can use images to create links to other parts of your site or even external website.
There will probably be times when you’ll need to resize an image or crop an image to just include the content you want to display. Large images usually take time for a user to download, so keeping your images smaller reduces the time it takes for a user to load your website. You can do this by clicking on the “Edit Image” link. This will take you to an editor that allows you to modify your image in several ways.
If you’d only like to use a portion of the image you are currently viewing you can choose to crop the image to capture a designated area. Click the image and drag your cursor to create a crop box for your image. You’ll notice that the “Image Crop” box on the right hand side will show you the actual size of your cropped image in the Selection field. You can also choose to take advantage of the aspect ratio if you want your crop to have a specific aspect. For example, a 1 to 1 aspect would help you create a perfect square crop. To crop using the aspect ratio you have to hold down the Shift key while dragging your box and cropping your image. Once you selected the area you want your new image to contain, click the crop button above the image. One side note, if you are trying to crop a smaller area you’ll have to make sure the area that you wish to crop is at least as big as one of the dimensions of the Thumbnail size in your Media Settings.
The next two buttons allow you to rotate the image in a specific direction. You can also flip the image both horizontally and vertically. The arrows towards the end allow you to undo a change or redo a change after it’s been undone. The editor also has input boxes for the title, caption, alternative text and description of your image. Be sure to click the “Save” button to keep any changes you have made to the image. Also make sure to click the “Update” button if you’ve changed any of the other fields on the page.
The rest of the class covers how to edit an image that’s been placed on a page and manage image properties, which includes borders, padding, alignment, and more.