Dynamic Photo Galleries with Responsive Lightbox & Gallery

Last updated April 22nd, 2020 at 10:59 am

Suppose your WordPress Web site has a photo gallery. Whether you’re using the built-in WordPress Gallery feature or some basic gallery plugin, the process is pretty much the same:

1. You upload images to your site.
2. You create the gallery.
3. You add the gallery to a page or post.

Now suppose you want to add new images to the gallery.

You upload the new images to the media library and edit the gallery to include the new images.

But what if you could dynamically include the new images in the gallery simply by uploading them to the media library?

Well, you can, with the current version of Responsive Lightbox & Gallery.

Background

Responsive Lightbox & Gallery by dFactory is a WordPress plugin I’ve used and been a big fan of for a long time — back to when it was simply called Responsive Lightbox.

As you may know, lightbox plugins allow users to view larger versions of images and galleries in modal windows, called “lightboxes”.

When it was first released in the summer of 2013, Responsive Lightbox & Gallery offered two customizable lightbox scripts (SwipeBox and prettyPhoto). Since then, the plugin developers have continually added more enhancements. Version 2.0, released a year ago, incorporated its own Gallery Builder and three gallery templates. Today, at version 2.1, the free version of the plugin offers 8 customizable lightbox scripts, 9 gallery hover effects and such features as:

• Enter a custom selector for lightbox
• Create galleries from Media Library or Post attached images
• Drag n drop reordering of images
• Gallery picker to insert shortcodes
• Advanced pagination, incl. AJAX and infinite scroll
• Automatically add lightbox to WordPress image galleries
• Automatically add lightbox to WordPress image links
• Automatically add lightbox to WordPress video links (YouTube, Vimeo)
• Automatically add lightbox to widgets content
• Automatically add lightbox to WordPress comments content
• WooCommerce product gallery support
• Visual Composer compatibility
• Gallery widget
• Single image widget
• Option to display single post images as a gallery
• Option to modify native WP gallery links image size
• Option to set gallery images title from image title, caption, alt or description
• Option to force lightbox for custom WP gallery replacements like Jetpack tiled galleries
• Option to trigger lightbox on custom jquery events
• Option to conditionally load scripts and styles only on pages that have images or galleries in post content
• Multisite support

But possibly the best feature of all was added this year in version 2.1 of the plugin: Media Library Folders.

Why are Media Library Folders such a big deal?

Two words:

Dynamic Galleries

Yes, as the name implies, the Media Library Folders feature of the Responsive Lightbox & Gallery plugin gives you a way to organize your media. But it does way more than that.

(By the way, this Media Library Folders feature does not actually create new folders on the server. Instead, it creates a new custom taxonomy for media and generates a graphical user interface that simulates folders. You’ll see what I mean if you keep reading.)

First, I’ll take you through the How-To.

Enable media folders

When you enable media folders from the Folders tab of the Lightbox panel…

…the Media Library panel changes. Folder navigation appears on the left side, with two folders:

All Files
Root Folder

Notice in the example there are 33 files in both folders.

Create new media folders under the “Root Folder”

Now suppose we want to create two new media folders: one for photos of home interiors and one for photos of home exteriors.

Click on the Root Folders row and a toolbox is activated above.

Click on the “plus” sign in the tool box, and you’ll create a new folder. Rename it “interiors”.

Click on the Root Folder again, then click on the “plus” sign again, and you’ll create another new folder. Rename it “Exteriors”.

If you were to click on Root Folders again, you would see all the images in the Media Library.

Let’s Make a Folder-Based Gallery

Now let’s suppose I want to make a dynamic gallery of images of my woodworking projects, namely, projects using pallet wood.

First the folder

First I create a new media folder; I’ll call it “Pallet Wood Projects”, but I could have called it anything at all. The name of the folder does not have to match the name you give to the gallery that’s based on that folder.

Now I’ll enter “bulk select” mode…

…and select the four images I want to add to the gallery (only three are checked in this screen capture).

I drag the selected images over to the “Pallet Wood Projects” folder and end up with the ones I want.

Now the actual gallery

Now I add a new gallery. I click Gallery -> Add New from the main dashboard menu.

In the images tab, notice that there are 3 options for establishing the content of the gallery:

1. Media Library (the standard way to add images)
2. Featured Content (for another blog post)
3. Media Folders (how I’m adding images for this article)

I select “Media Folders” as the source of the content and then select “Pallet Wood Projects” from the Media Folder dropdown.

When I click the “Update Preview” button, the images from the “Pallet Wood Projects” folder appear in the gallery preview window.

I save the gallery.

Create a post and add the gallery to it

Now I add a new post: “Some Recent Pallet Wood Projects”.

I click on the “Add Gallery” button, which takes me to the listing of galleries. I choose “Pallet Projects”. WordPress inserts the shortcode for the Pallet Projects gallery into my post.

I save the post and view it.

Here’s The Really Neat Part

If I drag an existing Media Library image into the “Pallet Wood Projects” folder (or upload a new image and drag it to that folder), the gallery will immediately and automatically update.

(In this example, I dragged an image that’s obiviously not a pallet wood project into the “Pallet Wood Projects” folder, but you get the idea.)

Now I refresh the post in my browswer, and here is the updated gallery:

Wrapping it Up

In an article from last December, I wrote about another way to create dynamic image galleries — in that case, using the amr Shortcode Any Widget plugin and the native WordPress gallery shortcode. But that method is a bit more esoteric and less intuitive than the media folders method described above.

Responsive Lightbox & Gallery has a bunch of other nifty features I plan to discuss in future blog articles.

I hope you find this article helpful. As always, I welcome your questions and comments.