Getting Started With FooGallery

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

Getting Started

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

Add new gallery

Adding Gallery Items

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

Add media to fooGallery

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 new 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

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

Gallery Template

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

There are several built-in templates available with FooGallery Free. PRO templates, however, are only available for FooGallery PRO users.

Gallery Templates

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.

General settings for FooGallery

Appearance

You can alter the appearance of your gallery thumbnails in this tab.

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.

Gallery Appearance

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

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.

Captions 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

FooGallery PRO

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.

Video

Video is also included in FooGallery PRO and allows you to create video galleries or to add videos and images to the same gallery.

In this tab, you’re 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.

Gallery Shortcode

A shortcode is automatically generated for each gallery. This can be pasted into any page or post to display your gallery.

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

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.

Gallery Usage

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 Editor screen.

You’ll see the Add FooGallery button above the editor in any post or page edit screen.

Add FooGallery button

Clicking the Add FooGallery button will present you with a listing of all the FooGalleries you’ve previously created. Choose your desired gallery and click the Insert Gallery button.

Notice that each gallery has an image to represent it. This is what the gallery Featured Image was used for in the previous step.

Select a gallery

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.

Gallery in post or page

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 galleries

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

Edit gallery from page

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.

Leave a Comment

Getting Started With FooGallery