The NextGen Gallery plugin is the perfect solution for WordPress users that need an attractive and versatile way to display their images online. This tutorial will guide you through setting it up and how to create your first gallery similar to the one below. The NextGen gallery is easy to use and feature rich. The included screen shots will help you quickly locate those features and what settings to use, with brief explanations to help you customize your gallery. Most screen shot images will open larger for better viewing when clicked.
You can download the NextGen plugin from the WordPress site HERE, then upload it to the Plugins folder of your WordPress site and activate it.
Over on the left side of the WP Admin area at the bottom, you’ll see a new heading for “Gallery”.
Choose “Options”. This is where you will set up how NextGen will display the gallery and has many options that you only need to set once. Under “general options”, I left the default gallery path, put a check mark next to “Delete files when removing a gallery”, and unchecked the box for “activate PicLens/CoolIris” option since I prefer to use just one simple option for visitors to view images. I left the Max number of images to 0 so all images will be shown. You can set how many are displayed on the page under the Gallery option later. Save changes.
This is where you set how the thumbnails will be displayed. You can set the maximum width and height. I chose to display the thumbnails as square and 75 px for height and width. There’s a check box for “Set fix dimension”. If you want square thumbnails, or whatever width and height dimensions you chose, then you should check this box. If you want vertical (portrait) or horizontal (landscape) thumbnails, depending on the actual image ratio, then you’ll want to un-check this box. Save changes.
If you upload images that need to be re-sized for the large image display, set those parameters here. These will not be applied automatically, but will be an option when you create each gallery. Set the largest size for width and height. NextGen will not distort images, but will keep them within these pixel limits. You can also adjust quality for the large image. This will compress the image and help them to load faster. An image quality of 70%-85% is good, anything less than 70% might be pixelated. Save changes.
I chose to have the gallery on the same page, so that box is checked. You can set the number of images shown on the page. In the sample below, I have it set for 10. If I had more than 10 images in the gallery, there would be page numbers right below the gallery for the viewer to scroll through. If you check the box for “Add hidden images”, then if you add more than the max number of images per page and have more gallery pages, the large image display will still show all the images in the gallery, rather than just the images on that page.
You may want to add a watermark onto your images. There are two ways to do this. One is through the NextGen. This option will be available for galleries when you create them. You can customize it now or later. You can add fonts, images, adjust opacity, and align the watermark wherever you want. The X and Y attributes are for distance in pixels from the right side (X) and the bottom (Y). The thing I don’t like about this is that the preview is deceiving since it is not the same size as your large image, and once the watermark is added, it cannot be undone once you’ve applied it to the gallery images, and you’ll have to start over if you’re not happy with it. The other method is through Photoshop, which is how I did it for this tutorial. The watermark will also be visible on the thumbnails doing it this way which may or may not be important to you. A separate tutorial which includes resizing images and creating a Photoshop action to do it this way is available on this site here.
This feature is an extra that is not included with the plugin. Links are listed on the page if you want to include the slideshow.
HOW TO CREATE A NEXTGEN GALLERY AND INSERT IT INTO A PAGE OR POST
NextGen gives the option to upload a whole folder of images at once. Since this plugin shines for multiple image displays, this is how we’ll do it. Copy the images you want to display into a new folder. Because uploading a folder full of high resolution files would take a long time and waste space on your server, you should resize the images for online display. Make sure they are jpeg files. Zip this folder of images.
Under the Gallery heading on the left side of the WordPress control panel, click on “Add Gallery/Images”. Then choose “Upload a Zip-File”. Browse for the folder on your computer and upload. Upload them into “a new gallery”. The plugin will unzip the folder and add the images with the same filename as the image folder. You can edit this if you want, but it’s not necessary. Start the upload, and it will give you the message that the upload was successful. If you get an error message about exceeding any memory, upload, or size limits, you may need to adjust your php.ini file located in the root of your server. At the end of this tutorial I’ll post more information about that.
You will see all galleries that you have uploaded. The ID number is how NextGen will identify the gallery you want displayed. More on that later. Click on the title for the new gallery. The following window will open:
How to Resize Large Images
First we’ll re-size for the large image display using the dimensions you . If you already sized your images for the web, then you can skip this step.
Check the box for ID and all gallery images will be selected. In the drop down menu directly above this box, choose “Resize images” and “Apply”.
How to Customize Thumbnails
Next, roll your cursor over the bottom of each image’s window section to adjust the thumbnail preview. It’ll appear in the area where the red circle is below. Choose “Edit thumb”. A pop up window will open. Crop the image on the left to how you want your thumbnail to be, and select “Update”. A preview of the new thumbnail will be on the right. If you’re happy with the default settings, you can skip this step, or just edit the thumbnails on the images you don’t like the default cropping.
The Alt & Title Text / Description information can all be edited. Those fields are good for SEO (Search Engine Optimization) if that is important to you. If you have a Description in the File Information embedded in the image’s metadata, it will automatically be added into these fields. This will also be in the image’s caption for your viewer to read under the large image display.
How to Embed the Gallery into Pages or Posts
Wherever you want the gallery to appear, just add the code [nggallery id=X], wrapped in square brackets. The X is the number of the gallery as found on the Manage Gallery page. The sample gallery for this tutorial is 3, so the code inserted at the beginning of this post looks like this: [nggallery id=3], and here is a screen shot of the top of this page as it looks in the Visual editor for WordPress. The code works the same if you use the HTML editor.
SOLUTION: HOW TO GET THE THICKBOX FEATURE TO WORK
If the large image opens on its own page rather than as a dynamic overlay, you can try the following which should fix it. First, go into your WordPress themes folder found in the wp-content>themes>YourThemesName, and download the files footer.php and header.php. This way, if something goes terribly wrong, you can re-upload these original files and things will be back to how they were. Now in the WordPress control panel under Appearance>Editor, open the file “footer.php” and look for the code:
<?php wp_footer(); ?>
If it’s not there, you’ll need to add it. If your footer.php file looks different than the screen shot sample below, then just add the code to the very top of that file. If it still doesn’t work, open the “header.php” file the same way and make sure the line of code is there:
<?php wp_head(); ?>
It should be somewhere before the </head> code. If you don’t have it, copy it from here and paste it right above the </head> and update the file. The code was already in my header.php file, but evidently it can cause the Thickbox feature to not work if it’s missing. If you don’t want to deal with these adjustments, the Shutter feature does work nicely.
SOLUTION: HOW TO INCREASE THE UPLOAD LIMIT ON YOUR SERVER PHP.INI FILE
The upload limit is listed on the window where you upload the zip file of images. You will need to access the php.ini file which is in your server’s root directory. Not all providers allow access to this file, so if you can’t find it, call your provider and ask them to increase these limits for you. Below is an example of where you should find it on your server. It affects global settings for your server, not just your WordPress blog, but that generally isn’t a problem. When you upload files to your site, the highest directory is the root. Look for the file in this section.
If you find it, download it to your computer and open it in a text editing program. Select all, copy and paste the contents of this file into a new document to save in case you run into problems and need to go back to the original.
In the php.ini file, you’ll want to check and adjust these 3 settings:
I have all three of these set at 64M, which works well. I did not make any other changes. Examples below show 3 screenshots of my php.ini file with the lines numbered showing their location in the file, along with surrounding information to help you locate the codes. Yours may vary.
Save this file as the same name, php.ini, and upload it to the same place, overwriting the one that’s already there. Go to the NextGen “Gallery>Options>Upload Zip-file” and see if your upload limit has increased to 64MBytes, and that there are no other limits listed there. If something goes terribly wrong, just go back to the original you copied and saved, and upload that. Hopefully this will work for you as well as it has for me. If not, then contact your provider since all servers are slightly different in how they set up hosting for their clients.
I hope this tutorial helps other WordPress users and Photographers make good use of this wonderful photo gallery plugin.