How Can We Help?

Search for answers or browse our knowledge base.

< All Topics
Print

Displaying Galleries – Overview

EVERYTHING YOU NEED TO KNOW ABOUT DISPLAYING GALLERIES IN NEXTGEN

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.

-

DEFAULT GALLERY DISPLAY TYPES

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. 

no images were found

-

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.

Foreboding

Image 1 of 12

This is an image "Description"

-

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 ]. 

no images were found

And a look on the watermark function :

no images were found

-

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.

-

WORKING WITH TEMPLATES

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.

no images were found

-

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.

 

Table of Contents
Close Menu