Tip:
Highlight text to annotate it
X
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. 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� tab. 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 may help 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.
Once you�ve found the image you are looking for in your Media Library, select the image and click the �Insert into page� button to add the image to your page. You can still edit the image even after you�ve added it to your page. Click on the image and two boxes will be displayed. The box on the right will delete the image from the page. The box on the left will bring up a screen that allows you to edit the image. The �Edit Image� tab allows you to change the size of your image and it�s alignment in relation to the rest of the content on your page. There are also input boxes for the title, alternative text and caption fields. We�ll discuss the Link URL settings in the next class.
The �Advanced Settings� tab presents you with more options for editing how your image is displayed. The Source field shows the link to the image. This field is automatically populated if you�ve uploaded your image to your page. The Size field allows you to choose how big your image will be in pixels. The CSS Class and Styles field normally auto populate and contains the CSS necessary to display your image the way you want it displayed. We�ll come back to these fields in a later class. The Image Properties allows you to select the size of your border, if any, and define how much space is between your image and your content. All of these fields require a numerical input which is meant to represent the number of pixels for the corresponding field. We�ll cover the options under the Advanced Link Settings in the next class. Don�t forget to click the �Update� button at the bottom of your screen to save your changes.
You can also choose to manage your media by using the �Media� tab on the left hand navigation menu. This option will display your Media Library and all the images currently in your library. If you highlight an image you can choose to edit, delete or view the image. You can also upload a new image by clicking the Add New button at the top or the Add New tab on the left hand side navigation menu.
Let�s recap. The process for adding media is the same whether you are adding to a post or a page. Simply click the Add Media button above the toolbar from the post or page editor to get started. You can use the Media tab on the left hand navigation menu to manage your media files and edit as needed. Be sure to fill out the text fields for your image to help with your website SEO. You can create a smaller version of your image or alter it�s orientation by using the edit screen. Remember, smaller images have shorter load times for users visiting your site. That�s it for today�s class. Thanks for watching on behalf of E3 and stay tuned for the next class in the series.