Imagely Shortcodes

  1. Home
  2. Knowledge Base
  3. Getting Started
  4. Imagely Shortcodes

Imagely Shortcodes

With Imagely, we have now introduced a new, simpler shortcode 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 page 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.

Basic Logic

Let’s start with a sample shortcode that includes many options. The shortcode below will display gallery #1 as an Imagely Basic Thumbnail.

[ ngg src="galleries" ids="1" display="basic_thumbnail" thumbnail_crop="0"]

Let’s break them down:

  • ngg: This is the parameter that introduces every Imagely shortcode.
  • src: The source of the images you want to display. There are several options for the image source.
  • ids: The ID of the gallery that you want to display.
  • display: The gallery display type that you are going to use.
  • thumbnail_crop: A default parameter of our Basic Thumbnail Gallery display defines if the thumbnails will use a special cropping.

Image Source

[ ngg src="galleries" ids="1" display="basic_thumbnail" thumbnail_crop="0"]
  • galleries: Retrieves galleries
  • albums: Retrieves albums
  • random_images: Retrieves a random set of images from all galleries
  • recent_images: Retrieves recently uploaded images
  • tags: Retrieves tagged images

Image IDs

Each Gallery has an ID that you can check under Gallery > Manage Galleries.

Gallery ID

Using our shortcode, you can include a single gallery/album or a list of galleries/albums comma separated like this: “1,3” (retrieves galleries #1 and #3).

[ ngg src="galleries" ids="1,3" display="basic_thumbnail" thumbnail_crop="0"]

In this example, you can use the existing tags (keywords) in your photographs. In that shortcode, it will display all the galleries that have the tag “landscapes”. You can also use more than one tag (keyword) like this: landscapes,florida beaches (retrieves images tagged ‘landscapes’ or ‘florida beaches’)

[ ngg src="tags" ids="landscapes" display="basic_thumbnail" thumbnail_crop="0"]

Exclude Specific Images

Each Gallery has an ID, but each image will have an ID as well. You can choose to exclude specific images based on their IDs.

Image ID

The code below means that the gallery with the ID “1” will be excluding the Photographs with the ID “3” and “4”

[ ngg src="galleries" ids="1" exclusions="3,4" display="basic_thumbnail" thumbnail_crop="0"]

Display Type

[ ngg src="galleries" ids="1" display="basic_thumbnail" thumbnail_crop="0"]

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

Galleries

  1. basic_thumbnail
  2. basic_slideshow
  3. basic_imagebrowser
  4. basic_tagcloud
  5. pro_tile
  6. thumbnail
  7. slideshow
  1. pro_imagebrowser
  2. pro_horizontal_filmstrip
  3. pro_sidescroll
  4. pro_film
  5. pro_blog_gallery
  6. masonry
  7. pro_mosaic
Display type

Albums

  1. basic_compact_album
  2. basic_extended_album
  3. pro_list_album
  4. pro_grid_album
Album display view

Order By / Order Direction

  • order_by: Sets the method to sort images
    • pid: Image ID.
    • filename: Filename.
    • alttext: Alt/Title Text.
    • imagedate: Date/Time.
    • galleryid: by Gallery id (if you are inserting more than one gallery).
    • ‘rand()’: order to random using PHP ‘rand()’ function.
  • order_direction: ASC (Ascending) or DESC (Descending).
[ ngg src="galleries" ids="1" display="thumbnail" thumbnail_crop="0" images_per_page="10" spacing="3" number_of_columns="4" is_ecommerce_enabled="1" order_by="alttext" order_direction="DESC"]

Note: “galleryid” and “rand()” are not available in our Insert Graphic Window.

Example of Standard Shortcodes

Below are the standard shortcodes for Imagely and Imagely Pro gallery and album types. We provide this for those who want to copy and paste the shortcodes. Note that the default gallery ID is “1“.

Galleries

Imagely Basic Thumbnail Gallery

[ ngg src="galleries" ids="1" display="basic_thumbnail" thumbnail_crop="0"]

Imagely Basic Slideshow Gallery

[ ngg src="galleries" ids="1" display="basic_slideshow"]

Imagely Basic Image Browser Gallery 

[ ngg src="galleries" ids="1" display="basic_imagebrowser"]

Imagely Basic Tag Cloud

[ ngg src="galleries" ids="1" display="basic_tagcloud"]

Imagely Pro Tile

[ ngg src="galleries" ids="1" display="pro_tile"]

Imagely Pro Thumbnail Gallery

[ ngg src="galleries" ids="1" display="thumbnail" thumbnail_crop="0"]

Imagely Pro Slideshow Gallery

[ ngg src="galleries" ids="1" display="slideshow"]

Imagely Pro Image Browser

[ ngg src="galleries" ids="1" display="pro_imagebrowser"]

Imagely Pro Horizontal Filmstrip

[ ngg src="galleries" ids="1" display="pro_horizontal_filmstrip"]

Imagely Pro Sidescroll

[ ngg src="galleries" ids="1" display="pro_sidescroll"]

Imagely Pro Film

[ ngg src="galleries" ids="1" display="pro_film"]

ImagelyPro Blog Style

[ ngg src="galleries" ids="1" display="pro_blog_gallery"]

Imagely Pro Masonry

[ ngg src="galleries" ids="1" display="masonry" ngg_triggers_display="always"]

Imagely Pro Mosaic

[ ngg src="galleries" ids="1" display="pro_mosaic"]

 
Albums

Imagely Basic Compact Album

[ ngg src="albums" ids="1" display="basic_compact_album"]

Imagely Basic Extended Album

[ ngg src="albums" ids="1" display="basic_extended_album"]

Imagely Pro List Album

[ ngg src="albums" ids="1" display="pro_list_album" thumbnail_crop="0"]

ImagelyPro Grid Album

[ ngg src="albums" ids="1" display="pro_grid_album" thumbnail_crop="0"]

Others Parameters

For each Imagely gallery type, you can apply a large range of parameters and settings. These are all now visible in Imagely Insert Gallery Window, but you can also apply them using parameters within shortcodes.
 
Two general points:

  • For any parameters you do not define via a shortcode, the gallery will adopt whatever default setting you have in Imagely 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 > Imagely 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.

 
Imagely Basic Thumbnail Gallery

[ ngg src="galleries" ids="1" display="basic_thumbnail" override_thumbnail_settings="1" thumbnail_width="120" thumbnail_height="80" number_of_columns="4"]
  • override_thumbnail_settings: If is set to “1” it overwrite the default thumbnail setting of the gallery or general settings.
  • thumbnail_width: Width of each thumbnail.
  • thumbnail_height: Height of each thumbnail.
  • number_of_columns: Setup the number of columns per row.

 
Imagely Basic Slideshow

[ ngg src="galleries" ids="1" display="basic_slideshow" gallery_width="600" gallery_height="400" interval="300" transition_speed="300"]
  • gallery_width: Slideshow width.
  • gallery_height: Slideshow height.
  • interval: The time that takes to move from one slideshow to another measure in seconds (numeric value).
  • transition_speed: The speed of each tranition measure in seconds (numeric value).

 
Imagely Pro Slideshow

[ ngg src="galleries" ids="1" display="slideshow" show_captions="1" caption_class="caption_overlay_top" aspect_ratio="first_image" transition="pulse"]
  • show_captions: 1 or 0 (true/false).
  • caption_class: (used when show_captions=1) to set “Caption location” values:
    • caption_above_stage.
    • caption_below_stage.
    • caption_overlay_top.
    • caption_overlay_bottom.
  • aspect_ratio
    • first_image: uses the aspect ratio of the First Image.
    • image_average: uses an average aspect ratio
    • 1.5 (3:2)
    • 1.333 (4:3)
    • 1.777 (16:9)
    • 1.6 (16:10)
    • 1.85 (1.85:1)
    • 2.39 (2.39:1)
    • 1.81 (1.81:1)
    • 1: Square aspect ratio.
  • transition
    • fade: Crossfade between images
    • flash: Fades into background color between images
    • pulse: Quickly move the image into the background color
    • slide: Slide images depending on image position
    • fadeslide: Fade between images and slide slightly at the same time

 
Pro Thumbnail Gallery

[ ngg src="galleries" ids="1" display="thumbnail" thumbnail_crop="0" images_per_page="10" spacing="3" number_of_columns="4" is_ecommerce_enabled="1" order_by="alttext" order_direction="DESC"]
  • images_per_page: The number of thumbnails visible for each page (used in pagination).
  • spacing: Defines the space between the thumbnails.
  • number_of_columns: The amount of columns for each row.
  • order_by: Sets the method to sort images
    • pid: Image ID
    • filename: Filename
    • alttext: Alt/Title Text
    • imagedate: Date/Time
    • galleryid: by Gallery id (if you are inserting more than one gallery)
    • ‘rand()’: order to random using PHP ‘rand()’ function (no UI option)
  • is_ecommerce_enabled: “1” means that it will enable eCommerce in this gallery (you need our Imagely Lightbox Effect active).
  • order_direction: ASC (Ascending) or DESC (Descending).

SinglePic

This particular shortcode is legacy. Please do not use it unless necessary. It includes a single picture determined by the image ID parameter.

[ ngg_images image_ids="1" display_type="photocrati-nextgen_basic_singlepic"]

Related Articles

Close Menu