NextGEN Gallery Tutorial For Beginners

In this article 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, and in my opinion it is the best. 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
  • Examples
  • What’s next?

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 following reasons:

  • Easy to use
  • There are a lot of options
  • It’s well developed
  • The author is constantly making it better

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:

Installing NextGEN

Once installed,  don’t forget to activate the plugin.

After you’ve activated the NextGEN plugin, you’ll see an extra menu at the left of the dashboard:

NextGEN Gallery left menu

Click on “Gallery” > “Overview” in the left menu to get an overview:

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 to create our first gallery.

To add a new gallery go to “Gallery” > “Add Gallery / Images” in the left menu. The following screen will appear:

Add a new gallery

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 images:

  • Go to “Gallery” > “Add Gallery / Images”
  • Select the “Upload images” tab
  • Click the “Browse” button
  • Select the images on your computer and click the “Open” button
  • Choose a gallery and click the “Upload images” button

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 because depending of your server settings the size of the zip file 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
  • 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
  • (Put the cursor on the place where you want to display the gallery)
  • Click the “Add NextGEN Gallery” button:
    Add gallery to page or post
  • In the popup screen that appears you select “Gallery” tab, choose a gallery and select how you want to show the gallery:
    Insert gallery
  • Click the “Insert” button

For examples of how the galleries will look like, please take a look at the next part (Examples).

Examples

In this part I inserted the same gallery 3 times, but the first time I selected an “Image list”, the second time a “Slideshow” and the third time an “Imagebrowser”.

Example of an Image list

Example of a Slideshow

Example of an Imagebrowser

ninja_duck

Picture 1 of 4

What’s next?

So, I hope you understand the basics of the NextGEN Gallery plugin by now. In one of my next articles I’ll write something more about the available options of the NextGEN Gallery plugin.

 

Related Posts

About Nico Julius

Nico is a teacher, developer and likes to share his ideas and vision on WordPressNinja.Com
  • http://www.novasinapse.com Alexandre Mello

    hei men, maybe u can help me…

    I apreciate your tuto, and install nextgen on my new site, in this page:
    http://evento1.novasinapse.com/galeria/

    although I inserted the code using “Nexgen Button”, I can´t switch between slideshow and image gallery formats, like sugested on a plugin.

    Do u thinks it´s possible Javascript conflict? What can u sugest?

    Thks

  • http://www.novasinapse.com Alexandre Mello

    hola,

    One more thing…

    When I tested the iMAGE bOROWSER format, the “next” and “previous” button are correctly pointing for URLs, but if you click, nothing happens…

    Something weird on.

    Thks again

    • http://www.wordpressninja.com Nico Julius

      Hi Alexandre
      Thanx for your comment!
      I just tested you page and I had the same (weird) result.
      Do you have the latest versions of WordPress / NextGen?
      Do you have the same result with only the image browser on that page? Maybe you should try that first, without the other galleries on that page.
      Greetings
      Nico

  • http://www.novasinapse.com Alexandre Mello

    Ola,

    Using only “image browser mode” and “wp default Twenty Ten Theme”, same result.

    Maybe my fault, but I couldn’t get the best of this plug.

    Alexandre

    • Akshy

      agree

  • http://www.facebook.com/javifloresi Javier Flores Ibarra

    Check out your slideshow buttons i have the same issue with WordPress 3.2.1.

    • Anonymous

      Hi Javier, thank you for your comment. What’s wrong with my slideshow buttons, because I don’t experience a problem.

  • Springlering

    Thanks bunches for the tutorial. I fooled with the darned thing for three hours trying to figure it out. Didn’t even notice the “gallery” button. Was trying to use the media button to do it.

  • Ralph Thomas

    This has to be one of the best tutorials i have ever seen.
    I learned more than I expected by using dual screens and following your steps as they were presented.
    I sincerely appreciate your effort in putting this tut together.

    • http://www.wordpressninja.com Nico Julius

      Hi Ralph, thanks a lot for this nice comment!

  • Lluc_gelabert

    Hi,

    the slideshow cut the image style (white border). I try repair whit teh css changing overflow to visible, but not work. There are somethings that’s change it.

    -My css
    .ngg-slideshow {
    overflow:visible;
    position: relative;
    }

    ——–
    And this change the image

    element.style {
    height: 150px;
    overflow: hidden;
    width: 900px;
    }

    where i can find this code?

    sorry for my english and thanks

  • SoftsTech

    Thanks dude. I understand well. I was much confused how to use it but now reading your article i have just created my first gallery. Take a look at my gallery please. http://www.softstech.com/?p=379

  • http://www.facebook.com/people/Arved-Grass/1095429864 Arved Grass

    “Imagebrowser” jumps back to the top of the post when you click forward or back, forcing the viewer to rescroll through the post. This is less than desirable. Is there a workaround so it doesn’t jump back to the top?

    I was also looking for a tutorial on installing and using templates. This tutorial was one of the top hits on google, but obviously doesn’t address it – doubt anything lower ranked would, either. The field is wide open for a template tuturial! Hint hint…

  • http://latestpricelistindia.in Parag

    Can anyone please help me !!! how to give horizontal spacing to a singlepic image ??

    For eg : [singlepic id=35 w=150 h=150 float=left]

  • Tectonafurniture

    thx so much for this tutorial

  • http://www.0968797090.com.tw 蘇丞泰

    Good

  • Turiya Moore

    Thanks for a great tutorial!
    I hope you can help me. I have followed your instructions but my gallery is not displaying correctly. I am using Nextgen with WP Shopping Cart. It all looks good but the last two items of the gallery are separated from the rest as if there is a space in there. Do you have any idea what I can do? here is the page:
    http://joyiswithinyou-org.anandagrassvalley.org/store/meditation-bench/

    Thanks.

    • http://www.wordpressninja.com Nico Julius

      Hi Turiya
      I just checked out your site, looks great!
      I don’t have experience in NextGEN gallery combined with WP Shopping Cart. The best place to this kind of questions is the official WordPress forum. Here you find the forum of the NextGEN Gallery: http://wordpress.org/tags/nextgen-gallery?forum_id=10
      The creator of the plugin also checks this forum to answer questions.
      Nico

      • Turiya Moore

        Thanks. I have been trying over there but no luck yet. It’s cool, something will turn up.

        have a great day.
        t

  • Karl

    Hi Nico,

    Good tutorial. I’m using NextGen in a gallery for a client who wants to have a single picture displayed, but have the lightbox show up when clicked. Any idea on how to do that?

    Thanks,

    Karl

    • http://www.wordpressninja.com/ Nico Julius

      Hi Karl, maybe you could give the WP jQuery Lightbox plugin a try. You can find it here: http://wordpress.org/extend/plugins/wp-jquery-lightbox/
      Just insert an image in your post, switch to the HTML view, and add the attribute rel=”lightbox” to the image link.
      Hope this helps…

      • Karl

        Thanks, I’ll give it a gander. Happy new Year

  • Cindy Clark

    I want to put the images I already have in the WordPress library into Nextgen Gallery, how do I do that?

  • Lia

    excellent

  • http://www.labelandthread.com/ Theresa Robinson

    Hi Nico,
    I’m having cross browser issues with nextgen gallery and IE. I’m looking for a nextgen expert to help with this. Is this something you would know anything about? or do you know any nextgen experts that could help?

  • Info

    Thanks, I’ve been trying to figure out for a while where was the button to insert the gallery into a page. Problem Solved :-)