Tutorial: WordPress: Photo Galleries
WordPress does a fair job of providing a way to quickly create photo galleries. But it doesn't provide a way to manage the large number of galleries and photos that appear over time on news sites.
In this tutorial, we'll explain how the WordPress Media Library and galleries work. We'll explain how to set up and use the Nextgen Gallery plugin to improve photo management. And we'll explore how to integrate some plugins that use Nextgen Gallery to create sophisticated slideshows and galleries that can be rated or contributed to by users.
Download the project files to get started.
Add metadata to your photos
Metadata is important information, including title, description, copyright and more that can be read by WordPress and other software and platforms. Entering this information will allow you to search for photos with detailed information directly in WordPress.
This can be done in Photoshop but if you plan to work with a lot of photos, consider investing in some good batch processing software like Photo Mechanic. This should be one of the final steps in your photo workflow.
Metadata also makes it much easier to search photos from your desktop more efficiently. If you use a Mac, Spotlight can search the metadata, making it easier to find photos by a specific photographer or date. Many of the Adobe products come with a program named Bridge that is very good at searching metadata and provides thumbnail previews.
How to add metadata to a photo
Open a cropped and color corrected photo in Photoshop and go to the File menu and select File Info... . You should see a dialog that looks like the one below.
Click the image for a larger version
You can see that I entered the field names in the boxes for easier identification later on.
Once you are done, click OK. Then save and you are ready to start.
Using the WordPress Media Library
WordPress has a built-in media section where it stores everything you upload. It works well if you are using photos with the occasional blog post. In this section we'll learn how the Media Library works and how to add and manage your media.
How to upload photos
To upload photos directly into your WordPress Media Library, go to your dashboard and select Add New as shown below.
Next, select the photos you want to use.
WordPress will upload all your photos and automatically generate thumbnail images. When it's finished, it will let you know everything uploaded successfully, as you can see here.
How to edit photo metadata
While it's best to edit metadata in the actual images, if you don't it can still be done in WordPress. Notice that one of the files uploaded with the name "Doc title" This is the information that was entered into the title field in Photoshop. If you didn't edit the Title field in Photoshop, you will have to do it here to have a title that is pleasing to read.
Click to Show (the Doc title detail button) to take a closer look.
WordPress automatically pulled in the Title and Description fields but the caption is blank. WordPress galleries use the description field so this will do for now. Also, make sure to fill in the Alternate text. This describes the contents of the photo for blind users and will help Google better index your site. When you're done editing your photos, click Save all changes.
Your photos in the Media Library
Saving will take you to the Media Library. The Media Library seems fine at first glance. Notice that when you hover your mouse over a thumbnail you have the option to edit or delete a photo. But if you use a lot of photos, this interface could become unmanageable very quickly. We'll talk about solutions for that later.
For now take a look at the Attached to column. WordPress expects photos to be attached to posts or pages. Since we haven't done that yet, all the photos are Unattached. Simply click the Attach button and select a post or page to change the status.
Why do we care? Native WordPress galleries use this to information to identify which pictures to show on a given post or page. Generally, it's better to upload directly from a post or page. Let's look at how that works.
Add galleries to a post
Adding a simple gallery is easy in WordPress. Hopefully you are working on a development site and already know how to add a photo to a post. If not, check out the linked tutorials. It's important that you have a development site to make mistakes while you figure out which settings you want to use.
Upload photos to a post gallery
Create a new post. Give it a title immediately and save a draft. I'm going to call mine WP gallery.
Click the Insert photo button above the post editor.
A new window will open that will allow you to select all of your photos and upload them like we did on the previous page. This time, when you click Save all changes, a new Gallery Settings section appears. Change the settings on the top half of the window to match the image below. Leave the Gallery Settings alone for now.
Now lets examine the Gallery Settings.
- Link thumbnails to: Image file opens the large image in a blank browser window. Attachment page opens the image in a new page that look like part of your site.
- Order images by: Choose Menu order to use the order created by dragging.
- Order: Changing from Ascending to Descending will reverse the order of your gallery.
- Gallery columns: Indicates the number of thumbnails in each row.
Adjust your settings to match the image above and click Insert gallery to return to the post. Save the draft immediately.
Take a quick detour
If you look the Media Library, you will see that the images are all attached to the post WP gallery.
How the gallery appears in the post editor.
Return to the post and make sure the editor is in Visual mode, you'll see something that indicates a gallery has been inserted. It looks like this:
Now switch to HTML mode. You'll see text that says [gallery].
This is called a short code and is specific to WordPress. When you insert this code into a page or post, WordPress knows to make a gallery out of all the images attached to the post. Preview your post and it should look similar to this:
If you click a thumbnail image, the full image opens in a new, themed page.
Click the image for a larger version
Notice how your site's furniture appears around the image. This means that if you have advertising in your header, you'll get page views every time a photo is viewed. You can change the design by editing the templates and CSS.
Next we'll add a plugin to customize our photo galleries.
NextGen Gallery Plugin
The NextGen Gallery plugin adds new photo management tools and slideshow options to your site. Additionally, there are several great plugins that work with it to give you more tools.
Download and install the plugin
Download and install the plugin directly from within WordPress dashboard as shown below. If your web server won't allow you to do this, you will have to download the plugin manually and install it on your site via FTP. Make sure to activate it once it's installed.
Note that there is a new button at the bottom of the menu on the left called Gallery. Click that to access Nextgen Gallery. In the overview you can see that you have no images, galleries or albums. The photos you just uploaded aren't there because NextGen manages photos separately.
Add a new gallery and images
Click on Add Gallery / Images in the left sidebar. Find the Add a new gallery tab and create a new gallery called kittens. If your server allows it, NextGen will create a new folder in the wp-content folder named gallery. If not, you will get an error message and have to add the folder manually via FTP and try again. This is where your galleries will be stored from now on.
Once the kittens gallery is made, you will be given the option to upload images. Click Browse and select the same images we used previously. You also have the option of uploading a zip file or a folder of images. When the upload is done it should look like this.
Edit the new gallery
Just below the Add Gallery/Images button on the far left is a button labeled Manage Gallery. Click that and you'll see a list of galleries. This is where Nextgen Gallery helps photo management. Not only are photos organized into galleries and albulm, but all of their metadata is searchable from the Search images field.
Click on the name of your gallery to edit it. This will open a window with a lot of options. Start by changing the title and description to something that makes sense. Then change the preview image. When you have done this, click Save changes.
Next, go down to the images and click the Sort gallery button to go to a new page.
Now click and drag the thumbnails to reorder the gallery. I'm going put the grey kitten first. Click Update Sort Order when you're done and then click the Back to gallery button.
Edit the new images
Notice that in addition to the title and description, the keywords field in the image file was imported into the tags field, adding another level of information. Edit those fields to make them useful.
When you mouse over an image you get additional buttons, just like in the media library. Click on edit thumb.
This opens a new window. Click and drag on the image on the left to redraw or edit the thumbnail image. Notice that the proportion is locked. You'll learn how to change that when we edit the settings later on. Click Update when you are done.
Next to Edit thumb there's a button called Meta. Click that to open a window that shows all the information that was imported from the image file. Additional fields include copyright, author, author title. All of this information is searchable from the main gallery page.
Make a gallery page
NextGen allows you to make a page directly from the gallery editor. No need to make a separate post. Make sure Main page is selected and click Add page.
Important! This publishes a page and makes it public, so do this last. You will end up with a page that looks like this.
When you click a thumbnail, the page will darken and the users can click through a slide show.
There is a setting that we'll explore in the next section which sends the user to a page with a a click-through slideshow that automatically resizes to fit the content area and it reloads the page with each new click.
If you click on Show as slideshow you go to a new page where a slideshow plays automatically. It's small at the moment but we can change that in the settings later on.
Now click edit. This should take you back to the Kittens are cute page you just made. You should see a short code that says [nggallery id=1]. The number is the unique ID that NextGen assigns every gallery. So if you want to switch a gallery in a post, change the id number. You can find the id number in the main Manage Gallery area.
TIP: If you want the slideshow to appear in a post instead of a page, simply add the short code to a post.
Edit the short code to use a template
Did you notice that the default slideshow doesn't create new page views? Well, NextGen has a built in template we can use simply by adding a setting to the short code. Change [nggallery id=1] to [nggallery id=1 template=carousel].
This creates a click-through slideshow that automatically resizes to fit the content area. It also shows the side bar and reloads the page with each new click.
Next we'll look at the NextGen options/settings.
NextGen settings allow you to change many things about how slideshows work. Under the Gallery tab, look for the Options button. Notice that there are several tabs at the top of the window. Many of the settings are self-explanatory. We're going to skip those and concentrate on the ones you really need.
Gallery Path: We set this up earlier. If you ever want to change where photos are stored, this is where you do it.
Delete image files: Should be on by default. If you want photos to be deleted manually, make sure it is unchecked.
Activate Permalinks: This creates permalinks for individual photos in a gallery. Off by default but worth turning on.
Activate Media RSS: Always good to give access to your content.
Activate PicLens/Cooliris: This lets you use some third part slide show tools but they can direct traffic away from your site. I recommend leaving it unchecked.
The thumbnail settings give you control over the size and quality of every thumbnail that gets generated when new photos are loaded into a gallery. The Set fix dimension makes sure that all your thumbnails are identically sized.
Resize images: Nextgen will automatically shrink photos proportionally to fit into your content area. For example, a vertical photo will shrink to a height of 450 pixels with the above settings.
Image quality: A high setting will ensure photos are not over compressed but means file size will be larger. Experiment to see which setting works best for you.
Back up original images: If you plan on keeping an archive of your photos offline (and you should), you can leave this setting unchecked.
Automatically resize: Unchecked by default. Must be checked for resizing to work.
Cache single pictures: This creates a cache for WordPress so that it can build pages faster. Not essential for small sites but can really help as you grow. Check this box.
The gallery settings are very powerful but it's important to know that many of the settings only apply to new galleries made after changes have been saved. This prevents unwanted changes in pre-existing galleries.
Deactivate Gallery Page link: Applies only to albums
Integrate slideshow: This is checked by default and provides a link at the top of the gallery to view the auto-scrolling slide show we saw earlier. You can edit the link text in the provided fields.
Unchecking the box provides a click through slideshow called the ImageBrowser (shown below) when a user clicks a thumbnail. It automatically resizes to fit the content area and shows the side bar for additional ad placement and it reloads the page for each new click.
Show first: If you choose to turn on the Integrated slideshow, you can choose whether you want to show a slideshow or thumbnail gallery first.
Show ImageBrowser: Checking this will overwrite any effects you have selected on the next tab and replace the effect with the ImageBrowser.
Sort options: This sets the default sorting options for galleries. You can change the order of individual galleries without affecting the defaults.
The two default effects can change the look of your slideshows. When a user click on a thumbnail image the see these effects instead of the ImageBrowser. Users can click through but page views are not refreshed. Both filters will display the description text. For these to work, the Show ImageBrowser gallery setting must be unchecked. Pick one from the dropdown list.
You can set a default image or text watermark for your photos to protect your copyright. The watermarks are turned on/off on individual galleries and cannot be undone because they permanently alter the image.
The slideshow options are pretty self-explanitory. Just be careful not to get carried away with the transitions. There are addition setting on this pane but the defaults should work just fine.
Whew. That was a lot. Now lets look at some plugins that work with NextGen to provide additional functionality.
Nextgen Smooth Gallery
One way of improving the look of your galleries with a minimum of fuss is to add the NextGen Smooth Gallery plugin. It uses short codes similar to Nextgen. Once it's installed create a new post, give it a title and save. Then enter the [smooth=id:1;] short code in the HTML view. It will create a gallery that looks like this:
Adjusting the settings is much easier than in Nextgen. Installing a plugin creates a new settings tab called Gallery (Smooth) in the left sidebar. Let's take a look.
Width and Height: Sets the slideshow size.
Timed: Check to make the slides auto play. Delay is in milliseconds so the default of 5000 is actually five seconds.
Show Arrows: Places arrows on the left and right sides of the image so the user can click through.
Show Info Pane: Displays the Title and Description fields at the bottom of the image.
Show Carousel: Turn on/off the scrolling thumbnail images.
Carousel Options - Text: Changes the text in the tab below the thumbnails. Feel free to change it to something like SCROLL IMAGES.
Carousel Options - Text: Unchecking hides the thumbnails when the slideshow first loads but leaves a tab showing as seen here:
Embed Links: Allows link in a Title or Description field to open in the same page. If you have iFrame checked, the page will replace the slideshow in the iFrame.
Below General Options in the side bar there is another button labeled Specific options. This lets you have individual galleries that are different from your defaults.
All the settings are the same but when you click the Generate Code button you get detailed short code that you can copy and paste into a post.
More features are planned in upcoming versions so be sure to read the latest documentation on the WordPreass plugin page.
Next, let's add some user interaction with our photos.
Nextgen Gallery Voting
The Nextgen Gallery Voting plugin lets users rate galleries and photos. Like Nextgen Smooth Gallery, it integrates with NextGen photo management. You can either download an edited plugin with graphics that I have improved upon or you can download the original plugin from the WordPress site.
Set the Default Options
Once installed and activated, you'll see a new NGG Voting button in the side bar. Click it to set the default options.
You have the ability to allow voting on both galleries and individual photos. It's important to define your settings immediately because they will be applied only to new galleries. The settings are self-explanitory but in this case, we are only going to allow voting on individual photos because it requires extra work.
Create a new gallery
Create a new Nextgen gallery and call it voting. You'll notice that the same Voting Options have been added to this page and can be edited here. Leave them unchecked to use our defaults.
When that's done, upload some images and put them in the voting gallery.
Next, go to the Manage Gallery area and click on voting to edit it. Notice the voting options are also in the gallery settings and can be changed any time. Now take a look at the images. The image voting options are also available for editing.
Edit the Nextgen Gallery plugin
So here's where it gets a bit tricky. In order for voting on individual photos to work, we have to edit the NextGen plugin. Don't worry, this is pretty easy if you follow the steps.
Open the plugins menu on the sidebar and click the Editor button. You must be an admin and your server permissions must allow this. If you get a blank screen, you will have to edit the file via ftp.
On the top right there is a pulldown menu labeled "Select plugin to edit." Select Nextgen Gallery. A long list of files will show up on the right side of your screen.
Find the file named "nextgen-gallery/view/gallery.php" and click on it to edit. The resulting window should look like this:
Next, copy this line of php code. <?php echo $image->size ?>
Click inside the plugin code and select Edit menu -> Find in your browser, paste the code and search. Once you find it, look for the closing </a> tag that directly follows the php code. Put your cursor right after it and hit return.
Next, copy this bit of php code <?php echo nggv_imageVoteForm($image->pid); ?>
Paste it on the new line that you just created after the </a>. Click Update file and you're done.
Create a new post, call it voting test and save a draft. Add the Nextgen short code [nggallery id=4] then save and preview the post. You should be able to vote on each photo in the gallery.
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
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.
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.
Next edit your gallery voting page and add a link inviting people to submit their photos. And that's all there is to it.
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.
About this Tutorial
This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.