wordpress: photo galleries

User generated galleries

The public can also be an important source of content. The NextGEN Public Uploader plugin allows users to contribute to existing galleries. I made edits to this plugin as well that you can download and install. Or you can use the original. 

Understanding the settings

uploader settings

Once you install the plugin, you'll notice that a Public Uploader button has been added to the sidebar. Click it so we can examine the settings. 

The first four settings define how the uploader works.

  • Default Gallery ID: Select an existing Nextgen Gallery that photos will be uploaded to. You'll learn how to use additional galleries later but but it's good to have a dedicated place where errant photos land.
  • Widget Uploader: When enabled, the upload widget automatically appears in any post where the short code is used. 
  • Description Field: When enabled, the user can include a description of their photo. The default is a single line. If you're using the version that I altered the window is bigger.
  • Minimum User Role: The ability to set roles means that you can create galleries for different uses. When set to Visitor, anyone who visits your site can upload a photo. But if you can also restrict the ability to Contributor and Author as well. Whichever you choose, you can always change if for an individual gallery by editing the short code.
  • Notification Email: Be notified when photos are uploaded so you can approve them.

The following settings are instructions to the user. 

  • Upload Button: This is the message in the actual button. Common messages include Upload, Submit and Browse.
  • Description Text: This appears directly above the description field. e.g. "Please describe your photo..."
  • Not Authorized: If a user tries to upload a photo into a gallery that requires a subscriber, this message is displayed. An invitation to subscribe to the site is a nice solution.
  • Upload Success: Let's the user know the transaction is complete. This is a good place to let them know when their photo will appear. e.g. "Success! Thanks for sharing. Your image will appear once it has been approved."
  • No File: This message appears above the Choose File button if the user clicks upload. e.g. Please select an image
  • Upload Failed: If an upload fails try to suggest something that will make the process work. e.g. We're sorry. Your upload failed. Please save your image as a jpg and try again.
  • Exclude Uploaded Images: When enabled, you must approve a photo before it appears in the gallery. We'll cover this in a bit.

Create a target gallery

Click the Nextgen gallery settings and create a new gallery called UGC. Leave the Gallery Voting Options unchecked. Now click on manage galleries and write down the gallery id number. My UCG gallery number is 6.

Create, title and save a new post and add the following short code: [smooth=id:6;] This will add a slideshow to the top of the post. 

I'm also going to add some explainer text to entice people to submit their photos and let them know what's required.

Finally, add the following short code at the end of the post. [ngg_uploader id = 6]. Save the post and preview it. The slide show should be empty.

Upload / approve photos

Start uploading images with the upload widget at the bottom of the post. 

upload widget


Notice the success message after uploading the first file. Upload a couple more then go to the Gallery settings and select Manage Gallery. Click on your UGC gallery to edit it. 

First, create a new page in the Gallery settings.

Now look at the first image. If you entered a description you should see it here. Also, notice that keywords and metadata are imported as well.  When you are done editing the photo, caption, etc and you want to publish the photos, uncheck the exclude button on each image.



Now go back to the post and refresh. The photos should be in your gallery. My explainer text includes a link to the gallery page we just made, inviting users to vote on kitten cuteness.

uploader post


Next edit your gallery voting page and add a link inviting people to submit their photos.  And that's all there is to it. 


Final thoughts

Using four plugins we were able to implement a pretty robust set of photo tools that also make photo management more intuitive. And we really only scratched the surface of available plugins. Search out and experiment with other plugins on your development site and let me know if you find any you can't live without.