made with love
Welcome back to WordPress
In this video, I'll show you how to insert photos and images into your posts and pages. To get started, I'll choose an existing post to edit. Now, let's insert a photo to help give this page a little more visual interest. To insert an image, first we'll place the cursor at the location within the post where we want the image to appear. Next, click the Add Media button to open the drag and drop multi file uploader. We're given a few options here. We can upload a new image from our computer or choose from other files we've already uploaded in the media library. We can also create a photo gallery, which I'll show you in just a minute. Select a featured image for this post, or even paste a URL to use an image from another site on the web, provided you have permission to do so.
For now, I'll just upload a file from my computer. On my desktop I have a JPEG image that I'd like to add to this article. So I'll simply drag the image file into the drop box and the uploader will automatically copy the image from my computer to the web server where this site is hosted. When it's done uploading, you can edit the title, add a caption which will appear directly underneath the image, and enter an alternative text description for screen readers or people who might have images disabled in their browser. Now we can choose to align this image to the left side of our page which will cause the body text or in the center, or to the right which will flow text around the left side or our image. For now, I'll choose none.
We can also make this image a link so that when folks click on it, they'll be taken to a destination of our choice. We can link to the full size version of the image file or choose to view the image on it's own separate page. Or we can actually enter a custom URL. For example, we could have this photo linked to acme.com so that when a visitor clicks on this photo, they'll be taken to that website. But for now, I'll just choose media file, which will take them to the full size version of this image on our web server. And last, we can choose which size image we'd like to use in the post. Every time you upload an image, WordPress automatically creates a thumbnail, medium, large, and full sized version of your image file. For now, I'll select the full size and then click insert into post. And now let's preview our post with the new image in place.
Note that this theme automatically resizes images to fit the width of the content area. And our caption appears just below the image. Returning to the editor, we can click on an image to reveal simple editing tools. To resize the image, just click and drag any of the handles in the corners. WordPress will automatically ensure that the image is scaled proportionately. We can also change the alignment directly from the popup toolbar that appears just above the image. And you can edit the details for an image by clicking the Edit button on the right hand side. In this panel, we can further edit the caption and alternative text, choose a different alignment, change the size, or edit the link for this image.
You can also edit the original image or replace it altogether with another image. The Image Editor provides basic editing tools that enable you to crop, rotate, or flip an image. And of course, you can undo and redo your changes. You can proportionately scale the original image by simply entering a new dimension in pixels and WordPress will automatically adjust the other value to maintain the original proportions of the image.
After you've made changes you can restore the original image at any time, removing any edits you might have made. You can also enter a specific aspect ratio if you like. And then hold down the shift key while dragging your cursor over the image to maintain this ratio. You can reposition the crop area or drag the handles to adjust the selection and then, when you're happy with your selection click the crop icon to apply this edit.
When you're done click the Save button and then Update to apply your changes. And now we can preview this post once again to see our edited image in place. And when visitors click this image, they'll be taken to the full sized version in a new tab or window in their browser. In addition to adding individual images you can also insert a photo gallery, a collection of several images within a post or a page. Now we could click the Add Media button to open the multi file uploader like we did earlier. But you can also simply drag images from your desktop and drop them directly on the editor window to begin the uploading process. With our images now uploaded, I'll click Create Gallery, and then filter the list to show just those images that have been uploaded to this post. Here you can edit the titles, captions, and other details for each image in the attachment details panel on the ride hand side. And your changes will be saved in real time. When you're finished editing the details for each of the images, click the button to create a new gallery with the selected images.
You can easily reverse the order of the images or simply drag and drop them into the order your prefer. If you like, you can also add a descriptive caption to each image. Next, under gallery settings, I'll choose to link the individual thumbnails to the full size version of each image file. You can also choose the number of columns your gallery will use to display the thumbnails. And when you're happy with the settings, click the Insert Gallery button. Now you can see what your gallery will look like in place. And you can edit the gallery settings at any time by clicking the edit button in the popup toolbar. Now before publishing, you might want to preview your post and then make any final changes you like. As you can see, Wordpress makes it really easy to add images to your posts and pages making your content even more compelling.