NextGen Gallery WordPress plugin

Managing your gallery in your WordPress website is a breeze. Here’s the NextGen Gallery quick start guide.

Where is the gallery?

nextgen gallery management

After login into the admin area, you find your gallery management on the left-hand side named ‘Gallery’.

Definitions

Galleries – A collection of related images (e.g. project photos).
Albums – A collection of galleries.

Add Gallery

Before you can upload any images you need to create a gallery. Hit the ‘Add Gallery/Images’ link in the Gallery menu (left-hand side) and add your new gallery. Just think of a good name and click ‘Add gallery’.

Adding Images

Once you’ve created a gallery you can add images to it.

upload images

Upload images

Easiest is uploading images one (or more) at a time. This is done from the Upload Images tab (1). It’s a 2-step process. First select the images you want to upload (hit the ‘browse’ button). Tip: you can keep adding images. Once selected all your images choose your gallery. And hit the ‘Upload images’ button. Sit back and let the plugin do its magical work… Once you get the all clear sign ‘picture(s) successfully added’ you’re done.

pictures successfully added

Upload a Zip-file

Upload a zip file of images. This is done from the Upload a Zip-File tab (2). Same procedure, only select a zip file instead of single images.

Import image folder

Import a folder already on your website. Not relevant. Stick with the other two options…

Managing Images

Once you have images into a gallery, you can perform a number of different operations on them. Choose ‘Manage Gallery’ form the left-hand side menu and click the ‘title’ to open the gallery.

manage images

Here’s a summary of the operations that can be performed on images on the Manage Gallery page.

  • Give each image an alternate & title text. The plugin will automatically fill this field with the image (file) name. It’s good practice to add a descriptive (keyword) text here.
  • Give each image a description. Will be displayed under the pop up (lightbox) image.
  • Exclude images from being displayed on gallery pages.
  • Delete an image.
  • Set a watermark on selected images.
  • Specify tags for images. Not relevant.
  • Generate (create) new thumbnails for selected images. Not relevant.
  • Resize images. Not relevant.

Don’t forget to ‘Save Changes’.

Sort Gallery (1)

Simply drag-and-drop the thumbs to their new positions and (again) don’t forget to hit ‘Update Sort Order’ when done.

Gallery settings

Here’s a summary of the operations that can be performed on the Gallery Settings.

  • Edit the name and description of the gallery. Description is good to add when you’re going to display albums (see further).
  • Edit the path (leave as it is).
  • Link the gallery to a page (leave ‘Not Linked’).
  • Specify a preview image that will be displayed when albums to which the gallery belongs are displayed.
  • Create a new page for displaying the gallery (leave as it is).

Albums

An album is a way of displaying a list of galleries.

manage albums

To create an album:

  • Choose ‘Album’ from the left-hand side Gallery menu.
  • Type the name of your new album.
  • Click the Update button.
  • Once you’ve created an album, you can drag galleries from the ‘Select Gallery’ box to the Album Page box. You can also rearrange galleries in the album by dragging and dropping.

Inserting Galleries, Albums and Images into Posts/Pages

While on the edit page/post page you’ll have a handy icon on the toolbar ‘Add NextGEN Gallery’.

nextgen-icon

Selecting that gives you the option to insert a Gallery, Album or a (single) Picture.

Insert Gallery

Select your gallery. Choose ‘Image list’ or ‘Imagebrowser’.
(Slideshow needs some special settings and coding and is disabled by default).

Image list displays all images as thumbs

imagelist-screen

Imagebrowser displays one (large format) image at a time and scrolls through the gallery with the ‘back’ and ‘next’ buttons. No fancy lightbox with this one.

imagebrowser-screen

Insert Album

Remember an album is a collection of Galleries. Select your album. Choose ‘Extended version’ or ‘Compact version’.

extended version screen compact version screen

Insert Picture

Only if you want to insert a single picture with a lightbox effect. Otherwise stick to the normal procedure for inserting images into posts and pages.

This Quick Start Guide is written for WordPress websites developed by Good Websites. For additional settings please check the plugin homepage or leave a comment below.

10 comments so far

  1. Amanda,

    I really enjoy your tutorials! :D I just started using NextGEN gallery for my department’s redesign but I’ve been unable to figure out how to center the descriptive text which is below the image browser. I know that if I put in tags on either side of the description, the resulting text will be centered, but I can’t find the CSS class in the files to do this automatically.

    Would you have any insights into this?

  2. Joyce,

    To center the description which appears below the image browser, I had to add:
    .ngg-imagebrowser-desc p {
    text-align:center;
    }
    to this file: ngg_shadow2.css

  3. Giovanni,

    Thanks for the info. NextGEN seems a very good web album. I noticed that in “Manage Album” page, I see a column “Select Album” on the right side with the album list that I don’t see in your image. How can I remove it?

  4. James Ashford,

    Cheers for the advice. Is there anyway the description can automatically take the information from the image title. It’s just that if i’m adding 100 images and I want the description to be the same as the title, can it not do it automatically?

    Cheers

  5. Raven,

    NextGen is nice but author failed to set size of imagebrowser, which displays HUGH with no means to change size. I’ve tried the css file and other methods found on the web to no avail. I’ve also use the resize feature in options. Just doesn’t work.

  6. David Lundgren,

    Hi, nice work!

    Do you know how to change the size and the colour of the title text that’s shown under the pup up image? Can´t figure this one out…

  7. Erwin,

    @David – depending on which lightbox effect you’re using.

    We’re using Fancybox a lot with NextGEN. Look for the CSS id ‘fancybox-title-float-main’ and simply change the values of the color property to change the color and you can add the ‘font-size’ property to this ID as well to alter the font size.

    If you’re using Tickbox which is bundled with the NextGEN plugin look for the CSS ID ‘TB_caption’ and add the color and font-size property.

    What lightbox effect are you using?

  8. Kimberly,

    Just wondering if there is a way to change the font size of the “album titles” When looking at my albums when I have them in the “compact” setting, some of my title almost run together. At one point there were a few titles that actually ran over the next title.

Leave a Reply

Fields marked * are required. Your email address will not be published.

  • (will not be published)