WordPress NextGEN Gallery Shortcodes
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. 🙂
Your readers may be interested in a bridge I have made available that links SlideShowPro to NextGEN Gallery. Take a look:
http://www.visser.com.au/wordpress/plugins/slidepress-to-nextgen-gallery-bridge/
realy great , helpful ….thanks:)
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.
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
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; }hello,
is there any shortcode to print the author name of the gallery in front end? any metadata shortcodes?