Tutorial #8: Media in WordPress: Embedded Images, Image Galleries & Featured Images

Tutorial #8: Media in WordPress: Embedded Images, Image Galleries & Featured Images


In the last tutorial, I showed you how to
format text using the native editor that comes with the WordPress site. In this tutorial,
I’ll show you how to add media to a post, including embedding images, selecting a featured
image, and creating image galleries. To begin the process, I’ll return to the WordPress
dashboard and I’ll open up my posts and open up the post that we’ve been working on. I
want to first embed an image into the post so I’ll put my cursor here because this is
where I’d like the image to appear. Next I’ll click on the “Add media” button at the top
of the editor. I’ll see a series of images that I’ve already uploaded to the WordPress
site in previous tutorials. To upload a new file, click on the “Upload files”tab and then
click on the “Select files” button. I’ll be able to browse my computer for an image. The
blue checkmark on the image indicates that this is the image I’m going to embed into
the post. I can also create attachment details, which I discussed in a previous tutorial,
or I can select an alignment option. I’ll select left alignment here so the text wraps
around the right side of the image. I can also link to a media file, an attachment page,
or a custom URL through the image or have no link at all. The next option is to select
the full size or thumbnail of the image. Selecting the thumbnail tells WordPress that you’d like
to use the image in a more manageable size with the post. Let’s go ahead and click on
the “Preview changes” button so we can see what this image looks like live on the front
end of the site. Remember, the preview area is for you only and until you update the post,
your users cannot see that embedded image. If you return to the dashboard and select
the image within the post you can click on the pencil icon to edit the image, or if you’d
like to remove the image, click on the X icon. The next option we have to set a featured
image by scrolling all the way down to the bottom right corner of this page we can click
on the “Set featured image” link. This will take us to that abbreviated view of our Media
manager where we can upload a new file for our featured image. We’ll click on the “Select
files” button and select an image from our computer. Once the image is uploaded we can
different attachment details or we can click on the “Set featured image” button at the
bottom of the page to add this as our featured image. We’ll see the small thumbnail here
indicating which image we’re using, and if we scroll to the top of the page we can click
on the “Preview changes” button again and we’ll return to the front end to see our featured
image. It is important to note that featured images will appear differently depending on
the theme that you’re using. Another option that we have for incorporating media into
the post is by inserting an image gallery. I’m going to scroll to the bottom of this
post and leave my cursor where I’d like my gallery to appear. Then I’ll click on the
“Add media” button at the top of the editor and click on the “Create gallery” option within
the media library. Just as we did before I’ll click on the “Upload files” tab and click
on the “Select files” button so I can browse my computer for the images I’d like to include
in this gallery. I’m going to upload several images at once. As each of these images is
loaded into the media library, notice the blue check mark that indicates that I’m using
these selected images for my gallery. I can deselect any image at any point to exclude
it from the gallery. Please also notice the thumbnails that appear at the bottom of the
media library. These are each of the images that will appear in my gallery and you can
image that if I had thousands of images within my WordPress site, that the thumbnails come
in handy. I’ve got two images here that are very similar so I’ll deselect one to exclude
it from my gallery. I can also add attachment details for each of the images that I’ve uploaded
or click on the “Create a new gallery” button. I’ll be directed to the Edit Gallery page
where I have several Gallery settings off to the right side. I can have each image link
to an attachment page or have no link at all, and I can also determine how many columns
I’d like to appear within the gallery. I also have the ability to have the images appear
in a random order, which means that each time the post is refreshed, the gallery will look
a little bit different. Before we insert this gallery into our post, notice that we have
the option here to create a caption for each of the images. I’ll show you how these captions
look once we update the post with the gallery, but you can hover your mouse over each of
the images to see the caption, and this is especially useful if you’re going to link
these files to attachment pages in your site. Once we’ve added a caption for each of these
images, we’ll click on the “Insert gallery” button at the bottom of the Media library.
Once we do, we’ll be directed back to our post and we can see the gallery that we just
added. If we hover our mouse over the images we can also see the caption that we’ve added
for each image. Please remember that none of this media will be available for our front
end users until we update the post. Once we click on the “Update” button, we’ll return
to the front end of our WordPress site and we’ll refresh the page to see all the media
that we’ve added. The first thing we’ll notice is the featured image we’ve selected for this
post and we’ll notice the embedded image within the text of the post and the gallery that
we’ve added at the bottom of the text. We can hover our mouse over each image to see
our captions. The next tutorial in this series will show you how to create Pages within your
WordPress site.

Author:

Leave a Reply

Your email address will not be published. Required fields are marked *