BlogArchiveSoftware DevelopmentWeb DevelopmentWordpressWordpress NextGEN Gallery Shortcodes

WordPress NextGEN Gallery Shortcodes

April 2, 2010
Archive, Software Development, Web Development, Wordpress
1 min read

Whenever we build a website using WordPress and the client requests a gallery – we always use NextGEN.

I can’t fault them for the features it offers, its a fantastic bit of kit – but when it actually comes to the shortcodes to get it to display stuff – NextGEN fail big time.

So I google it every time, sometimes finding what I want – but most of the time having to piece it together from examples people have put on forums.

Today,I found a blog that lists many of the Shortcodes – so I thought I’d repeat them so they are easier for people to find! – Thanks InfoPint!

List of Short Codes for NextGEN Gallery

Short codes are the piece of text which you add along with you text on your blog post or sidebars. Short codes can also be added inside the theme templates.

For a slideshow :[ slideshow id=x w=width h=height ]
For a album : [ album id=x template=extend] or [ album id=x template=compact ]
For a gallery : [  nggallery id=x ]
For a single picture : [ singlepic id=x w=width h=height mode=web20|watermark float=left|right ]
For a image browser : [ imagebrowse r id=x ]
To show image sorted by tags :[ nggtags gallery=mytag,wordpress,…  ]
To show tag albums : [ nggtags album=mytag,wordpress,…  ]

Create Special Effects using Short Codes  in the template files

Short codes can be called from any theme template files, using  do_shortcode template tag   from the template files. Here are some examples

<?php echo do_shortcode(’[ slideshow id=2 ]); ?>

You can use this technique to create special flash headers with rotating images or create a showcase effect like here www.StyleHaute.com

Display Gallery view

http://nextgen-gallery.com/templates/galleryview/

[ nggallery id=1 template=galleryview images=0 ]

Useful Links for NextGEN Gallery

http://nextgen-gallery.com/custom-fields/

http://wordpress.org/support/topic/294912

http://www.visser.com.au/blog/list-of-wordpress-plugins-addons-for-nextgen-gallery/

http://speckyboy.com/2008/10/23/10-powerful-shoppingecommerce-plugin-solutions-for-wordpress/

http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

If you can think of any more shortcodes – or if NextGEN include any more in future releases then please comment. 🙂

6 thoughts on “WordPress NextGEN Gallery Shortcodes”

  3. I have been using the NGGallery and I would like to display specific images from each gallery on a specific page. Tags seems to be the simplest method up to this point.

    Basically, I have 5 galleries, each to be displayed on individual pages to support the content. However, my galleries contain between 10 & 25 images, but I only want to show 4/5 on each page. The full galleries will then be displayed on a separate, specific Gallery section of the website (client request).

    I have set my tags as “hero” but this does not appear to be limited to any gallery. I am using the shortcode [nggtags id=1 gallery=hero] where the ID would change per gallery.

    Is there a way I can use this method without using alternate tags to determine which images are displayed?

    Any help on this would be much appreciated. Thanks.

    Reply

  4. New site…setting up the NextGen galleries.

    Question: is there a way, shortcode, plugin, that will enlarge the thumbnails by hovering or passing over them, say like some Amazon sites?

    Thanks,
    Bart

    Reply

    1. Hi Bart,

      No need for Shortcodes / Plugins with this one thankfully, as we can achieve this with just a few lines of CSS.

      I’m going to assume the HTML structure of your gallery is the same as demo version of NextGEN Gallery (Although simply changing the class names will allow this to work for WordPress Galleries as well.)

      /* Ensure that when the image is scaled up, it is kept within the constraints of it's container. */
.ngg-gallery-thumbnail {
    overflow: hidden;
}

/* Scale up the size of the image when hovering over the thumbnail container. */
.ngg-gallery-thumbnail:hover img {
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
}

/* Apply just a basic transition to keep things looking good. */
.ngg-gallery-thumbnail img {
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact us