Want to learn how easily you can create a photo gallery with WordPress? If you like, you can use a plugin for your photo gallery. In the past, I was happy with NextGen Gallery. See below for more on NextGen Gallery vs. native WordPress gallery. In this post I will teach you how to set up a simple photo gallery using the Media Library that comes with WordPress. Then, to make it come alive and fancy, we will add a plugin: Responsive Lightbox. Maybe in a year I’ll decide Responsive Lightbox is not being upgraded or X plugin has better features or Y does a better job, and I’ll switch the lightbox plugin. But my photos will still be in the Media Library, easy to access and use.
Create the Photo Gallery
First, select some photos for your gallery. You should reduce the size of the images for each photo to a pixel width that is comfortable for the viewers – let’s say 600px wide. So using a photo editor tool such as Photoshop or Pixlr, re-size each image you plan to use to 600px by 400px. For the amount of photos to be used in your gallery, select a number that goes nicely into 3 or 4, assuming you want a gallery that is 3 or 4 columns wide. In my case, I am just going to use 4 images, and I will present these in two columns.
Start your page or your post within WordPress. Click on Add Media to add your images. You can add more than one by holding down the SHIFT key (for PC users) or the COMMAND key (for Macintosh users).
As you add your images, you will notice a check mark appears on the top right of each one. As you add each image, complete the Title, Caption and Alt fields. The lightbox plugin you use may get the data from any of those fields, so it’s easier to complete them as you upload. You can always go back into Media Library later and edit the titles, captions or alt fields.
When you are ready to create the gallery, make sure each image you want to use has a check mark next to it. Select Create Gallery button on the left. You are now given the option of numbers of columns. In my case, I’m just using two columns. You might use 3,4,5 or more. In the box that says Link To, select Media.
Here is my gallery:
And here is how the code looks:
The reason I have that div tag with the inline width is if I left it as just the gallery code, the images stretch to the width of the containing div. Since my containing div is wide, my thumbnails were too far apart. So I added a new containing div. If you have enough thumbnails in each row, you won’t have this issue. It’s just because I was only using two columns.
Typically, the photo gallery code will be one line in brackets (called a shortcode), something like this:
Jazz it Up with a Lightbox Plugin
If you click on the gallery above, you will notice you get to the larger version of the image, and then you will have to click the back button to get back to the post. You can’t get to the next photo in the series from the larger image.
If you want something snazzier, try a lightbox plugin. I recently used Responsive Lightbox. Add it like you would any other WordPress plugin. Once you add the lightbox plugin, you will be able to navigate from one larger photo to another. And it will look nicer. Within the Responsive Lightbox plugin, I used the Lightbox script called PrettyPhoto because I liked how it showed the captions. Experiment with the choices you are given in the plugin. Learn more about Responsive Lightbox.
Note: within the Responsive Lightbox settings, Pretty Photo shows the caption on top of the image.
NextGen Gallery vs. Native WordPress Gallery
I used NextGen Gallery plugin for a few years. But then they went through upgrades that were a bit bumpy. I also discovered it was a bit trickier to move a NextGen Gallery than if the images were in the native Media Library. NextGen Gallery also makes your WordPress database larger. So for a site with simple photo needs, sticking with the Media Library and creating a native WP gallery might be preferable.
An advantage to NextGen Gallery that the native WP gallery does not have is you can organize all your photos in galleries and in albums. There are also features like sliders and slideshows. If you have a serious amount of photos to display and organize, check into the details of NextGen Gallery.
Your Turn, Please
Have you ever used the WP native gallery? Did you know it exists? Have you used NextGen Gallery? What is your experience with WordPress and photo galleries?