• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, May 10, 2019

Dynamic Photo Galleries with Responsive Lightbox & Gallery

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”.

Responsive Lightbox & Gallery Modal Example
This is an example of a modal “lightbox”. Click the image to enlarge in a modal window.

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.

Related Posts

  1. FooGallery Plugin for WordPress: First Look
  2. Enhanced Media Library Pro Plugin for WordPress: First Look
  3. How to Build Stunning WordPress Photo Galleries Quickly and Easily With FooGallery PRO
  4. Make Responsive Lightbox by dFactory Work with FooGallery
  5. Downscaling Images On Upload in WordPress
  • Choose the best match.

Written by Jeff Cohan · Categorized: Techniques · Tagged: Images, Media

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022
  • Make your Web Site the Heart & Hub of your Online Marketing Strategy March 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (37)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×