NextGEN Gallery Tutorial For Beginners
In this tutorial I’ll show you how to start with the NextGEN Gallery WordPress plugin. NextGEN Gallery is one of the best (free) gallery plugins for WordPress. After using it for a couple of my clients, I created this free tutorial because I feel there isn’t that much information about how to start with this plugin.
Overview of this post
- Why use NextGEN?
- Installation, activation and overview of NextGEN
- Add a new gallery
- Uploading images to a gallery
- Displaying a gallery into a page / post
- Displaying a gallery into a page / post without the button in the WYSIWYG editor (UPDATE May 2nd, 2013)
- Result
- EXTRA: adding the lightbox effect (UPDATE February 4th, 2013)
- Conclusion
Why use NextGEN?
There are a lot of free gallery plugins for WordPress. Some are better than others. I used several gallery plugins and found out that NextGEN is very good for the following reasons:
- Easy to use
- There are a lot of options
- It’s well developed
- The company behind NextGEN is constantly improving it.
Installation, activation and overview of NextGEN
You can install NextGEN like any other plugin. If you don’t know how to install a plugin then read my previous article “How to install a WordPress plugin“.
Be sure to select the right plugin, it’s called “NextGEN Gallery” by Photocrati.
After you’ve activated the NextGEN plugin, you’ll see an extra menu at the left of the dashboard:
Click on “Gallery” > “Overview” in the left menu to get an overview:
In this overview you can see how much Images you uploaded, and how many Galleries and Albums you created.
Add a new gallery
Before we can upload images, we have a gallery.
To add a new gallery go to “Gallery” > “Add Gallery / Images” in the left menu. The following screen will appear:
If you haven’t created a gallery before, then you’re in the right tab (“Add new gallery”). If you allready have created other galleries, then you have to select the “Add new gallery”-tab.
Fill in the name of your new gallery and click the “Add gallery” button.
Uploading images to a gallery
There are 2 ways to upload images to a gallery. You can upload images from a folder on our computer or you can upload a zip-file with images.
Upload images
This is the easiest way to upload one (or more) image(s):
- Go to “Gallery” > “Add Gallery / Images”
- Select the “Upload images” tab
- Click the “Browse” button
- Select the image(s) on your computer and click the “Open” button
- Select “Scale images to max width 800px or max height 600px” if you want to scale down the max size of the images (1)
- Choose a gallery and click the “Upload images” button
(1) You can change the max scale size in the screen of the “Image Settings” (select “Gallery” > “Options” in the left menu, then click the “Images” tab)
Upload a Zip-File
This way we can select 1 zip file containing a lot of images. I’m not a fan of this way of working: depending on your server settings, the max size of files you want to upload can be very limited.
To upload a zip file:
- Go to “Gallery” > “Add Gallery / Images”
- Select the “Upload a Zip-file” tab
- Select a zip file on your computer
- Select “Scale images to max width 800px or max height 600px” if you want to scale down the max size of the images
- Choose you gallery or create a new one (“in to”)
- Click the “Start upload” button
Displaying a gallery into a page / post
After you created a gallery and uploaded some images into that gallery, it’s time to display the gallery into a page or a post:
- Open an existing page / post, or create a new page / post
- Click on the place where you want to place the gallery
- Click the “Add NextGEN Gallery” button:
- In the popup screen that appears you select “Gallery” tab, choose a gallery and select how you want to show the gallery (Image list, Slideshow or Imagebrowser):
- Click the “Insert”-button
Displaying a gallery into a page / post without the button in the WYSIWYG editor
Some people mailed me that they couldn’t see the button to insert a gallery. There can be several reasons for this. That’s why I’m also going to show you how to display a gallery without this button.
After you created a gallery and uploaded some images into that gallery, it’s time to display the gallery into a page or a post:
- Go to “Gallery” > “Manage Gallery” in the left menu
- On this screen, take a look at the first column, here you can find the ID of your galleries:
- Note the number of the gallery you want to insert in a page / post
- Open an existing page / post, or create a new page / post
- Click on the place where you want to place the gallery
- Now insert one of the following tags:
Replace the id in the example with your own id!
Result
This is the result of inserting an image gallery in it’s most basic version. For a lot of users (and I’m one of them) the basic options will be just fine. If you want to change the options, just take a look at the options (select “Gallery” > “Options” in the left menu).
Example of an Image list
This will result in an overview of all the images in the gallery:
When you click on an image, the image will be shown bigger, with a dark grey background:
Example of a Slideshow
A slideshow shows one image a time:
To change the options of a slideshow, select “Gallery” > “Options” in the left menu, and then select the “Slideshow”-tab.
Example of an Image browser
An image browser also shows one image a time, but gives your visitor the possibility to browse through your images:
Note the “Back” and “Next” buttons!
Extra: adding the lightbox effect
A lot of people want to add the lightbox effect to NextGEN Gallery. Out of the box, this won’t work and the result is a lot of frustration. I’ve seen a lot of solutions on several forums, but none of them was a really simple solution.
The good news is that it’s actually pretty easy to add this lightbox effect to NextGEN Gallery!
Step 1: Install and activate WP Lightbox 2
WP Lightbox 2 is a plugin that adds the lightbox-effect to your images. Install WP Lightbox 2 and activate this plugin just as every other plugin.
Step 2: Select the lightbox effect
- Select “Gallery” > “Options” in the left menu
- Then, go to the “Effects” tab
- Select “Lightbox” at “JavaScript Thumbnail Effect” and click “Save Changes”
That’s it, if you now insert a gallery as image list, it should work!
Conclusion
I hope this tutorial made it clear how to create a new gallery and how to show it on your page or post. By now, you’ll probably know this plugin has a lot to offer. This makes NextGEN Gallery a very versatile plugin which can be used by beginners AND advanced users.
Hi, I’m Nico
I create web applications and WordPress websites. I also give WordPress training.
If you want to create your own blog or website, you’re at the right place!
Sign up and receive this guide
Subscribe to my weekly newsletter and get this eBook for free!
You'll also receive:
The latest tutorials and reviews
Exclusive articles and coupons
Most Popular on WPBrix.com
34 Comments:
thanks it really helped me setup nextgen gallery. i was looking around options but couldn't add galleries. thanks a lot.
@MyThailand Hi Ashish. I'm glad I could help. I just checked out your blog. Makes me want to travel to Asia again :-).
I've just installed the latest version of NextGEN, made a gallery, and uploaded a bunch of images into it--and then *none* of those images have a thumbnail generated for it (all broken image links). I tried selecting some of the images and using "create new thumbnails", but then the GN systems says "a failure occurred" ... so I have no thumbnails!
I'm using "Catch Box" theme, tho I also tried deactivating *all* other plug-ins and changing theme to standard WP "2012" theme ... and the problem still persists.
WordPress is up-to-date and NextGEN plugin is up-to-date. Hosting is with Godaddy, running PHP 5.5 (not sure about the MySQL version, mod_rewrite, or PHP safe mode ... nothing has changed from standard Godaddy setup, so should be fine?) Everything else about NextGEN appears to be running fine ... so what could be causing this thumbnail issue?
@miquael Hi Miquael, this could be a memory problem. You should try the following possible solution: http://www.visser.com.au/blog/thumbnail-generation-php-memory-limit-nextgen-gallery/. If this doesn't work, try this: http://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP. If there's no solution, just let me know the full error you're getting. Nico
Thank you so much for this tutorial. I was looking for this kind of step by step from the makers and glad I found it with you. I have one question. Is there a way to get the images to center in the page when the slideshow option is chosen? The slides all come up left justified and I would like them to be centered.
Here is a link to the page: http://borntwo.s482.sureserver.com/?page_id=138&show=slide
I am using it with headway themes.
thank you
Copperwoman
@Technowitch The only way to solve this is to change the html / css. You'll find some examples if you google on "nextgen slideshow center images".
@Mike Early Hi Mike, it depends on how much galleries there are. The simplest method is to insert a simple thumbnail via Insert Media.
Thanks for helping the newbs out! I am building a wordpress site for a client, this is the first time I've used wordpress, and am using nextgen for galleries. The client wants to have multiple galleries--e.g. one for each event he runs (gaming events). I have created a gallery and uploaded photos to it, got all that down. I want to have a single 'Page' in the main main navigation, called 'Galleries', and then on that page, have a link/thumbnail to each individual 'gallery' containing one event's photos. How do I do this?
J DeVore: I'm glad you found a solution!
Nico: Thanks for your response. I actually found a workaround. I moved the arrow buttons above the photo gallery. It's not perfect because the photos aren't completely on screen (the bottom gets cut off a bit), but it is a lot better because you don't have to constantly scroll. Thanks!
Hi J. DeVore, thank you for you question. The thing is: the imagebrowser generates an action, you can compare it with a button at the bottom of a form: when you press it, the page reloads. Well, the same thing happens here, the page reloads after you press the "back" or "next" button. Maybe there is a solution, but in your case I would search for another plugin. What do you want to do with it? Do you have an example? Nico
I haven't been able to find a solution to this problem. I want to use the imagebrowser setting, but every time I click the arrow to look at the next photo, it takes me back up to the top of the page and I have to scroll back down to the image gallery. I found other forums that discussed changing the imagebrowser.php page by adding an anchor, but in each of the forums, the end result was that the code that was posted didn't work. Many thanks for any assistance that you can provide.
Hello, Good tutorial. I am trying to have the pictures pop up, with a "next" on the top right side, without going to another page...NextGen examples show that you can do this, however I have had no sucess...please help
Hi TarryP, I added a short part about how to add the lightbox effect. Hope that solves your problem.
Hi TarryP, do you mean the lightbox effect? This doesn't work very well (or it's complicated to get it work). I'll contact the authors for a decent solution, because a lot of people have the same problem.
Thanks for the awesome tutorial!! I have a request by my client that the images on their home page slider (using NetGenn) be "full width". Do you have any links or resources or information to help me to know if NextGenn can accomidate?
Hi Angela. thanx for you comment! For a home page slider, I usually use a slider like Nivo Slider (http://nivo.dev7studios.com). But there are also sliders who work with NextGEN. For example NextGEN Flex Slider Template (http://wordpress.org/extend/plugins/nextgen-flex-slider-template/) or JJ NextGen jQuery Slider (http://wordpress.org/extend/plugins/jj-nextgen-jquery-slider/).
Thanks so much for the tutorial. I'm hoping you can help with an aesthetic issue I'm having. I'd love to display photos in the image browser setting, but don't want the title to show above the photos. I can't leave the title blank, though, because I need to be able to create slugs to easily find file art when necessary. Is this a fixable problem? Or am I just going to have to live with the title above the photos? Thanks for any help you can give!
Hi Nicole, thank you for your comment. I think this could solve your problem: http://wordpress.org/support/topic/nextgen-gallery-remove-title-from-image-browser
Sorry I should have share some of the specifics on the configuration. It's the only gallery on the site (so far anyway). I don't have a description for the gallery itself. It's link to the home page (I use a static page for the blog). Each image is exactly the same size. Each image has the Alt & Title Text and a Description. None of them have tags. NexGen config settings are all set to the default except: General:Max. No Images: 10 Gallery Settings: Show first: slideshow Today I was wondering if the default setting under effects is causing the problem. It's set to: class="shutterset_%GALLERY_NAME%" I tried updating it to class="shutterset_%GALLERY_NAME%" template="caption" I deleted the code on the page and re-added the slideshow; that didn't do anything. I put the template="caption" back in the code on the page and updated the page. Still did nothing.
Hm, this looks likes it’s a problem in Nextgen. I looked around but can’t find a proper solution for this problem…
Thank you so much for your tutorial. It helped me set up my first slideshow. But I'm having problems. I'm using Nextgen on the lastest version of Wordpress, with the Bouquet Theme at hfirepro.com. The slideshow is on the home page. I've checked the settings and everything looks ok compared to your tutorial, but I still have an issue. I can't get the captions to display. I've researched this issue and found a place that said to add template=caption. I tried that and it didn't do anything. So I don't know what I'm doing wrong. Any help would be appreciated.
Hi Springwolf, thank you for your comment! Did you fill in a description for those images in the image slideshow? Because that should solve your problem. Kind regards, Nico
Hello and thanks for the tutorial! I have the Nextgen Gallery and Nextgen Resizer plugin as well. I have a small problem... when I upload my gallery thumbnails to a page, the photos come out all different sizes?? I'm not sure what I'm doing wrong. my site is emilymccloud.com > makeup portfolio tab What I want is to be able to create a little larger gallery photos than the default size Thanks for any advice
Hi Gary, I'm VERY sorry for this late answer. You don't need the Nextgen Resize plugin because Nextgen has a built-in function to resize images when uploading. Even more, the Nextgen Resize plugin hasn't been updated in over 2 years, so I advise you to remove it! With Nextgen, you can also set up a resize function: Go to "Options" > "Images". There you'll find the resize options. The reason why these images will differ from size is because Nextgen (and also Nextgen Resize) doesn't change the ratio of the resized images. If you need all the images to have the same size, it's better to do changes yourself in software like Photoshop or Gimp. For the makeup portfolio tab I advise you to upload those photos again, to a new gallery. But first, remove the Nextgen Resize plugin and update Nextgen to the latest version. Otherwise you won't see any difference. Also, check the options of your thumbnails: go to "Options" > "Thumbnails". Be sure you check the option "Ignore the aspect ratio, no portrait thumbnails"!! Hope this helps!
I already tried to install 3 times this gallery and everytime happened the same thing... eh only opinions at the Gallery menu are: Roles, About anda Reset/Uninstall... what can I do?
Hi Tim, which other plugins did you install? Did you install a membership or roles-plugin? And to be sure, you have this problem with the administrator-account? Nico
yeah... the problem is with the AWM Plugin... now i have another problem... how can i limit the access of the subscribers to just their profile?
Hi Tim, I think you should check some options in AWM. I just installed AWM in a test environment (without changing any setting) and the Gallery plugin just worked.
have a lot of others plugins but i have the AWM Access Managerto grant or limit access to some users or groups... i'll deactivate it and test...
Thanks for the response Nico and for the link :) I'll definitely give NextGEN a try because I'm trying to store and organize a lot of pictures :P
No problem, glad I could help!
Great tutorial on this WordPress plugin. Do you know if NextGEN takes up a lot of system resources though?
Hi Khays, the thing is that NextGEN is called every time a page or post is accessed by a visitor. James Johnson wrote a blogpost about this and how you can solve this (using a plugin called NextGEN Gallery Optimizer):