• 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
FooGallery PRO

By Jeff Cohan, June 17, 2020

How to Build Stunning WordPress Photo Galleries Quickly and Easily With FooGallery PRO

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:

FooGallery PRO Screen Capture
Photos of Places
Demo: Screen capture of FooGallery gallery created from Media Tag source
FooGallery PRO Screen Capture
Photos of People
Demo: Screen capture of FooGallery gallery created from Media Tag source
FooGallery PRO Screen Capture
Photos of Things
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:

  1. Media Tags
  2. Media Categories
  3. Server Folder
  4. Adobe Lightroom
  5. Real Media Library
  6. Instagram
  7. 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.)

Just as WordPress’ built-in Post Tags and Post Categories are two different ways to classify — or group — posts, Media Tags and Media Categories are two different ways FooGallery PRO allows you to classify media files. The differences between tags and categories can be subtle, and there’s no one firm rule for how to use these two classification tools. Many people use them interchangeably. Years ago I wrote an article recommending the approach I favored then and still favor now.)

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.

FooGallery PRO Screen Capture
tag-010
Open your Media Library. If the view mode is “List”, change it to “Grid”; this is the easiest way to proceed.
FooGallery PRO Screen Capture
tag-020
Now click on the thumbnail of the first image you want to tag.
FooGallery PRO Screen Capture
tag-030
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.
FooGallery PRO Screen Capture
tag-040
Click the right arrow to move to the next image in the Media Library; this will save what you entered.
FooGallery PRO Screen Capture
tag-050
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.
FooGallery PRO Screen Capture
tag-060
Here is the next image to be tagged. Notice that "Places" and "People" are now selectable.
  1. Open your Media Library. If the view mode is “List”, change it to “Grid”; this is the easiest way to proceed.
  2. Now click on the thumbnail of the first image you want to tag.
  3. 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.
  4. Click the right arrow to move to the next image in the Media Library; this will save what you entered.
  5. 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.

FooGallery PRO Screen Capture
add-gallery-01
Click “Add Gallery” from the “FooGallery” menu in the dashboard.
FooGallery PRO Screen Capture
add-gallery-02
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.
FooGallery PRO Screen Capture
add-gallery-03
Select “Media Tags” fom this window.
FooGallery PRO Screen Capture
add-gallery-05
The Media Tags you have created will show up as options. Select “People” and click “Ok”.
FooGallery PRO Screen Capture
add-gallery-06
Now you’ll see that the “People” tag has been assigned as the datasource.
FooGallery PRO Screen Capture
add-gallery-07
Click the “Gallery Preview” button in the “Gallery Items” section. You will see a preview of the gallery. Click “Publish” to save the gallery.
  1. Click “Add Gallery” from the “FooGallery” menu in the dashboard.
  2. 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.
  3. Select “Media Tags” fom this window.
  4. The Media Tags you have created will show up as options. Select “People” and click “Ok”.
  5. Now you’ll see that the “People” tag has been assigned as the datasource.
  6. 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.

FooGallery PRO Screen Capture
add-page-010
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.
FooGallery PRO Screen Capture
add-page-020
Enter the name for this page: "Photos of People". Click the "Add FooGallery" button.
FooGallery PRO Screen Capture
add-page-026
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.)
FooGallery PRO Screen Capture
add-page-030
Notice that we are in "Text" editing mode and the shortcode for the gallery has been embedded in the body of the page.
FooGallery PRO Screen Capture
add-page-040
Switch to "Visual" editing mode, and you'll see a thumbnail preview of the gallery. Click "Publish".
FooGallery PRO Screen Capture
add-page-050
Now click "View Page" to view the page with the gallery embedded.
  1. 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.
  2. Enter the name for this page: “Photos of People”. Click the “Add FooGallery” button.
  3. Now you will see all the existing galleries. Select one and click “Insert Gallery”.
  4. Notice that we are in “Text” editing mode and the shortcode for the gallery has been embedded in the body of the page.
  5. Switch to “Visual” editing mode, and you’ll see a thumbnail preview of the gallery. Click “Publish”.
  6. Now click “View Page” to view the page with the gallery embedded.

Voila!

Demo: Screen capture of FooGallery gallery created from Media Tag source

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?)

Related Posts

  1. Use FooGallery for WordPress to Show Off Your Stuff
  2. Dynamic Photo Galleries with Responsive Lightbox & Gallery
  3. Enhanced Media Library Pro Plugin for WordPress: First Look
  4. FooGallery Plugin for WordPress: First Look
  5. Make Responsive Lightbox by dFactory Work with FooGallery
  • Choose the best match.

Written by Jeff Cohan · Categorized: Techniques · Tagged: FooGallery, Images, Photo Gallery, Plugins, WordPress

  • 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

×