Using NextGEN gallery to bring an image gallery to your WordPress blog

Bringing a customized image gallery isn’t as easy as it should be. Many developers have tried to solve this problem, and in my opinion Alex Rabe has done an excellent job of doing so. He has developed a WordPress plugin called NextGEN Galllery which allows the author to easily update and manage photos, and (this is important) allow for almost complete customization on how the images are displayed. As a specific example on how to do this, I’m going to walk you through getting NextGen gallery and the awesome Galleria jQuery image gallery to get along.

Once you have the NextGen plugin installed and customized, it’s time to begin getting the gallery to display correctly using a custom template. Alex talks a bit about templates, but I don’t think there is enough information for beginning. The first step with nextGEN templating is to create the folder nggallery at the root of your theme’s directory. I like to start off with the plugin’s default gallery file when creating a template. To do that copy the file gallery.php from the nextGEN plugin directory to your newly created nggallery folder. Gallery.php can be found here:

wp-content/plugins/nextgen-gallery/view/gallery.php

You will see the structure of the default gallery in gallery.php, and it will definitely need some changes in order to work with galleria. Galleria needs an unordered list structure for the thumbnails and a div container for the large image. The most important part of gallery.php is the foreach loop that cycles through all the images and outputs the html to display. This is how it looks now:



	

	hidden) {
		continue;
	} ?>
	columns > 0 && ++$i % $gallery->columns == 0) { ?>

We need to change it to output the proper html for galleria like so:


	hidden) { ?>
		>
			<?php echo $image->alttext ?>
		
	

	hidden) {
		continue;
	} ?>

Notice how I used $image->alttext and $image->url. With knowing these basic properties, you can pretty much create any html your gallery plugin requires. Here is the full gallery.php file I modified:


 * If you would like to show the timestamp of the image ,you can use 
 **/
?>


	
		
		
 
		

			
			
    
				
					hidden) { ?>
						>
							<?php echo $image->alttext ?>
						
					

					hidden) {
						continue;
					} ?>
					
				
			

		

		
		

	
		

			<?php echo $current->alttext ?>

You will need the accompanying javascript and css that go along with the plugin. Ideally, you only want to call this when a gallery is being displayed. I haven’t found a good way of doing this without editing nggallery’s files directly. Instead, at least for now, I add these files to the appropriate template files. In my case, I only needed to add them to single.php since the galleries are only being shown when a single post is being displayed. If anyone has an idea of how to limit these files to only when they’re needed, please let me know.

Now all you need to do is call the gallery in your blog post. This is done with the nggallery shortcode. Grab the id of the gallery you created, and throw this shortcode:

[nggallery id=2]

You do have the option to have multiple gallery templates. Just create a new php file in your nggallery folder. Start the name of the file as gallery-, like gallery-example1. Then to use this non-default gallery, call it like this within your post:

[nggallery id =1 template=example1]

36 Comments

  1. TomApril 9, 2010 at 5:13 pm

    This is great!
    Could you give me the example how it looks like on the web page?

    Reply
  2. StaceyApril 16, 2010 at 7:24 pm

    Finally someone trying to simplify the instructions for making NextGen galleries more customizable! Thank you!!!
    I am so new to wordpress.org and to css and php so my terminolgy might be a little off… I’m using NextGen for my galleries and working on a new site that isn’t at all ready to go public yet.

    I want my galleries to look like the galleria demo you gave above (Galleria jQuery image gallery*) I understand the creation of the new custom template and how to call that out on my page etc.

    BUT I do not know how to customize the php file to make my galleries look just like the demo from galleria. HELP!…..

    Here’s a link to a gallery in my site as it looks now using NextGen defaults (the rest of the site is a mess still)
    http://wp.merrilyrollingalong.com/gallery/jalama-beach/

    Also do the files galleria.css and jquery.galleria.js go in the Plugins folder?

    Thank you!!!
    Stacey

    *http://www.monc.se/kitchen/146/galleria-a-javascript-image-gallery

    Reply
    • Eric LightbodyApril 25, 2010 at 3:42 pm

      In my case I combined my gallery styles with my main stylesheet. For the javascript file I called that in my single.php file. In your case, it looks like it would be in your page.php file. I called the js file using the wp_enqueue_script call.

      The template file is a bit more tricky. The example I provided can basically be broken up into two main sections. First, line 17 – 22 builds the container for the large image. Lines 23 – 28 are pulling each thumbnail in.

      Hope this helps.

      Reply
  3. Edgar SchinkerMay 10, 2010 at 12:11 pm

    Hay Eric,

    great you wrote some info for using Galleria on WordPress!

    I tried it, and got a little question;
    I completed making a gallery on my wordpress, but i don’t understand how i now can style it the way i like..

    I got the plugins installed
    (folder “galleria-wp” and “nextgen-gallery” are in my plugin-folder).
    Is it correct that my “nggallery-folder” is placed in the “themes-folder”?

    How to intergrate the Galleria-style now?

    Thx in advance!

    Reply
  4. LukeMay 23, 2010 at 9:19 am

    Hi there!

    Being a wordpress and nextgen newbie I’m not quite getting the second part of implementation. Using your modified gallery.php file which should make a for each img within doesn’t do exactly that. Looking at source it just returns first img within an album. I would also highy appreciate a more precise explanation where to put link references to .css and .js (I included jquery via wp_enqueue_script). Thanks in advance for your reply.

    Reply
    • Eric LightbodyMay 24, 2010 at 8:48 pm

      My code only returns the full gallery when you are in a single post, not the post listing. I did that to save on tons of client-side processing, and, more importantly galleria only allows for one gallery per page.

      Unfortunately I don’t have a great solution for you on the js and css placement. I put mine on the single.php file for my client so the js and css will be loaded regardless of whether or not you are using a gallery on that post. You could create a separate template file for gallery pages and call that template within your post or use shortcodes. I think that with WordPress 3.0 we will have much more flexibility with this.

      Reply
      • LukeMay 29, 2010 at 5:22 am

        Yes I know galleria only allows for one gallery per page. The thing is I put all of css and js for galleria including jquery (this time a direct call over wp_enqueue_script) in page.php because I tend to use WP for cms eg. preferring pages over posts. When I look at the source code it’s identical to galleria demo html source code but somehow it doesn’t make the thumbnails and it doesn’t show an active img in . I named all id’s and classes. Any ideas? Thanks!

        Reply
  5. alejandroMay 28, 2010 at 4:41 pm

    Hi. I’m currently using Nextgen Gallery with the flashviewer plugin but would like to switch to Galleria. Any possibility you could set up a “for dummies” style tutorial to get the basics set up with the templates included in the Galleria download (http://github.com/aino/galleria)? I’m very un-technical.
    Thanks.

    Reply
  6. ADBJune 17, 2010 at 10:53 am

    Hi, this is slightly off topic, but I’m looking for a way to use multiple .css files, one per template. I find it easier than adding custom classes to nggallery.css each time (assuming this is the way to go). Is there a way to do this? Am I missing the obvious? TIA.

    Reply
  7. Romeo PatrickOctober 8, 2010 at 4:04 pm

    Hmm,

    My site seems not to wanna show the galleria option. What id does is only listing all the images in a row, fullsize as you can see here:

    http://sandbox.romeon.net/2010/10/08/test-4/

    Any ideas?

    I tried this on 3 different themes, same thing. And if i get it to actually work, how would i intergrate it on a page and not onl on posts? Thanks

    Reply
  8. triaDecember 15, 2010 at 10:52 am

    I’m trying to follow your steps. Dreamweaver gives me a synthax error on line 25/26.
    Also could you upload your single.php with the javascript integrated?
    thanks a lot!

    Reply
  9. AndyDecember 22, 2010 at 12:51 pm

    Thanks for this… exactly what I was looking for… great solution.. works like a treat.. Many Thanks… Love Galleria and Next Gen

    Reply
  10. triaJanuary 4, 2011 at 10:23 am

    if you want to add a button in the header description (fullscreen theme) change the galleria.js as follow:

    // build the gallery frame
    this.append({
    ‘info-text’ :
    [ ‘info-description’, ‘info-author’],
    ‘info’ :
    [‘ ‘ + ‘info-text’ ],

    Reply
  11. triaJanuary 4, 2011 at 10:25 am

    secondpart: [ ‘info-description’, ‘info-author’],
    ‘info’ :
    [‘ ‘ + ‘info-text’ ],

    Reply
  12. triaJanuary 4, 2011 at 10:27 am

    me again with a link as the textboxes are too small again:
    http://textbin.com/6q083

    Reply
  13. JeffApril 14, 2011 at 1:50 am

    On the homepage of the site I’m developing I have a list of the 5 most recent posts. If one of those posts has a [singlepic] how would I pull that dynamic info and display it as thumbnail in my list of posts?

    Reply
  14. DonApril 26, 2011 at 4:03 am

    Hey Eric! Thanks for this really helpful tutorial on how to merge those 2 great plugins for WP. I’ve installed the NextGen gallery plugin, and have created the nggallery folder at my root drive, edited the gallery.php, but am not sure how to call the javascript file now. I want to put the gallery in pages. Is it sufficient to add this into page.php?


    <script type="text/javascript" src="wp-content/themes/twentyten/js/galleria/galleria-1.2.3.min.js”>

    // Load theme
    Galleria.loadTheme(‘galleria.classic.js’);
    $(‘#galleria’).galleria();

    The galleria.classic.js is located in the following path: wp-content/themes/twentyten/js/galleria

    I tried the above and all I get are the full-sized images showing one after the other now. NG Gallery was tested working fine on its own.

    Would be really grateful for any help! Thank you!

    Reply
  15. Jamie WillmottJuly 1, 2011 at 7:59 am

    Cheers for this post Eric – gave me a starting point for doing my own integration.

    One thing I would mention, that as well as using the wp_enqueue_script to load the galleria script, you need to put the call to the gallery in a wrapper like this:

    Galleria.loadTheme(‘../galleria/themes/classic/galleria.classic.min.js’);

    jQuery(function($){
    $(“#gallery”).galleria({
    width: 650,
    height: 500
    });
    });

    Reply
  16. EricAugust 4, 2011 at 12:05 am

    Hi Eric,

    Do you have any idea why my gallery is distorted after edited the thumbnails? http://www.singpetra.com/media/photo-gallery/

    As well, how can I make the particular gallery change to next page when click on next or 2 link? Currently, when I click on next or the 2 or 3 and so on the entire galleries will be changed as well.

    Hope that this can be solved.

    Thanks!

    Reply
  17. Wood RailingSeptember 24, 2011 at 11:19 pm

    I just learned how to add a next gen gallery to a category archive page, like this one about my custom deck balusters http://awoodrailing.com/deck-balusters/

    Here is the link to the help thread on wordpress forum:
    http://wordpress.org/support/topic/nextgen-gallery-in-template?replies=12

    Reply
  18. 4ntonOctober 12, 2011 at 2:01 pm

    Hello,
    what I am trying to do is instead of putting the shortcode [nggallery id=1] in my blog post content I would like it to copy it in a custome field so that I can place it anywhere in my theme. but it doesn’t work that way. any ideas?

    Reply

Post a Comment

I promise not to publish your email address.

*
*