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

posted on 03.29.10
, ,

Update: Here is an example of nextgen / galleria in action.

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:

<?php foreach ( $images as $image ) : ?>

 <div id="ngg-image-<?php echo $image->pid ?>" <?php echo $image->style ?> >
 <div >
 <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
 <?php if ( !$image->hidden ) { ?>
 <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
 <?php } ?>
 </a>
 </div>
 </div>

 <?php if ( $image->hidden ) continue; ?>
 <?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
 <br style="clear: both" />
 <?php } ?>

 <?php endforeach; ?>

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

<?php foreach ( $images as $image ) : ?>
 <?php
 $imgCounter = 0;
 if ( !$image->hidden ) { ?>
 <li<?php if ($imgCounter == 0) : ?><?php endif; ?>><img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->url ?>" /></li>
 <?php } ?>

 <?php if ( $image->hidden ) continue; ?>
 <?php $imgCounter++;?>
 <?php endforeach; ?>

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:

<?php
/**
Template Page for the gallery overview

Follow variables are useable :

 $gallery     : Contain all about the gallery
 $images      : Contain all images, path, title
 $pagination  : Contain the pagination content

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

 <?php if (is_single()) : //only call full gallery if on single page ?>
 <!-- Thumbnails -->
 <div></div> <!-- container for main image -->
 <div>
 <!-- <ul>  -->
 <ul>
 <?php foreach ( $images as $image ) : ?>
 <?php
 $imgCounter = 0;
 if ( !$image->hidden ) { ?>
 <li<?php if ($imgCounter == 0) : ?><?php endif; ?>><img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->url ?>" /></li>
 <?php } ?>

 <?php if ( $image->hidden ) continue; ?>
 <?php $imgCounter++;?>
 <?php endforeach; ?>
 </ul>
 </div>
 <!-- Pagination -->
 <?php echo $pagination ?>

 <?php else : //if on post list then display single image ?>
 <div>
 <img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->url; ?>" />
 </div>
 <?php endif; //list?>

<?php endif; ?>

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. Tom says...
     
    4.9.10

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

    reply
  2. Stacey says...
    wp.merrilyrollingalong.com
     
    4.16.10

    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 Lightbody says...
      ericlightbody.com
       
      4.25.10

      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 Schinker says...
    iamheinz.be
     
    5.10.10

    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
    • Edgar Schinker says...
      iamheinz.be
       
      5.10.10

      Oh, my wordpress is still in another folder: iamheinz.be/hz

      reply
      • Eric Lightbody says...
        ericlightbody.com
         
        5.11.10

        Did you figure everything out?

        reply
        • Edgar Schinker says...
           
          5.12.10

          Nope, but I used another gallery-plugin :)

          thx anywayz

  4. Luke says...
     
    5.23.10

    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 Lightbody says...
      ericlightbody.com
       
      5.24.10

      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
      • Luke says...
         
        5.29.10

        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. alejandro says...
     
    5.28.10

    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. ADB says...
     
    6.17.10

    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 Patrick says...
    romeon.net
     
    10.8.10

    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
    • Eric Lightbody says...
      ericlightbody.com
       
      10.11.10

      Are you able to get NextGen working at all without trying to integrate galleria? As far as pages go, it’s the same process as integrating it on a post.

      reply
      • Romeo Patrick says...
        romeon.net
         
        10.11.10

        Thanks for the swift reply, yeah, got it working with no probs NGG without galleria, but for some reason it started displaying the pictures one by one :(

        reply
  8. tria says...
     
    12.15.10

    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
    • tria says...
       
      12.15.10

      that should work for a simple single.php (it did for me…)
      ______________________________________________________

      !DOCTYPE html>

      Galleria Fullscreen Theme Demo 01

      body{background:#000;}

      <div id=”post-“>

      // Load theme
      Galleria.loadTheme(‘galleria.fullscreen.js’);

      $(‘#galleria’).galleria();

      reply
      • tria says...
         
        12.15.10

        continuet

        $(‘#galleria’).galleria();

        reply
        • tria says...
           
          12.15.10

          not enough space to display the whole single.php….

        • tria says...
           
          12.15.10

          here the whole php:

          http://textbin.com/574i2

    • Eric Lightbody says...
      ericlightbody.com
       
      12.15.10

      The example I did for http://www.adamkoenigblog.com was completely custom, so it’s not really going to help you out at all. If you provide a link to your page it would help me help you.

      reply
  9. Andy says...
    atelier-studios.com
     
    12.22.10

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

    reply
  10. tria says...
     
    1.4.11

    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. tria says...
     
    1.4.11

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

    reply
  12. tria says...
     
    1.4.11

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

    reply
  13. Jeff says...
    jefflejune.com
     
    4.14.11

    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. Don says...
     
    4.26.11

    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
    • Eric Lightbody says...
      ericlightbody.com
       
      4.30.11

      I used the wp_enqueue_script to add the javascript I needed at the top of page.php.

      For you the call would like something like:

      < ?php wp_enqueue_script('galleria', get_bloginfo('template_directory') . '/js/galleria/galleria-1.2.3.min.js'); ?>

      reply
  15. Jamie Willmott says...
    twitter.com/jamiewillmott
     
    7.1.11

    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
    • Eric Lightbody says...
      ericlightbody.com
       
      7.7.11

      Really glad to hear it helped! Thanks for the feedback.

      reply
  16. Eric says...
     
    8.4.11

    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
    • Eric Lightbody says...
      ericlightbody.com
       
      8.21.11

      Thanks for posting! I can’t see the distortion you mentioned, so I imagine you were able to figure it out. Let me know if you weren’t.

      reply
  17. Wood Railing says...
    awoodrailing.com
     
    9.24.11

    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. 4nton says...
     
    10.12.11

    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

Speak your mind

Email is never made public. If you would like a profile picture to show next to your comments, setup a Gravatar account

*
*