Join Morten Rand-Hendriksen for an in-depth discussion in this video Creating image galleries, part of WordPress 4 Essential Training.
- Using the techniques I've shown you in the two previous movies, you can add as few or as many images you want to all of your posts and pages. And each of those images will appear individually like you've seen here. So you can add images to the top or to the bottom or to the middle or anywhere else, and each of those images will appear as its own individual unit within the context of the post or page. However, in some cases, you have a series of images and you want them to appear in a gallery format. So when the user sees them they can see all the images in small thumbnails and then they can click on individual images to make them pop up, and see the full version of the image.
And WordPress allows you to do this. You just have to know how. In the images for my company, I have a set of images that I want to display in a gallery. I have images for all of these new products that I want to showcase in this post, but it wouldn't make any sense to add the full images of each one of these products, because it would take up a lot of space. So instead I want to add an image gallery, and then allow the visitor to click on whatever image they want to see. To do this I'm going to go back to edit my post. And again I need to place my cursor where I want my image gallery to appear.
So that would be right here above "Based on the H+ Sport slogan." Then I click on Add Media as I did before. But this time, instead of going to Insert Media which is the default, I'm going to go to Create Gallery. When you go to Create Gallery, the only thing that changes is there, you see it says "Create Gallery" at the top here instead of "Insert Media." I'm still at the Media Library so I'm going to go to Upload Files, and I'll find the folder I have the images I want to upload, and I'll highlight all of them and just drag and drop them in. Now all of those images are uploaded, and as you see on the bottom here, we get a list of all the selected images.
So right now we have 9 images selected. Because I've uploaded a bunch of images, I now need to add all the Attachment Details for each of these images, so this is going to take a little bit of time. And in this case I'm going to use the same text for my Title, Caption, and Alternate Text. But in most cases you would have different text depending on what you're doing. Once I've added in the Attachment Details for all of the images, I have to make sure that the images I've selected for my gallery are in fact correct.
And you can see that all the images are selected with this check-box in the top right hand corner. If one of the images were added by mistake, I can hover over the check-box and click it and it'll be removed from my list. Then I can hover over the image again, and click it to add it back in. Once I'm happy with my selection, I click Create new gallery in the bottom right hand corner. This takes me to the Gallery Editor, where I get to edit the gallery further. Now here I can do a couple of different things. I can change the order of my images if I want to. So I can grab any image and reorder it to a new position.
So in this case I'm going to order them based on how they are listed in the article. So it starts with Magnesium, and Vitamin A. Then B Complex. Then Vitamin C. Then Vitamin D, and Calcium. Iron, Magnesium, and finally Flaxseed Oil. Now if I wanted to do a quick reordering I could also just click Reverse order which will just reverse order all the images.
And if I see any images in here I don't want in my gallery, I can just click on the X up here which will take the image out, or I can click Add to Gallery to add more images in. Once I'm happy with my selection of images, I have all the captions I want and I've edited them down to what I want them to be, I go to Gallery Settings on the right hand side. Here I get to choose where the thumbnails in the gallery link to. And the default is set to Attachment Page, but in most cases you want it to link to the Media File so that we can use a Lightbox plugin to make the images appear.
Then you choose how many columns you want the gallery to have. The default here is 3, and depending on the theme you're using, you may not actually have an option here. So I'm just going to leave it at 3. You can choose, if you want to, to display the images in random order. It does make sense sometimes, but in most cases you probably want to control the order of the gallery. And finally you get to choose what size of image to display within the gallery. So the default here is Thumbnail, and in most cases that is what makes sense. Once you're done with your gallery, click Insert Gallery. And you can see the gallery preview here in the Editor.
But because the theme may change the appearance of the gallery, it's always a good idea to update the post and go and view it, or go and preview the post to see what the gallery actually looks like. And here you see the gallery as displayed in the 2015 theme. We have the images with the caption directly underneath, and if you click on an image, you're immediately taken to the original version of that image file. Now like I said in the previous movie, when we go further into the course and look at plugins, I'll show you how you can change the behavior of these galleries to look a little more interesting and also give the user a better experience.
But for now, just know you can create galleries just like you add in images. And once the gallery is added, you can go in to your Editor, click on the gallery, click Edit, and then re-edit the gallery to function with anything you want. And finally, remember that any image you add in to your WordPress site can be added in to any gallery. You don't have to keep adding images in again and again to add them in to new galleries, and you can also build multiple galleries within one single post or page if you want to, using the exact same function.
Note: This course covers an older version of WordPress, which features the Classic Editor. Watch this course only if you are using the Classic Editor plugin or using WordPress 4.9 or earlier. Otherwise, watch WordPress 5 Essential Training, which covers the new Block Editor experience.
- Creating posts and pages
- Formatting text
- Publishing and scheduling posts
- Adding images, audio, and video
- Bulk editing posts and pages
- Customizing themes and menus
- Using widgets
- Extending WordPress with plugins
- Editing users profiles
- Configuring settings
- Getting new readers
- Keeping WordPress up to date and secure