Displaying Galleries – Overview


OVERVIEW. This page provides an overview of various display options for NextGEN.

DISPLAY GALLERIES USING THE NEXTGEN INTERFACE OR SHORTCODES. You can add galleries to posts or pages using the built-in NextGEN interface by clicking the NextGEN icon above your post or page editor, or you can display galleries using "shortcodes" that you type directly into a page or post.

DISPLAY GALLERIES IN SIDEBAR AND FOOTER WIDGETS. You can also add galleries to your sidebar or footers widget areas using built-in NextGEN widgets or using the same shortcodes.

DISPLAY GALLERIES BASED ON GALLERY, TAGS, RANDOM OR RECENT IMAGES, OR IMAGE IDS. Most NextGEN users assume that you just create galleries and then display them, and NextGEN can be used in that way. But you can also go well beyond the basics and start displaying images more dynamically based on tags, recent or random images, individual image ID's and more.

  • Display based on galleries. This is the default mechanism for displaying images in NextGEN. It's also the only way to display images if you use NextGEN's pop-up interface to add your galleries to a post or page. All other image sources require you to use short codes.
  • Display based on tags. You can display images based on tags.
  • Display recent images. You can display recent images.
  • Display random images. You can display random images.
  • Display based on image ID. You can display specific images by referring to image ID's within your shortcodes.



There are four default gallery types in NextGEN Gallery: Thumbnail Galleries, Slideshow Galleries, Imagebrowser Galleries, and Single Pics.

NEXTGEN BASIC THUMBNAIL GALLERY. This is one of three the standard NextGEN Displays. Shortcode format: [ nggallery id=X ] without space before/after brackets. 


NEXTGEN BASIC SLIDESHOW GALLERY. The NextGEN basic slideshow comes with a wide array of settings covering slideshow size, transition style, transition speed, slideshow controls, and other elements. Shortcode format: [ slideshow id=X w=X h=X ] without space before/after brackets. The width and height can be set using the w and h attributes.


NEXTGEN BASIC IMAGEBROWSER GALLERY. The NextGEN imagebrowser gallery has fewer option than the slideshow. Shortcode format: [ imagebrowser id=X ] without space before/after brackets.

Example of Title

Picture 1 of 10

This is what a caption looks like...


NEXTGEN SINGLE PICS. NextGEN allows you to display a single image. Single Pics will also pop-up using whichever lightbox effect you've selected in the main settings area. Using shortcodes allows you to customize various aspects of the image display. Shortcode format: [ singlepic id=X w=X h=X mode=web20|watermark float=left|right ] without space before/after brackets. "web20" adds a reflection effect and "watermark" adds a watermark as defined in the settings. Examples below are [ singlepic id=1 w=320 h=240 mode=web20 ] and [ singlepic id=3 w=320 h=240 mode=watermark ]. 

And a look on the watermark function :


LIGHTBOX EFFECTS. NextGEN comes integrated with a number of different lightbox effects, including Shutter, Thickbox, Fancybox, Lightbox, and Highslide. It also allows you to add other custom or third partly lightbox effects.



NextGEN provides a platform for integrating "templates," which are alternatively gallery designs.

CAPTION TEMPLATE. Shows a caption below the thumbnail. Since the caption can affect the rendering of floated thumbnails, there is a parameter for "number of columns", to define the number columns based on your theme width. A second option is to add a ngg_gal_Columns" parameter as a custom field on the page or post. Shortcode format: [ nggallery id=X template=caption ] without space before/after brackets.


CAROUSEL TEMPLATE. Show a main image with thumbnails below. It's a pure PHP solution which doesn't require any jQuery / JS. It requires the page to reload for each image. The parameter "images" defines the number of images that will be show as thumbnails. Shortcode format: [ nggallery id=2 template=carousel images=7 ] without space before/after brackets.


GALLERYVIEW TEMPLATE. Requires third party plugin hereThis is a example of what can be done with add-on plugins. This one integrates jQuery GalleryView. You'll need to install the plugin and use the template shortcode. Shortcode format: [ nggallery id=1 template=galleryview images=0 ]

[Not a valid template]


MONOSLIDESHOW TEMPLATE. Requires third party plugin here. This is another example of what can be done with third party plugins that provide additional add-on templates for NextGEN. This one offers a simple integration of Monoslideshow. For this effect, you would need to install the plugin and use the template shortcode at the end of this paragraph. Note that this template also uses an additional parameter called "preset" to provide additional display effects. Shortcode formats (in order below): [ monoslideshow id=1 w=450 h=350 ], [ monoslideshow id=1 w=510 h=340 preset='tv-swap' ], [ monoslideshow id=1 w=450 h=350 preset='sparkles' ], all without spaces before/after brackets.

[monoslideshow id=38 w=510 h=340]


[monoslideshow id=38 w=510 h=340 preset='tv-swap']


[monoslideshow id=38 w=510 h=340 preset='sparkles']