I was building a website for a wedding, and my client wanted a photo gallery where the guests could upload the pictures of the wedding they took.  At first, I thought this was a big programming job that would cost thousands of dollars, but wait, I remembered the WordPress adage, “there’s a plugin for that”.  And there was.  I found a free plugin called FooGallery with a paid addon called User Upload which is $29.99 for one site per year.  You may use the 7-day free trial to make sure it works the way you want it to.  Here are step by step instructions for setting up and configuring your gallery.

Step 1, Download and Install the free version of FooGallery.

Go to the plugin section in your WordPress dashboard and select “Add Plugin and this screen appears:

Look at “a”.  Be sure to type foogallery and Gallery by Foogallery will come up,  Select the “Install Now button”.  It will spin for awhile then an “Activate” button will appear.  Click it,  It will also you an optin screen, select the option you want then it will take you to this welcome screen:

On the welcome tab, scroll down, almost to the bottom and select “Add a Gallery Now!”

Step 2, Configure Your Gallery

After clicking “Add a Gallery Now!” and a new gallery post is created as follows:

a. Add a title for your gallery

b. Select a layout for your gallery; I always use Responsive

c. Select a source for your images. I will upload them from my computer

d. This is the shortcode for your gallery. Copy and paste into a page where you want the gallery to appear.

Step 3, Add Your Pics and Create a Gallery

I selected the middle option, Upload from Computer and I navigated to a folder on my computer containing, selected the images and clicked “Open” Here is the result:

Leave all FooGallery settings alone for now.  Copy the shortcode to the right and paste it in a post or page and the gallery will appear on a  desktop as follows:

Click on any image and the full-size version of the image appears.

Step 4, Gallery Settings

Go back to your WordPress dashboard, under FooGallery select Galleries and click edit to open your new gallery scroll down to the Settings which look like this:

a. Set thumbnail size. This is the size that the image appears in the gallery. The Default, 270px X 230px works for me.

b. Set Mobile Layout, leave it default or it comes out strange on phones.

c. Thumbnail Link. Leave it set to Full Size

Now we are ready to install the User Upload add-in.

Step 5, Install User Uploads Add-in

Go to https://fooplugins.com/foogallery-wordpress-gallery-plugin/user-uploads/#pricing and scroll down to this area.

Click Start Free Trial and this popup appears:

Enter your email address, First and Last Name and click Start Trial .  You receive this message

Check your email for the license key and installation instructions.

First, if you are using Safari, you have to disable its auto extraction feature  to reserve the compressed folder structure.  Second, Download the add-on’s pro version and you will get a Zip file that you upload to your website and activate, it will spin for a while and an activate button will appear.  Then the following popup will appear:

Click Activate License  and Your Account Details appear.  Go back the WordPress dashboard, under FooGallery, select Galleries and your new gallery.  You will notice that a new option category appears, User Downloads.  Select it.

a. Under Show Upload Form, select “Show After Gallery.
b. Under Maximum Images Allowed, enter a maximum , something like 20
c. Under Maximum Image size, 5 mb is good
d. Enter allowed image file type or just make it blank to allow all image types
e. Select Who an Upload, I use Anyone
f. And finally, Auto Approve, I select Yes
Now go to Fields, under General:

a. Select Fields to the right and the options for fields in the upload popup appear. Hide, show and require as you wish.
b. Note that by requiring Display email you can send confirmation messages to your users.
Now, select emails. Here you can configure your user confirmations.

a. Select Email
b. Note that for these confirmations to work, you must have made emails required in the fields options
c. Select Yes in Send Emails and the message templates appear. Here you may edit the messages as desired.
d. Here you may edit the messages as desired.

6. Test the Gallery.

Open your gallery page and scroll down to the bottom where the upload images widget appears.

Click It and the Upload info popup appears.

Complete the fields and click upload and you image is added to the gallery.  When the image is uploaded a success message will appear.  Click on Close, refresh your browser and your new image appears in the gallery.

Well, that’s all for this tutorial.  I hope you found it informative.  Let’s hear from you in the comments to this post.