FooGallery 101

What is FooGallery?

The Most Intuitive and Extensible Gallery Creation and Management Tool Ever Created for WordPress; built to be simple for users and highly flexible for developers.

FooGallery Overview

FooGallery is a WordPress Media Gallery Plugin that allows you to easily create beautiful galleries. The plugin provides for an intuitive gallery creation and management experience with the added benefit of the powerful features that FooGalley includes.

When you first activate FooGallery, you’ll be presented with the main Welcome page. This page gives you an overview of the available features of FooGallery.

When FooGallery is updated, you will also see new features listed here after you run the auto-update process.

There are four tabs on this page: Getting Started, Extensions, Other Plugins and System Info.

FooGallery Welcome page

Getting Started

Here you’ll find a quick overview of FooGallery, and how to get started with your first gallery. You’ll also find tips on how to add your galleries to your site.

Show off your gallery

Demos

This tab lists all the FooGallery demos, which show you just what you can do with FooGallery.

Support

Here you can find links to the FooGallery documentation, where you can find out what you need to know about FooGallery. You’ll also find a link to the WordPress.org support forum for FooGallery Free.

FooGallery Menu

Settings

Clicking on settings will take you to the default settings for FooGallery. If you want to change the default gallery, thumbnail settings, language and so forth, then you can come here.

Extensions

Here you’ll be redirected to the Extensions for FooGallery. Each Extension adds a specific functionality or design template to your FooGallery installation.

They are categorized into different groups, including All, Active, Featured, Free, Premium, and the Build Your Own Template Generator.

System Info

This is information about your server configuration. You can use this info to help debug issues you may have with FooGallery.

Creating a New FooGallery

To create a new FooGallery, navigate to FooGallery–>Add Gallery from your dashboard. Start by giving your gallery a title.

Add a New Gallery

Adding Gallery Items

To start adding images to your gallery, click the Add Media icon. This will bring up the familiar WordPress Media Library and Upload Files options.

To Upload Files, click on the far left tab and then select your files. Once you’ve uploaded your files, choose the images you would like to include from your Media Library and click the Add Media button on the lower right. This will insert your selected images into your new FooGallery.

Add media to your gallery

Gallery Settings

Below the Gallery edit screen, you’ll see the Gallery Settings area.

As you adjust your settings, you can see how the gallery will appear on the frontend by clicking on Gallery Preview in the Gallery Items area.

Gallery preview displays changes to gallery settings in the backend

The settings will vary depending on the Gallery Template you select. Below we’ve covered the basic settings for the Responsive Image Gallery.

Gallery Template

You can choose what gallery template should be applied when the gallery is seen on the frontend of your site.

There are several built-in templates. Any additional templates you have activated in the Extensions area will also be available as a choice here.

Note: PRO templates are only available for FooGallery PRO users.

General Settings

The default settings will be applied, or you can adjust each of the settings for your gallery.

To begin with, you can change the size of the thumbnails in your gallery. The default size is set to the built-in WordPress image sizes as you have them in Dashboard–>Settings–>Media and/or any custom sizes defined by your theme or other plugins.

In the Link To section, you can choose to link your thumbnails to their full size image, to the Image Attachment Page or to a Custom URL. In most cases, we recommend linking to the full size image to enable lightbox plugins like FooBox to work properly.

If you have a supported lightbox plugin activated, you can choose to apply it to your gallery in the Lightbox field.

Thumbnail Spacing allows you to choose the spacing you would like inbetween each thumbnail image in your gallery.

In Alignment, choose how you would like your gallery aligned horizontally within your post or page.

Responsive Image Gallery general settings

Appearance

In this tab, you can alter the appearance of your gallery thumbnails.

You can adjust the border of your thumbnails by changing the Theme, Border Size, Corners, and Drop and Inner Shadows.

The Loading Icon displays as images are loading and the Loaded Effect is used once images have loaded. The Fade In loaded effect is available in FooGallery Free, while FooGallery PRO users can choose from several other options.

Responsive Image gallery appearance settings

Hover Effects

Here you can alter the effects that display when you hover over the thumbnail in the gallery.

The hover effect can include color and scaling effects. You can also change the caption to be visible on hover, or always visible. The transition effect is how the hover effect is displayed and you are able to select the icon that displays.

FooGallery PRO also comes with a selection of presets, along with the other settings.

Hover effects for the responsive image gallery

Captions

The Captions settings adjust which captions display on your thumbnails. You can leave it set to default or choose to include the title, caption, alt tag or description as the title or description for the image. These pull from the media file, and can be adjusted by editing the individual image or file.

Caption settings

Paging

The default setting here is None, so to add Paging to your gallery you will need to select a Paging type. FooGallery Free comes with Dots. Once selected, you will be able to set your Page Size, along with the position and theme of the Dots.

FooGallery PRO comes with the additional options of Pagination, Infinite Scroll and Load more.

Paging settings for FooGallery free

Filtering

FooGallery PRO includes Filtering, which allows you to include gallery filtering for Media tags and categories. You can select the Simple Filtering for basic options such as Theme, Source and Position. Advanced Filtering allows you more options, such as changing the size or opacity of the Filter buttons.

Filtering on FooGallery Pro

Video

FooGallery PRO includes Video. This allows you to create video galleries or to add videos and images to the same gallery.

In this tab, you are able to choose the icon you would like to display on your video thumbnail. You can also make it Sticky, meaning it displays even when you’re not hovering over it. You can adjust the size of your lightbox, should you need to. And finally, you can set YouTube and Vimeo videos to play automatically.

Video settings for FooGallery Pro

Gallery Shortcode

A shortcode is automatically generated for each gallery. This can be pasted into any page or post to display your gallery. If you’re using the block editor, you can paste the shortcode into the HTML block.

Click the shortcode in this box to automatically copy it to your clipboard for easy pasting elsewhere.

Gallery Shortcode

TIP: You can also use the Add FooGallery editor button when creating or editing a post or page to accomplish the same insertion of this shortcode.

Gallery Featured Image

You can set a Featured Image per gallery. This image will show in your gallery listings and can also be used in your own custom gallery templates.

The image you use as your Featured Image does not have to exist in the gallery itself (but it could).

Featured Image for FooGallery

Gallery Usage

This box will show you a list of pages or posts where the current gallery is being used. It’s a great time saver when you’re managing your previously created galleries.

If your gallery has not yet been inserted into a page, you can quickly create a new gallery page to use for your gallery.

Inserting FooGalleries Into Posts and Pages

Displaying any of your galleries in posts and pages can be easily done by using the Add FooGallery button in the Classic Editor. In any post or page edit screen, you’ll see the Add FooGallery button above the editor. Clicking the Add FooGallery button will present you with a listing of all the FooGalleries you’ve previously created.

Notice that each gallery has an image to represent it. This is what the gallery Featured Image was used for in the previous step. Choose your desired gallery and click the Insert Gallery button.

After your gallery has been inserted, you will see a representative block containing the gallery, with the featured thumbnail image displaying. If you haven’t chosen a featured thumbnail image, the first image in your gallery will be used.

If you are using the block editor, click on the FooGallery block (under Common Blocks). From here you can insert any of your existing galleries. Once selected, the block will display the gallery you are using.

Select gallery from Foogallery block in the block editor

Viewing and Editing FooGalleries

You can view and edit any of the FooGalleries you’ve created.

Navigate to FooGallery–>Galleries from your dashboard and you will see all the galleries you’ve previously created.

Just like Pages and Posts, you can edit any FooGallery by clicking the edit button (which appears on hover) under the gallery name.

Edit or view galleries from the gallery page

You can also go into Edit mode on any gallery from within a Page or Post by clicking the Edit icon for the gallery.

Support

Support for FooGallery is provided via the WordPress.org forums or the FooPlugins Support page

If you experience bugs or have specific feature requests, please open a ticket with Support.