I created this tutorial on Foo Gallery for a client. The plugin is pretty straightforward to use, but the Foo documentation doesn’t actually walk you through the process step by step. The client has reported that it is easy for him to upload new photos, which is definitely what I wanted when I selected this plugin. I also installed FooBox Lite for this client, but that just works, so I didn’t add any instructions for it.
Step 1: Log in to the WordPress dashboard
If you’re reading this post here, you probably know how to do that, but this client had never used WordPress before, so I pointed him to http://domain.com/wp-admin/ so he could set his password and log in.
Step 2: Click on “Foo Gallery” in the left menu
I opted not to move the Foo Gallery menu under the Media heading, because I didn’t want the client to have to hunt for it. But if you want to tidy up your left menu, there’s a free extension called Use Media Menu that you can activate.
Step 3: Click on the gallery to edit it
I had created a demo gallery in advance when setting up the site, so the next step was to edit, rather than create, a gallery.
Step 4: Click the “Add Media” button to upload new photos (or add them from the media library)
You can either upload new photos or add photos that are already in your media library. Photos sent to you by clients through the contact form will be in your media library. (The contact form for this site included an image upload field.)
Step 5: Select photos from your hard drive or the media library
Step 6: Click the Add Media button when your files have finished uploading
Step 7: Rearrange gallery items by dragging and dropping (optional)
Step 8: Save your changes by clicking the Update button
Step 9: Preview your gallery
The “Gallery Usage” metabox on the right side of the page gives you a link to the page where the gallery appears. Click the page title, then “View”.
Changing Foo Gallery Templates
If you decide you want to use a different template to display your gallery, select the template from the drop-down menu in the Gallery Settings (right under Gallery Items).
Foo Gallery Template Examples
Here are examples of the different gallery templates that come with Foo Gallery. You can change your template at any time.
(Note that this name is misleading: all of the gallery types are responsive.)
This one is probably my personal favorite, but the client liked the Polaroids.
Simple Portfolio Gallery
The Simple Portfolio gallery shows captions and descriptions if you have set them. This is good for explaining the image if you are really using it for a portfolio.
For the Masonry Gallery, you set the thumbnail width. For the Justified Gallery, you set the thumbnail height. Given that the content area on the client’s site was only 800px wide, the Masonry Gallery looked awkwardly tall and narrow.
I had also activated the Albums extension for Foo Gallery. This is included in the plugin, but it is not automatically activated. If you create multiple galleries, you can group them into albums. So far the client only wants one gallery for both his photos and photos sent in by his clients.
To create an album, find the Albums link under the Foo Gallery Menu, then click “Add Album.”
The Add Albums screen shows you all your galleries and settings. Click a gallery to include it. Click Publish when you are finished. (There are various options for albums not displayed in this screenshot–I didn’t go into a lot of detail because it was pretty clear the client wouldn’t need this feature for a while.)
To display the album, either create a new page and insert the album shortcode, or replace the gallery shortcode(s) on your photos page with the album shortcode. Then put the shortcode for each gallery onto a new page and publish it.
And that concludes my basic Foo Gallery tutorial. I really liked using this plugin and will definitely use it on client sites in the future when I need something beyond the native WordPress gallery.
See the client’s Your Safe Ports Photo Album gallery in action.