Photo (image) galleries are common and popular elements for many Web sites; for some, they’re downright essential. In this article I focus on FooGallery PRO and its special features for creating photo galleries quickly and easily.
WordPress has a built-in image gallery feature (since version 2.5) using the [gallery] shortcode. In addition, there are more than enough third-party image gallery plugins floating around to make your brain hurt.
About a year ago I wrote a blog post about making dynamic photo galleries using the Responsive Lightbox & Gallery (“RL&G”) plugin. Back in December of 2018 I wrote a blog post about creating dynamic photo galleries using the WordPress gallery shortcode in conjunction with the amr Shortcode Any Widget plugin.
Today I’m going to show you how to create stunning photo galleries quickly and easily with FooGallery PRO. And my focus will be on the “quickly and easily” part.
Let’s Start with Some Screen Shots
Suppose you are a photographer and wish to display these distinct image galleries, grouped by subject matter as follows:
- People
- Places
- Things
Here are examples of what you might have:
Demo: Screen capture of FooGallery gallery created from Media Tag source
Demo: Screen capture of FooGallery gallery created from Media Tag source
Demo: Screen capture of FooGallery gallery created from Media Tag source
Why FooGallery PRO?
Yes, there’s a free version of FooGallery, and I’ve used it for years and like it a lot. You do not have to upgrade to the premium version of FooGallery to make stunning image galleries. However, the premium version — currently $59 for a single-site annual license — offers a number of features that make it really easy to make and maintain your image galleries. Specifically, FooGallery PRO supports 7 ways of creating dynamic galleries. (Note: I have no affiliate relationship with FooPlugins, makers of FooGallery and FooGallery PRO.)
Dynamic Image Gallery Defined
So what’s a dynamic image gallery, and why should you care?
Perhaps the best way to define a dynamic image gallery is to define the alternative: the typical non-dynamic image gallery — one you create manually.
Non-Dynamic (Manual) Image Galleries
Pretty much every WordPress image gallery solution allows you to create and maintain a gallery by selecting images from the WordPress Media Library. You can select or drag & drop them from existing assets in the library and/or by uploading images from your computer.
Then you save the gallery and embed it in some page or blog post, typically by entering a shortcode. (Many gallery plugins — including FooGallery, in both the free and “FooGallery PRO” versions — provide a toolbar button you can click to launch a dialog box from which you select the gallery you want. When you accept the dialog, the shortcode is entered for you.)
When you want to add new images to a non-dynamic (manual) gallery, you need to:
- upload the images to the Media Library if they’re not already uploaded
- edit the gallery
- select the new images
- re-save the gallery
Dynamic Image Galleries
What if you could create an image gallery one time and then not have to edit it when you add new images to the Media Library?
You can, and that’s what a dynamic image gallery is. A dynamic image gallery is one you can create and forget.
FooGallery PRO’s Dynamic Image Galleries
At this writing, FooGallery PRO supports 7 different sources from which to add images dynamically to a gallery:
- Media Tags
- Media Categories
- Server Folder
- Adobe Lightroom
- Real Media Library
- Post Query
In this tutorial I’m focusing on Media Tags as the gallery source. (Note that Media Tags and Media Categories are extremely similar in the way they work as gallery sources. For the purposes of this tutorial, consider them to be identical.)
Step-By-Step Instructions for Creating Dynamic FooGallery PRO Galleries Using Media Tags as the Source
Here’s what you do. (These instructions assume the images have already been uploaded to your Media Library and that you have not yet created any Media Tags. However, the process of assigning Media Tags to images upon upload is very similar.)
Step 1: Tag the Images
The screen shots in this gallery correspond to the written steps below. Click a thumbnail to enlarge and cycle through the images.
Open your Media Library. If the view mode is “List”, change it to “Grid”; this is the easiest way to proceed.
Now click on the thumbnail of the first image you want to tag.
This will open up the “Attachment Details” window. In the Media Tags box, enter the appropriate tag. In this screen shot of the Pergola Detail, I’m entering “Places”. Note that the hint in the Media Tags box tells you to “Select tags, or add a new tag…” The first time you enter a tag, there will be nothing to select. Afterwards, you will be able to select — in the same way you add tags or categories to blog posts.
Click the right arrow to move to the next image in the Media Library; this will save what you entered.
Continue and add a Media Tag for each image you wish to include in one of your three galleries. When you’re done, it’s time to create the galleries.
Here is the next image to be tagged. Notice that "Places" and "People" are now selectable.
- Open your Media Library. If the view mode is “List”, change it to “Grid”; this is the easiest way to proceed.
- Now click on the thumbnail of the first image you want to tag.
- This will open up the “Attachment Details” window. In the Media Tags box, enter the appropriate tag. In this screen shot of the Pergola Detail, I’m entering “Places”.
Note that the hint in the Media Tags box tells you to “Select tags, or add a new tag…” The first time you enter a tag, there will be nothing to select. Afterwards, you will be able to select — in the same way you add tags or categories to blog posts. - Click the right arrow to move to the next image in the Media Library; this will save what you entered.
- Continue and add a Media Tag for each image you wish to include in one of your three galleries. When you’re done, it’s time to create the galleries.
Step 2: Create the Galleries
The screen shots in this gallery correspond to the written steps below. Click a thumbnail to enlarge and cycle through the images.
Click “Add Gallery” from the “FooGallery” menu in the dashboard.
Enter a name for the gallery. Here we are creating a gallery for “People”. Click the “Add From Another Source” button from the “Gallery Items” section.
Select “Media Tags” fom this window.
The Media Tags you have created will show up as options. Select “People” and click “Ok”.
Now you’ll see that the “People” tag has been assigned as the datasource.
Click the “Gallery Preview” button in the “Gallery Items” section. You will see a preview of the gallery. Click “Publish” to save the gallery.
- Click “Add Gallery” from the “FooGallery” menu in the dashboard.
- Enter a name for the gallery. Here we are creating a gallery for “People”. Click the “Add From Another Source” button from the “Gallery Items” section.
- Select “Media Tags” fom this window.
- The Media Tags you have created will show up as options. Select “People” and click “Ok”.
- Now you’ll see that the “People” tag has been assigned as the datasource.
- Click the “Gallery Preview” button in the “Gallery Items” section. You will see a preview of the gallery. Click “Publish” to save the gallery.
Repeat steps 1-6 for each of the other two galleries — “Places” and “Things”, selecting the appropriate Media Tag in step 4.
Step 3: Embed Galleries in Pages or Posts
For any page or post on which you want to display the any of your photo galleries, simply enter the gallery’s shortcode in the appropriate location. You can enter the shortcode manually or use the toolbar icon FooGallery adds to the TinyMCE Editor that allows you to select the desired gallery.
Here are the steps. The screen shots in this gallery correspond to the written steps below. Click a thumbnail to enlarge and cycle through the images.
Now that you have created the "People" gallery, click "Add New" from the "Pages" menu to add the page on which this gallery will appear.
Enter the name for this page: "Photos of People". Click the "Add FooGallery" button.
Now you will see all the existing galleries. Select one and click "Insert Gallery". (This screen shot should show the "People" gallery as selected. Oh well.)
Notice that we are in "Text" editing mode and the shortcode for the gallery has been embedded in the body of the page.
Switch to "Visual" editing mode, and you'll see a thumbnail preview of the gallery. Click "Publish".
Now click "View Page" to view the page with the gallery embedded.
- Now that you have created the “People” gallery, click “Add New” from the “Pages” menu to add the page on which this gallery will appear.
- Enter the name for this page: “Photos of People”. Click the “Add FooGallery” button.
- Now you will see all the existing galleries. Select one and click “Insert Gallery”.
- Notice that we are in “Text” editing mode and the shortcode for the gallery has been embedded in the body of the page.
- Switch to “Visual” editing mode, and you’ll see a thumbnail preview of the gallery. Click “Publish”.
- Now click “View Page” to view the page with the gallery embedded.
Voila!
From this point forward, as you add new images to the Media Library and assign any of the three Media Tags to them, those images will automagically appear in their respective galleries — without your having to edit the galleries themselves or the pages in which those galleries are embedded. This is also true for any images that were previously uploaded to media library. Namely, you can retroactively assign media categories to those images — or remove media categories from them — and the galleries will dynamically update.
About the Galleries in this Article
All four galleries in this article were created using FooGallery PRO with Media Tags as the datasource. I thought it made sense to walk the talk.
What’s more, the four front-end galleries all use a single back-end gallery. What makes this work is an undocumented FooGallery PRO shortcode feature. I discovered this shortcode feature when I embarked on building 20 galleries of screen captures for a client. I was already using FooGallery PRO and Media Tags as the datasource. After I created the first two galleries (I created the first and then duplicated it), I realized there has to be a better way. I contacted FooPlugins support, and they promptly replied with the solution. (Have I piqued your interest?)
Leave a Reply