Here is a simple and elegant way to add an image gallery, just like the one we are seeing in the video, to your WordPress website, and also add a ‘lightbox’ effect. Lighbox effect is when the images can be loaded into and overlaid window, and the user can take a closer look at your pictures.
Before we start, a few words about preparing the images for your galleries. A lot of the images that you will have might have been taken with a camera, and those images are typically pretty big, they may be as big as 3000*4000 pixels. Now a typical website is no more than 1000 pixels wide, and you do not want the pictures to be any bigger than that because it slows down your website. On the other hand, we want to keep the images big enough, because we’re going to have the lightbox effect and we want our visitors to be able to take a close look at what you want to show them. I always try to make all the images the same height, so that the lightbox does not have to resize too much between images, and I target somewhere between 500 and 600 pixels, so that it looks good on the screen and still doesn’t slow down your site.
Let’s get started with building the gallery. I’ve created a page where I’m going to edit gallery, but you can also edit a gallery to a post. The first step is to add images to your site, and for that I’m going to click the “add media” button. Since I want to upload files from the disk, I’m going to click the “upload files” button here, and then you can either find the files using a browser, or drag-and-drop the files from a windows explorer screen. I’m going to use the browser, and let me select a few of the images that I prepared previously, and here I am loading 4 images, that’s going to take a few seconds. Now that our images are there, I’m also seeing images that were previously loaded to the site, but that’s okay. You can see all the images that I’ve just loaded are checked here. And in order to create the gallery, I have to select the “create gallery” button on the left. In the create gallery screen, we have to click the “create a new gallery” button. Now that we have created our gallery, we can see the images that were added, and we can also edit the parameters of this gallery. The most important parameter is the caption for every image, and this is what eventually shows on the gallery under each image. So let me add a few captions here.
When I’m happy with what I have, I can click on the “insert gallery” button, and this adds the gallery to my page. WordPress creates an icon that demonstrates that fact that there is a gallery here. Let me click the update button, and let’s take a look of what happens. So we’re going to look at our new page, and as you can see, we have the images here, there’s 3 columns, this image does not have a caption because I forgot to edit. Let’s edit our gallery a little bit. So when you click on this icon, and if you click on the “edit gallery’ symbol here, we are presented with an interface that allows us to edit the gallery. We can add more images to the gallery, we can use pictures that were loaded earlier, or we can upload more images, so let me add 2 more images here. And once the images are loaded, I just have to click the “add to gallery”, and if I want to add captions, I can add the captions here. And so on. I can also change the order of the images by dragging and dropping them. I can play with how many columns the gallery has, so let me change it to 4, just to demonstrate, and once I’m happy with the results, I can click “update gallery”, I have to update the page, and let’s reload the page to see what happened. So here we have 4 columns now, and the new images were added.
The last step in our process is to add the lightbox effect. If we do not add the lightbox effect, what happens is that every time we click on an image in the gallery, it simply opens another page and shows the single image on it, and it doesn’t look very professional. So in order to create the lightbox effect, we are going to install a plugin that I have discovered a few months ago, and it is called “responsive lightbox”. So, what this plugin does is, actually, it automatically adds the lightbox effect to every gallery on the site, and this lightbox is also mobile responsive, which is a nice add-on to that functionality. This means that if somebody looks at your website on a mobile, the images are going to be resized to fit the size of their mobile phone, or if it’s a tablet, it’s going to be just the right side. So let’s see what happened, I’m going to reload my page, and now that I’m clicking on an image, I have the lightbox effect, as we said. So yes, the width of the images are not all the same, but at least the height remains the same, so the lightbox doesn’t resize that much.
If you want to change the way the lightbox looks like, you can go into your WordPress dashboard under “settings” and “responsive lightbox”. And here you have different parameters you can play with and change the lightbox appearance, just play with it, see how it impacts the way the lightbox looks like, and find what suits your website best. I hope you enjoyed this video, and I will see you in the next one.