Gallerie Nextgen Test


Page under construction !

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_basic_thumbnails disable_pagination=1 images_per_page=1 show_all_in_lightbox=1, width: 200px;
height: 200px; ]
[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow" gallery_width="800" gallery_height="auto" mode=web20]

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow"  theme=grey template=carousel]

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow" width: 100% !important;
height: 100% !important;"]

slideshow id=1 w=1000 h=1000:

[slideshow id=1 w=1000 h=1000]

Attach nextgen gallery „Orfeo“basic image browser/template image caption to post (über grünen Button in der Menüleiste):

Attach nextgen gallery „Orfeo“ carousel to post (über grünen Button in der Menüleiste):


[metaslider id=176]

Additional Attributes of [nggallery]

(string) (optional) Theme of the slider
Possible Values: ‚black’, ‚blue‘ or ‚grey‘

(boolean) (optional) Toggle between content and image slider.
Possible Values: 0 or 1

(string) (optional) Select order of the images.
Possible Values: empty or „random“

(numeric) (optional) Delay in animation
Possible Values: Any numeric value

(boolean) (optional) Enable or disable next/prev navigation arrows
Possible Values: 0 or 1

(boolean) (optional) Enable or disable pagination bullets at bottom
Possible Values: 0 or 1

(string) (optional) Set width of the images
Possible Values: 100px or 100% or 80% etc

Please note „px“ or „%“ at the end.

(string) (optional) Set width of the content area (in case of content slider)
Possible Values: 100px or 20% etc

(boolean) (optional) Enable or disable whether title should be linked or not (for content slider). Please follow this tutorial to set it up
Possible Values: 0 or 1

(boolean) (optional) Enable or disable whether image should be linked or not. Please follow this tutorial to set it up
Possible Values: 0 or 1

(boolean) (optional) Enable to open slider url to be opened in a new window. Please follow this tutorial to set it up
Possible Values: 0 or 1

(string) (optional) Set background color of the slider
Possible Values: Any valid HTML Code. #fff or #23423f or white or black

(boolean) (optional) To use the specifed img_width for image slider too.
Possible Values: 0 or 1

(boolean) (optional) Images in image slider are set to 100% width which may cause stretch for small or portrait size images. Please enable this option to fix it.
Possible Values: 0 or 1

NextGEN Gallery Shortcodes

Introduction and Basic Logic

NextGEN 2.0 introduces a new short code structure. This page describes everything you need to know to work fluidly with the new shortcodes.

We should start by emphasizing that you can now customize your galleries easily using the new Insert Gallery Window in your text editor. For the most part, you never need to use shortcodes again if you don’t want to.

The main places we think people may want to use these are:

  • Widgets. You can’t use the Insert Gallery Window within a widget, so you’d need to use a shortcode. 
  • Page/Post Text Editor. If you prefer to use the text-based editor for pages or posts, you currently need to work with shortcodes, or go back and forth between visual and text editor. We are working on making the Insert Gallery Window more robust for use with text-based editing.

Let’s start with a sample shortcode that includes a lot of options.

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow" exclusions="4,6" gallery_width="600" gallery_height="400"]
view raw gistfile1.txt hosted with ❤ by GitHub

The shortcode above will display gallery #1 as a NextGEN Gallery basic slideshow. It will exclude images #4 and #6 and will set the slideshow size as 600px X 400px. So that gives you a sense for what the shortcodes will look like. Now lets break them down.


This is the parameter that now introduces every NextGEN Gallery shortcode.

Image Source 

Following the ngg_images tag, identify is the source of the images you want to display. There are several options for the image source.

  • gallery_ids=“1,3″   (retrieves galleries #1 and #3)
  • album_ids=“1″   (retrieves album #1)
  • tag_ids=“landscapes,florida beaches“   (retrieves images tagged ‚landscapes‘ or ‚florida beaches’)
  • image_ids=“2,3,5″   (retrieves images 2, 3, and 5)
  • source=“recent“   (retrieves recently uploaded images)
  • source=“random“   (retrieves a random set of images from all galleries)

You can also chose to include or exclude specific images based on their ids.

  • gallery_ids=“1,3″ exclusions=“4,6″   (excludes images #4 and #6)
  • album_ids=“1,2″ exclusions=“a1″   (excludes sub album #1)

Display Type

Following the image source, specify the display type. Here is a list of all available display types in NextGEN Gallery and NextGEN Pro.

  • display_type=“photocrati-nextgen_basic_slideshow“
  • [ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow" exclusions="4,6" gallery_width="200" gallery_height="600"]
  • display_type=“photocrati-nextgen_basic_thumbnails“
  • [ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_thumbnails"  gallery_width="600" gallery_height="600"]
  • display_type=“photocrati-nextgen_basic_imagebrowser“
  • [ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_imagebrowser"  gallery_width="600" gallery_height="600"]
  • display_type=“photocrati-nextgen_basic_singlepic“
  • [ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_singlepic"  gallery_width="600" gallery_height="600"]
  • display_type=“photocrati-nextgen_basic_extended_album“
  • [ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_extended_album"  gallery_width="600" gallery_height="600"]
  • display_type=“photocrati-nextgen_basic_compact_album“
  • [ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_compact_album"  gallery_width="600" gallery_height="600"]
  • PRO:
  • display_type=“photocrati-nextgen_pro_slideshow“
  • display_type=“photocrati-nextgen_pro_thumbnail_grid“
  • display_type=“photocrati-nextgen_pro_horizontal_filmstrip“
  • display_type=“photocrati-nextgen_pro_film“
  • display_type=“photocrati-nextgen_pro_blog_gallery“
  • display_type=“photocrati-nextgen_pro_list_album“
  • display_type=“photocrati-nextgen_pro_grid_album“
  • display_type=“photocrati-nextgen_pro_masonry“
  • —-

100% Breite:
[ngg-slideshow-1-43-1, #ngg-slideshow-1-43-1 img {
width: 100% !important;
height: 100% !important; ]

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_basic_thumbnails disable_pagination=1 images_per_page=1 show_all_in_lightbox=1, width: 100% !important;
height: 100% !important; ]

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_basic_thumbnails disable_pagination=1 images_per_page=1 show_all_in_lightbox=1, width: 100% !important;
height= auto ]

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow" exclusions="4,6" gallery_width="100%" gallery_height="100%"]
<div id=“ngg-slideshow-2-7-1″ class=“ngg-slideshow“ style=“height:640px;width:960px;“>
Next, reset both height and width using jQuery.


Extra Parameters

For each NextGEN Gallery type, there is a large range of parameters and settings you can apply. These are all now visible in NextGEN Gallery 2.0′s new Insert Gallery Window. But you can also apply them using parameters within shortcodes. We are working on compiling an entirely complete list of every available shortcode parameter in NextGEN Gallery (there are a lot). For now, to give you a sense for what the options look like, consider the following parameters for slideshows and thumbnail galleries.
Example: Common Parameters for NextGEN Basic Slideshows

  • gallery_width=“600″
  • gallery_height=“400″
  • cycle_interval=“5″

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow" exclusions="4,6" gallery_width="200" gallery_height="600"]

Pro Slideshows

  • width=“600″
  • transition_speed=“3″
  • slideshow_speed=“2″

Example: Common Parameters for NextGEN Basic Thumbnail Gallery:

  • override_thumbnail_settings=“1″ (required to override default thumbnail setting within shortcodes)
  • thumbnail_width=“120″
  • thumbnail_height=“80″
  • thumbnail_crop=“1″
  • number_of_columns=“4″
  • show_slideshow_link=“1″
  • slideshow_link_text=“View Slideshow“

Pro Thumbnail Gallery

  • images_per_page=“10″
  • spacing=“3″
  • number_of_columns=“4″
  • ngg_triggers_display=“never“

Two general points:

  • For any parameters you do not define via shortcode, the gallery will adopt whatever default setting you have in NextGEN Gallery options panel (under Gallery > Gallery Settings). So if you don’t set the gallery width and height for a slideshow in a shortcode, the slideshow will just adopt the default gallery width and height that you’ve designated under Gallery > Gallery Settings > NextGEN Basic Slideshow.
  • For any parameters that are either Yes or No, you can use a „1″ to indicate Yes or a „0″ to indicate No.

Examples of Standard Shortcodes

Below are the standard shortcodes for NextGEN and NextGEN Pro gallery and album types. We provide this for those who would like to copy and paste the shortcodes.

NextGEN Basic Thumbnail Gallery

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_thumbnails"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Basic Slideshow Gallery

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Basic Image Browser Gallery Gallery

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_imagebrowser"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Basic SinglePic 

[ngg_images image_ids="1" display_type="photocrati-nextgen_basic_singlepic"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Basic Tag Cloud

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_tagcloud"]
view raw gistfile1.txt hosted with ❤ by GitHub

NexGEN Basic Extended Album

[ngg_images album_ids="2" display_type="photocrati-nextgen_basic_extended_album"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Basic Compact Album

[ngg_images album_ids="2" display_type="photocrati-nextgen_basic_compact_album"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Pro Thumbnail Gallery

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_pro_thumbnail_grid"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Pro Slideshow Gallery

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_pro_slideshow"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Pro Filmstrip Gallery

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_pro_horizontal_filmstrip"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Pro Film Gallery

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_pro_film"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Pro Masonry

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_pro_masonry" size="180" padding="10"]

NextGEN Pro BlogStyle Gallery

[ngg_images gallery_ids="1" display_type="photocrati-nextgen_pro_blog_gallery"]
view raw Pro Blog Style hosted with ❤ by GitHub

NextGEN Pro Grid Album

[ngg_images album_ids="2" display_type="photocrati-nextgen_pro_grid_album"]
view raw gistfile1.txt hosted with ❤ by GitHub

NextGEN Pro List Album

[ngg_images album_ids="2" display_type="photocrati-nextgen_pro_list_album"]
view raw gistfile1.txt hosted with ❤ by GitHub

Pro Gallery Options Breakdown Example


[ngg_images gallery_ids=1 display_type=photocrati-nextgen_pro_slideshow]

Standard Parameters:source … values:
galleries (default) … sets Galleries
random_images … set Random Images
recent_images … sets Recent Images
tags … sets Tags
images_ids … specific set of images referenced by their ID enclosed in quotes (without spaces)

gallery_ids … value(s): Gallery ID, if multiple galleries are used enclose in quotes separated by commas (without spaces)
container_ids … optional; used in place of gallery_ids when source is not galleries to specify a sub-set of the existing galleries (identified by gallery ID)
tag_ids … use with source=tags, values are tag slugs separated by commas (without spaces)

slug … default is transient ID; any valid URL segment can be used (the same one should not be used for multiple displays on the same page or post). Only used with NextGEN Pro Lightbox.

image_crop … values: 1 or 0 (true/false)
image_pan … values: 1 or 0 (true/false) requires image_crop=1

show_playback_controls … values: 1 or 0 (true/false)

show_captions … values: 1 or 0 (true/false)
caption_class (used when show_captions=1) to set „Caption location” values:
overlay_bottom (default)

aspect_ratio … values:
first_image … sets First Image
image_average … sets Average
1.5 (default) … sets 3:2
1.333 … sets 4:3
1.777 … sets 16:91.6 … sets 16:10
1.85 … sets 1.85:1
2.39 … sets 2.39:1
1.81 … sets 1.81:1
1 … sets Square

width … set as a numeric value;
width_unit … values: px (default) or %

transition … values:
fade … sets Crossfade between images
flash … sets Fades into background color between images
pulse … sets Quickly move the image into the background color
slide … sets Slide images depending on image position
fadeslide … sets Fade between images and slide slightly at the same time

transition_speed … numeric value (measured in seconds) with a default of 1

slideshow_speed … numeric value (measured in seconds) with a default of 5

border_size … numeric values measured in pixels; will not be applied if image_crop=1

border_color … hex value of color to be used (default: #ffffff)

ngg_triggers_display … values (only used with NextGEN Pro Lightbox active):
always (default) … sets Always
exclude_mobile … sets Exclude Small Screens
never … sets Never

is_ecommerce_enabled … values: 1 or 0 (true/false … requires NextGEN Pro Lightbox be active)

order_by … sets the method to sort images; values:
pid … sets Image ID
filename … sets Filename
alttext … sets Alt/Title Text
imagedate … sets Date/Time
‘rand()’ … sets order to random using PHP rand() function (no UI option)

order_direction … values: ASC or DESC

exclude … numeric value, use image ID to specify; if multiple images, enclose image IDs separated by commas with quotes (without spaces)

t … numeric value restricting the number of images displayed when source=random_images


For your convenience, we have put together a variety of custom shortcodes :)

Display a single image that will open the entire gallery in the chosen Lightbox Effect

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_basic_thumbnails disable_pagination=1 images_per_page=1 show_all_in_lightbox=1]

Variations: Display three random images instead of just a single (first) image

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_basic_thumbnails disable_pagination=1 images_per_page=3 show_all_in_lightbox=1 order_by='rand()']

Randomly display a specific number of images from specific galleries

[ngg_images source=random_images container_ids='1,2' display_type=photocrati-nextgen_basic_thumbnails images_per_page=1000 order_by='rand()' maximum_entity_count=8]

Do not display triggers

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_pro_thumbnail_grid ngg_triggers_display=never]

Masonry shortcode limiting number of random images from multiple galleries

[ngg_images source=random_images container_ids='1,2' display_type=photocrati-nextgen_pro_masonry images_per_page=1000 order_by='rand()' maximum_entity_count=12]

Masonry shortcode sorting images by ID in descending order

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_pro_masonry order_by=pid order_direction=DESC]

Random Order Pro Slideshow of Specific Galleries (limited to 50 images)

[ngg_images source=random_images container_ids='1,2,6' display_type=photocrati-nextgen_pro_slideshow images_per_page=1000 order_by='rand()' maximum_entity_count=50]

Pro Slideshow with 300% width

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_pro_slideshow width=300 width_unit=%]

Album of (5) recent galleries

[ngg_images album_ids=0 display_type=photocrati-nextgen_basic_compact_album galleries_per_page=5 pagination=0]

Album of All Galleries Displayed using Masonry

[ngg_images album_ids=0 display_type=photocrati-nextgen_basic_compact_album gallery_display_type=photocrati-nextgen_pro_masonry]

Crazy Tags Output

[ngg_images display_type=photocrati-nextgen_pro_thumbnail_grid source=tags tag_ids=lake-aquitaine override_thumbnail_settings=1 thumbnail_width=75 thumbnail_height=75 thumbnail_crop=1 images_per_page=50 number_of_columns=10 is_ecommerce_enables=1 ngg_triggers_display=never]
view raw crazy tags output hosted with ❤ by GitHub

Limited Recent Images

[ngg_images gallery_ids=1 display_type=photocrati-nextgen_basic_thumbnails disable_pagination=1 images_per_page=8 order_by=imagedate order_direction=DESC]