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

Picture5

OPTIONS

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.

Picture 6

OPTIONS>THUMBNAILS

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.

Picture 32

OPTIONS>IMAGES

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.

Picture 11

OPTIONS>GALLERY

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.

Picture 16

OPTIONS>EFFECTS

This sets the way the large images are displayed. It’s called the “JavaScript Thumbnail effect” and you have two built in options with this plugin – Shutter and Thickbox. There are more options in the drop down menu, but they would need to be added manually. Shutter is the default and is fine, but I prefer the Thickbox. I did however have a little problem getting it to work. You’ll know when you click on the thumbnail in the gallery and it opens in a new page, rather than as a dynamic overlay. It was easily fixed by opening the WordPress Appearance Editor and I’ve posted the details at the end of this tutorial.

Picture 17

OPTIONS>WATERMARK

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.
Picture 34

OPTIONS>SLIDESHOW

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.
Picture 23
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.

Picture 22
Next click on “Manage Gallery”.

Picture 24

Picture 26

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:

Picture 27

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.

Picture 30
Picture 31

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.

Picture 33

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.

Picture 19

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.

Picture 41
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:

  • memory_limit
  • post_max_size
  • upload_max_filesize

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.

Picture 38

Picture 42

Picture 39

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.

Be Sociable, Share!

[Post to Twitter]     [Post to Digg]    

16 Responses to “How to Use and Customize the NextGen Gallery Plugin for WordPress”

  1. Do you know if there’s a way to change the way the larger images show up? My client doesn’t lke the default “pops up and blacks out the window behind it” thing …

  2. Thank you for your very helpful article and tutorial.
    I am having a problem in having the right thumbnails present for the Facebook share.
    I am using NextGen gallery and NextGen Smooth – the slideshow and all other aspects of the plug ins seem to be working well HOWEVER
    The Simple Facebook share plug in worked well when I only had a few posts. As I have added more galleries, and posts, when I go to share the latest post using the Facebook Share button – it consistently presents 4 thumbnails from completely different and earlier galleries that I posted weeks ago (2 images from 2 earlier galleries.
    I added the plug in “add image_src Meta tag” as well as ‘Facebook and Digg Thumbnail generator’ and there has been no change it still does the same thing. HELP PLEASE
    http://www.beadscrystalsandmore.com/blog/
    Your assistance would be most appreciated.
    Thank you
    Rich

  3. susan ryerson Says:

    hi,
    i was actually interested in one of your images to use on my new product media, the holding hands in the sunset one. do you sell these images?
    Thanks,

    Susan

  4. Hello Susan,

    Thank you for your interest in my photos. You can license that image through my couples gallery RF at http://www.istockphoto.com

    Have a great day!

  5. Great article! Thank you!

  6. I have been using NextGen for a few months and been having a few problems with it, when I click on the image it opens on another page. After reading this article I did what you suggested, I added the extra code in the footer and now Next Gen works perfect.

    Thanks for posting this its helped me alot. :)

  7. Hi, good article. Thanks. I found your site searching for nggallery and print-friendly. I would like the nggallery thumbnails to be available in the PDF / on the print-out. I see you use both plugins too, but noticed it does not work or your page either. Any suggestions on how to fix that?

  8. Hi

    A good tutorial thanks but I want to make my gallery like your one above with no text under the thumbnails but text under the big image on the overlay.

    Any ideas?

    Thanks

  9. Thank you for the tips! Just got this setup last night on my blog at Civil and Structural Engineer Blog

  10. Thank you for posting — this is the best primer on Nextgen gallery I have found and it was very helpful. Their own documentation leaves a lot to be desired.

  11. Hi Cindy

    Thanks for the tutorial, really useful reading. I have installed NextGen but not used it yet. Is it possible to click on a thumbnail within the gallery and it opens into a new wordpress page which an image and where I can write lots of blurb about the product?

  12. Can you please tell me how to change the colour of my text in the Alt & Title Text / Description.. as it’s currently white and you can’t read the text? Thank you in advance.

  13. Looking for a way/plugin to let visitors comment on individual photos in a NEXTGEN gallery. Any ideas?

  14. You could try using Gallery instead of NextGen if you want visitors to be able to comment on individual photos. It’s not a plugin for WordPress, but it is free, and you could include it on your site and link to it from your WP. It has a lot of useful features. More info here: http://generatex.com/

  15. I have a Gallery with 100+ photos in it. When I open the page eg ‘Houses’ the thumbnails for page one is shown, with other page numbers below. My problem is that when I click on Page 2, I end up somewhere else, not page 2. I assume there is something I’m overlooking in the settings, but so far I can’t find it. Any help appreciated.

  16. Doug I’m having the same problem very frustrating, some galleries work others do not. Can not fine the problem…. Hlpl please

Comments Welcome

*