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.
Carousel Gallery
Responsive Gallery
(Note that this name is misleading: all of the gallery types are responsive.)
Justified Gallery
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.
Masonry Gallery
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.
Creating Albums
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.
The “Add Album” does NOT show my gallery. It shows there are no galleries, The gallery is not working properly, so I thought I’d try an album.
If the gallery isn’t working, the album isn’t likely to, since it’s a collection of galleries. If you’re having problems getting the plugin to work, you should post your issue in the Foo Gallery support forum.
Is it possible to have it where people can click on the image in the gallery and it takes them to the blog post the image is from?
You can make the images link to anything you want, including a post, but there isn’t a setting for creating an automatic gallery of posts. For post galleries, you’d want a plugin specifically aimed at that, something like Post Grid or Content Views. (I admit I haven’t used either, but they both look pretty good.)
Hey,
I wanted to switch from my old school plugin. I wanted to know about other lightbox plugins. This post helped me to install and configure Foo Gallery.
I am liking it but let’s see how my clients feel about it. I am going to try this plugin on my other blog as well.
Thanks for the guide, it’s really helpful.
I’ve used it on several client sites and so far they’ve all been happy with it.
Hey,
Is it possible to shows captions (I have set them) with the responsive gallery ?
What I would like, it’s a caption inside the image like in this example :
https://foo.gallery/demos/responsive-image-gallery-captions/
Like the Simple Portfolio Gallery but with the caption inside the image… I try but didn’t find how to do !!
Any idea ?
Yes, it’s possible to do that, though I notice that Foo’s docs don’t seem to mention it. Select “caption” from “Hover effect type” and then choose whether you want the caption to be visible on hover, or always visible.
It’s exactly what i was looking for. Thank you ;-)
Hi!
Thank you for your tutorial! There is just one thing I can’t figure out. I have created a gallery but when you click on one of the photo’s to see them in full size, there is no button to go back to the gallery. I would expect a little cross or something like that to close the big image and go back to the gallery…
Do you know how to fix this?
Thank you!
You need to make sure you install a lightbox plugin and select it when you create your gallery. Try FooBox Free.
Great tutorial.
How did you get the Polaroid Gallery to show 3 images across? I can only get mine to show the default 2-across view.
Hi, Jeannine. The number of images you see across depends on the size of the thumbnails and the size of the content area. FooGallery will show as many images across as it has room to. You can make the thumbnails smaller or reduce the spacing between them.
hi,
is it possible to have a clickable picture and with a clickable caption underneath the picture.
I managed to have a clickable picture which will take me to a different page using simple portfolio which is good but caption is not clickable.
it would be great to have a responsive image gallery (i like the fact that little cross appears when i hover over it) with a clickable caption underneath. using the responsive image gallery, i can see caption within the picture when i hover over the picture but i am unable to place it underneath the picture.
could you please help with this?
You could edit your caption to include a link. There may be code you could add to automatically link the caption to the same place the image links, but I’d have to look that up.
Thanks Sallie, still didnt have luck finding anything that would work.
Heh, I have easily spent 5 hours trying to figure this out yet no luck :/ Is there some other plugin that would allow me to do this? I have tried Envira but doesnt seem to have this option…
I usually use Foo, so I’m not an expert in galleries. Before I try to discover a way to do what you want, can you explain precisely what it is you do want? You haven’t mentioned whether you want the image and the caption to link to the same place or different places, for instance.
So what I want is a picture and a caption underneath it. I would like both, the image and the caption, to take me to the same page. Ideally, a cross would appear when I hover over the image but not too fussed about that to be honest. All I need is clickable image and caption taking me to the same place :)
I have tried using responsive galleries but they only seem to show caption when I hover over the picture.
Cheers
I added foo gallery, uploaded all my photos and chose the single thumbnail view, but I only see the main picture. Do you know why I can’t see the other photos?
That’s what “single thumbnail view” means: it shows you one thumbnail image, and you get the rest of the gallery by clicking. If you want to see all the thumbnails, choose a different option, such as “responsive gallery” or “masonry.”
I think it’s an issue with my wordpress. I realized that the photos I uploaded to Foo, when published was opening on my blog page and not my gallery. I do not know how to fix it, even with the photos on my blog page I click on the thumbnail and the photos do not show.
It looks like your site is loading several different lightboxes: FooBox, the Woo lightbox, and a lightbox built into your theme. You might have some JS conflicts there. Testing for conflicts is generally a process of elimination, and you should do it on a staging site if you have one. Switch to a default theme (e.g. Twenty Seventeen) and see whether you still have the same problem. If you do, the source of the conflict is probably not your theme. Leave the default theme on while you test the plugins. Turn off other plugins and see whether FooGallery works the way it’s supposed to. If it does, you have a plugin conflict, and need to turn other plugins back on one at a time until the problem reappears. Then you’ll need to search, or ask Foo support, or support for whatever plugin is causing the conflict, for information about handling that specific plugin conflict. Here is the link to the FooGallery support forum.
Thank you so much. Everything works perfectly now. I was also able to keep the single thumb view. The only problem is my galleries are in a straight line going down on my page, I would prefer to have them going maybe 3 across to have them fill in the page.
You could add a little custom CSS to handle that. Try something like this:
.page-template-gallery .site-content { display:flex; flex-wrap:wrap; justify-content: space-between; } .site-content h1 { flex: 0 0 100%; } .foogallery-container { flex: 0 1 300px; }Hi, Do you know if it’s possible to center the caption in a simple gallery? I’m using image descriptions as captions under the images but they are all left aligned.
I’m sure it’s possible to do with CSS. You need to find out what the class for the caption div or span is and make sure you add
text-align: center.I use FooGallery, currently I have 2 Albums based on year of event, and 3 Galleries based on type of activity. Is it possible to have a sub-gallery based on events under each type of activity
Example
-2016 Album
=Athletics Gallery
~Winter Games
~Spring Games
~Summer Games
=Scouts Gallery
~Winter Camp
~Summer Camp
=Events Gallery
~Family Night
~Bingo Night
~Pasta Night
-2017 Album
=Athletics Gallery
~Winter Games
~Spring Games
~Summer Games
=Scouts Gallery
~Winter Camp
~Summer Camp
=Events Gallery
~Siesta Night
~Day at the Beach
~Fathers Day Party
Any help and suggestion I would greatly appreciate.
I don’t think galleries are hierarchical, so I don’t believe you can create sub-galleries the way you can sub-pages. Which leaves possibly creating actual pages and organizing them hierarchically, with your preferred galleries embedded. And that seems awfully kludgy. Have you asked on the support forums at WordPress.org?
Thank you, I was thinking along the same line, but was not sure how to make it work. I will check forum at wordpress.
Nice Tutorial! I love FooGallery, and used it for the few websites I did create. My problem tonight is trying to get a responsive Album to link straight to the lightbox, instead of using Ajax Pagination. I’m aware that the All-In-One-Stack does this, but I’ve coded so much CSS already and frankly it wasn’t fun inspecting and overwriting. I was wondering if maybe you might know of an easy way to do this? Maybe a shortcode or direct link?
Sorry if this seems off topic, I just felt you are one of the more knowledgeable people that wrote about FooGallery; at least that I came across.
Thanks for your time regardless,
Thomas Murphy, IV
[email protected]
Hi, Thomas. Thanks for your comment. Unfortunately, I haven’t worked with albums enough to know whether there’s a way to connect them directly to the lightbox. Have you tried asking in the support forum?
No I haven’t lol. I was just searching other developer blog posts. I asked a question in the forum before and didn’t receive an answer, found it quicker through other sites. I’ll try them and if so I’ll relay the information to you. Thanks for the reply! And I have you bookmarked too.
Hi I’m Just wondering if it is possible to have say 30 photos in a gallery but only display 9 at a time on the site page, then using the randomise setting to change all 30 around the site
I haven’t used pagination on a gallery before. It’s a fairly new feature and didn’t exist when I wrote this post. Here is a YouTube video that demonstrates how it works. I don’t think that randomization is an option, but you could ask the Foo Plugins support team about that.
https://www.youtube.com/watch?v=mQbQNCLTYns
Hi. I really like the Foo Gallery, the one problem I am having is I have multiple galleries on the one page but when you click on one (gallery), it doesnt stop at the last image and leads straight into another gallery (meaning the viewer may think those pictures relate to the first gallery they clicked on). Any idea how to have a “stop” at the last photo of a gallery? Thanks in advance.
Not a clue, I’m afraid. I don’t think I’ve put multiple galleries on a page before. I’d recommend asking in the support forum.
Will do, thanks Sallie for your response.
Do you know the code i could use in Foogallery to be able to use a shortcode in the image description? I tried ‘ . do_shortcode( $image_description ) . ‘, but it didn’t work.
I suspect what you’d have to do is enable shortcode support for image descriptions for WP as a whole, rather than just for FooGallery, but unfortunately I’m not sure how to do that. You might have to dig into the code of Foo to see how they call the description.
Thanks for taking the time to answer me. I did figure it out by using the “link” selection in the Media description editor. It’s not exactly the way I want it to look, but it works for now!
If it helps anyone else, I did find a WordPress plugin “HTML in Category Descriptions”. Although it didn’t work for me, it may be just a compatibility issue.
Hi,
I have an e-commerce website and I have been using foo gallery for my images. I have around 20 foo galleries for my website and each of these galleries have around 100 images in them. So you have to scroll down a lot both in mobile and desktop. I was wondering if there is a way to put load more button or some code…so that when the page loads, 15-20 images from the foo gallery are shown and then users can click on load more button to view more images. Please help.
I’m trying to picture a situation where you need 100 photos of a product, but leaving that aside, there are pagination options available in FooGallery. The free version only offers dots, but the pro version includes a “load more option.” See Foo’s paging effects demo for details.
Is it possible to have the filename displayed when using hover? I know if I copy file name to description or title it will work, but without this step is it possible to select filename?
Thanks.
You can choose from several possible sources for your FooGallery titles and descriptions: Attachment (meaning image) title, attachment caption, attachment ALT tag, and attachment description. I suspect the reason the filenames aren’t included is that the title is normally generated from the filename, and also that many image filenames (especially if the images are uploaded directly from a camera) are not very informative. However, if you don’t mind working with code, FooGallery support provides instructions for overriding image captions.
I’ve looked at the Paging effect demo (https://foo.gallery/demos/paging-effects-demo/)…
would you explain how I can get the play icon that appears in the bottom of the cots(available in FREE version) demo.
Thanks,
Aubrey.
The demo appears to have moved to https://foo.gallery/demos/pagination-demo/, and I don’t see any play icons in the dots demo. If you have a video gallery (for which you need Pro), you’ll see a play icon over the thumbnail. For images, you can choose an icon to show on hover in yoru gallery settings.
I’m not a FooGallery developer or even a particular expert, just someone who uses the plugin. For support, you should go to either the Support Forum on WordPress.org or to the documentation pages.
I should ask how to download a specific gallery from the images created by FooGalery plugin in wordpress.
thank you
Do you mean download the gallery from the front end of the site or from the site admin? It’s possible to export a gallery as a custom post type so you can put it on another site, but I’m not aware of any option for site visitors to download the whole gallery.
Hello, great post on foogallery. Do you you know how I can hide the image count that displays under the gallery title when the gallery is created.
Hello,
I have the following problem with my website.
The site is made using Twenty Twelve theme and the main menu has dropdown. The main problem is that when I’m on a page with FooBox, the dropdown it gets behind this galleries, making it unusable.
Can you tell me if there are any particular settings or maybe some aditional CSS to use in advanced section so I can fix this?
This is probably an issue with
z-index, one of the trickier properties in CSS. If you can increase thez-indexof the dropdown menu to a larger number than that of the gallery, the menu will show on top. You can put the code to change thez-indexinto the Customizer under Additional CSS.Hello,
I am trying to make nested photo albums using Foogallery on my WordPress website. I have been able to create galleries and albums but I can’t seem to figure out how to put the albums that I have created so far into a single album that only shows one thumbnail on the page, not a thumbnail of all of the albums in there. Does that make sense?
Thank you for your time.
Hi, Mark. I’ve never tried to do that, and I suspect it’s not possible. If you mean to have a “super-album” that contains the other albums. To combine all the albums into one, you probably have to add all the galleries to it, but that may not be what you want. FooGallery Support may be able to help.