Tutorial for using NextGEN Smooth Galleries in WordPress

These wonderful NextGen JavaScript photo galleries work perfectly in WordPress (WP) using two plugins.

Here are two examples of the galleries:
An example of a NextGen Gallery on a home page.
An example of a NextGen Gallery in a post.

I want to point out that these galleries will not pass current HTML or CSS W3 standards. They have been tested and work on the following browsers: IE7 & 8, Firefox 3 & 3.6, Safari 4 and Crome4 & 5.

Step-by-Step Guide

1. Download these two plugins and activate them. You need both to make the gallery work.
NextGen Gallery
NextGen Smooth Gallery

2. In WordPress set up the general options for NextGen smooth gallery.
After selecting your general appearance options. I will explain it in more detail later. You must select the IFrames option to have the gallery appear on the home page .

You have two options for inserting the code in your site. I used the “Write on your post” option. I used the full code so that each gallery’s options can be customized—for example the size.

Code generated by the Smooth Gallery plugin.

3. Add a Gallery.
I had more control over the final result by cropping and the sizing the images to be the same dimensions as the gallery. For images that did not fill the full space of the gallery I added the additional background to the image prior to adding it to the gallery.

Image with background added

There are several options for adding your images to the gallery. Again I opted for more control. Therefore I uploaded a folder with the images in the “gallery” folder in the “wp-content” folder using FTP.

I named both the folder containing the images and new gallery in WP the same. I found using this method that I could manage the images more efficiently when adding, deleting or updating images.

The “Manage Gallery”
Each gallery is auto-assigned an all-important ID number by WP as each gallery is added to the site. This is the number you will be placing in the code.

ID number is auto-assigned by WP.

Here you can see the path to the folder. Scanning the folder will update the gallery of any changes to the images in its assigned folder.

Gallery and folder both have the same name.

Shown here is the correlation of the gallery elements in these screen grabs of the online gallery, a section of the “manage gallery” and the code.

Correlation between online gallery, WP interface and code.

4. Place the gallery online.
Place the gallery in a post:
Take the code either short or long and place it in the body of your post. Change yyy to the gallery’s ID number. For the Fève site I wanted a thumbnail not the NextGen Gallery to be used with the post’s excerpt throughout the site. Therefore a separate image had to be assigned as thumbnail image to each post.

Place the gallery on the home:
This is a bit trickier and requires yet another plugin—Advanced Text Widget. This plugin will allow you to place PHP code in a widget. After downloading and installing the plugin drag an Advanced Text widget to a section of your site. For the Fève site I wanted the gallery to be before the content only on the home page. For this gallery I needed to use the PHP code provided in the Gallery Smooth Specific Options. Because I used the PHP code I had to use the iFrames option in the settings or the gallery would not appear on the page. Widget Logic plugin was used to place the gallery only on the home page.

Advanced Text Edit Widget

5. Style your galleries with CSS.

That’s all there is to adding these great galleries to your WordPress Web site.

Your comments are welcome.