wordpress: 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.

search for and install nextgen plugin

 

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. 

upload nextgen photos

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. 

nextgen list

 

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.

edit Gallery

Next, go down to the images and click the Sort gallery button to go to a new page.

sort gallery

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.

image description

 

When you mouse over an image you get additional buttons, just like in the media library. Click on edit thumb.

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.

edit thumb window

 

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. 

meta data

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

create 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. 

nextgen gallery

When you click a thumbnail, the page will darken and the users can click through a slide show.

nextgen lightbox

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. 

shutterset


 

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. 

nextgen slideshow

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.  

nextgen carousel

Next we'll look at the NextGen options/settings.