How To Create NextGen Gallery and use Gallery Templates

A NextGen Gallery is a way of grouping  images. It is a usual practice to create gallery of an event and place all photos of the event in that gallery. You can watermark, resize and rotate any one image or all images in a bulk. You can visit our post on resizing bulk images in a gallery. NextGen provide number of ways to displaying a gallery or an image  through shortcodes. [nggallery] shortcode is the most commonly as it has a pretty handful feature of gallery templates.

In this tutorial, we will show you how you can add a gallery and use Flux slider template as an example to customize the gallery. We assume that you have already installed NextGen Gallery.

1. Click on Add Gallery from left Menu under “Gallery” menu.

click add gallery menu

Click on “Add Gallery” menu

2. We have several options to add gallery. Lets go with “Add Gallery” tab and click it. Specify a name to Gallery and Click “Add Gallery

Add Gallery

Add Gallery

3. Please browse and select single or multiple photos. Make sure your also select your gallery from the drop down. Press “Upload Images” button. You will see a progress screen and notification when it is completed.

Upload Photos/Images

Upload Photos/Images

4. Now Click on “Manage Galleries” in the left menu under “Gallery”.

Click on

Click on “Manage Galleries” menu

5. Please note down the Gallery ID in the first column. This what you are going to use in the [nggallery] shortcode. Click on the title of your gallery to edit or view it.

Manage Galleries Screen

Manage Galleries Screen

6. You will now see all of the images you have uploaded. You can apply operations (watermarking, resizing, rotation etc) on them and specify title, tags and description that can later on be used by gallery templates.

Displaying all images in selected galler

Displaying all images in selected galler

7. To use the power of gallery templates, you need only two things ID of the gallery to show images from and Template to apply. You can find the Gallery ID from point (5) above. Lets use the flux slider template

7.1. Install NextGEN 3D and 2D Animated Flux Slider Template plugin from WordPress Repository

7.2. Use the following shortcode in your posts or pages.

[nggallery id="2" template="3dfluxsliderview"]

where “2″ is the ID of our gallery (see number 5 above).

7.3. That’s it.

19 Responses to How To Create NextGen Gallery and use Gallery Templates

  1. Testing_NextGEN says:

    Hi,
    I’ve just downloaded plugin and installed it, but I am not able to add a gallery. The tab Gallery on the left panel is not shown.
    Can you help, please?
    Regards

    • Grant Davis says:

      I believe, you did not install NextGen Gallery plugin. Please search for “nextgen gallery” in “Plugins->Add New” or download from here to install it.

  2. Christopher says:

    Hello your 3d slider plug in is not working on my website plese help thank you

  3. I also installed this plugin, but no luck. It just display the pictures on my gallery one after another.

    • Mohsin Rasool says:

      It happens when queued javascript code does not execute on page load due javascript errors raised by other plugin or theme. If you can send me the test URL I would be able to suggest a better solution.

      • Donald says:

        Hi, the “slider” is on the “Rates” page and it won’t display the slider , I wanted to use the 3D bars. The images just end up under each other. I am using the Directory Press theme, which has some semi built in plugins. I also had the News Slider installed, I have since removed it, but still same problem. I used the [nggallery id=1 template="3dfluxsliderview"] shortcode. I am not really understanding the settings page…do you uncheck the layouts you don’t want to use and only check the one you want to use?

        The support that I have found only say , paste shortcode as I have and then go to settings and it works….it has no other directions, so being new to this, I just know I am doing something wrong.

        Any help will be appreciated.

        Thanking you

        • Mohsin Rasool says:

          You can try following code it fixes for some WP installations. Paste it in your theme’s functions.php

          remove_filter( ‘the_content’, ‘wpautop’ );
          add_filter( ‘the_content’, ‘wpautop’ , 99);

      • Jason D says:

        I am having the same issue all the sliders appear one after the other.

        • Mohsin Rasool says:

          Please, check javascript console for any errors.

        • Mohsin Rasool says:

          You can also try following code it fixes for some WP installations. Paste it in your theme’s functions.php

          remove_filter( 'the_content', 'wpautop' );
          add_filter( 'the_content', 'wpautop' , 99);

  4. abidine says:

    hello
    how to add nextgen 3d slider to header.php
    thanks

  5. Jason D says:

    I am having the same problem as Johnny Pierre. The images display one after another, my URL is http://hightidewebsolutions.com/ Also in IE10 it doesn’t appear at all. Thank you.

    • Mohsin Rasool says:

      You can try following code it fixes for some WP installations. Paste it in your theme’s functions.php

      remove_filter( ‘the_content’, ‘wpautop’ );
      add_filter( ‘the_content’, ‘wpautop’ , 99);

      IE 10 does not support 3D CSS translations.

  6. Jasper says:

    Hey,

    I have a problem with the offset. I embeded your slider succesfully in my page. However, its on the left. Whatever I try the slider is always on the left, even if I use HTML to center the code. How do I fix this?

    It concerns this page:

    http://www.doorgezakt.nl/soulblender/

    Jasper

    • Mohsin Rasool says:

      You just need to set auto left and right margin for the flux slider like this

      .fluxslider {margin:0 auto;}

      Please add above CSS in your theme’s style.css

  7. Matteo says:

    hello
    how to add nextgen 3d slider to header.php page?
    thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>