NextGen Gallery hacks: The lesser known $nggdb object
NextGen Gallery is a well known and popular image gallery plugin for WordPress. It is fairly easy to use and is great for clients who like to manage their own images, galleries, and albums. It is also has a very flexible template system, so you can style it almost any way you want.
One way I like using NextGen Gallery is to use the little known $nggdb class. While I’m aware there are other ways to play with NextGen Gallery such as the previously mention templates system and Shortcodes, using the $nggdb class allows you to display your images and galleries in areas you normally couldn’t such as your theme and plugin files.
Getting Started
Firstly, the $nggdb class is stored within a global variable which means you need to declare it or create a new instance of it by using the following.
1 2 3 4 5 | <?php global $nggdb; //or $my_nggdb = new nggdb(); ?> |
<?php global $nggdb; //or $my_nggdb = new nggdb(); ?>
Next, you need to use one of the $nggdb classes many functions and assign the output to a local variable like below.
1 2 3 4 | <?php //In this example, I'm using get_gallery to grab data about all the images in a particular gallery. $gallery = $nggdb->get_gallery($id, $orderby, $sort_direction, $exclude, $limit, $start); ?> |
<?php //In this example, I'm using get_gallery to grab data about all the images in a particular gallery. $gallery = $nggdb->get_gallery($id, $orderby, $sort_direction, $exclude, $limit, $start); ?>
The get_gallery function takes a number of arguements listed below:
| Parameter | Description |
|---|---|
| $id (integer or string) | This is the id of the gallery. Can be a number such as 5 or the gallery name/slug such as ‘my-trip-to-melbourne’. |
| $orderby (string) | Set how all the images will be ordered. Default is ‘sortorder’ but can also be:
|
| $sort_direction (string) | Either ‘ASC’ or ‘DESC’ |
| $exclude (boolean) | Set to true or false to exclude images that have the exclude checkbox checked. |
| $limit (integer) | Show the number of paged galleries. 0 shows all galleries. |
| $start (integer) | The start index for paged galleries |
There is also a $json parameter in there somewhere too, but I haven’t seen it used yet. For now, well just stick with the above parameters. Also, the $orderby can take pretty much any column within the ngg_pictures table, however not all of them are useful.
Using the defaults and specifying a gallery ID, we get the following code:
1 2 3 | <?php $gallery = $nggdb->get_gallery(5, 'sortorder', 'ASC', true, 0, 0); ?> |
<?php $gallery = $nggdb->get_gallery(5, 'sortorder', 'ASC', true, 0, 0); ?>
Now comes the fun part. You will have to loop through this variable (which contains the output data) with a foreach loop.
1 2 3 4 5 | <?php foreach($gallery as $image) { //The output for each image goes here } ?> |
<?php
foreach($gallery as $image) {
//The output for each image goes here
}
?>Lets look at the what each item will contain using <?php print_r($image); ?>.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | Array ( [1] => nggImage Object ( [errmsg] => [error] => [imageURL] => http://path.to.your.full.size.image.jpg [thumbURL] => http://path.to.your.thumbnail.image.jpg [imagePath] => /full/server/path/to/your/full/size/image.png [thumbPath] => /full/server/path/to/your/thumbnail/image.png [href] => <a href="http://path.to.your.full.size.image.jpg" title="" class="shutterset_test"><img alt="portfolio-layout" src="http://path.to.your.thumbnail.image.jpg"/></a> [thumbPrefix] => thumbs_ [thumbFolder] => /thumbs/ [galleryid] => 1 [pid] => 1 [filename] => filename.png [description] => [alttext] => your alternative text [imagedate] => 2011-11-11 14:13:31 [exclude] => 0 [thumbcode] => class="shutterset_test" [name] => [path] => [title] => [pageid] => 0 [previewpic] => 1 [permalink] => [image_slug] => [post_id] => 0 [sortorder] => 0 [meta_data] => Array ( [0] => [aperture] => [credit] => [camera] => => [created_timestamp] => [copyright] => [focal_length] => [iso] => [shutter_speed] => [flash] => [title] => [keywords] => [width] => 1280 [height] => 1024 [saved] => 1 [thumbnail] => Array ( [width] => 100 [height] => 75 ) ) [gid] => 1 [slug] => test [galdesc] => [author] => 1 [imageHTML] => <a href="http://path.to.your.full.size.image.jpg" title="" class="shutterset_test"><img alt="" src="http://path.to.your.full.size.image.jpgout.png"/></a> [thumbHTML] => <a href="http://path.to.your.full.size.image.jpg" title="" class="shutterset_test"><img alt="" src="http://path.to.your.thumbnail.image.jpg"/></a> ) ) |
Array ( [1] => nggImage Object ( [errmsg] => [error] => [imageURL] => http://path.to.your.full.size.image.jpg [thumbURL] => http://path.to.your.thumbnail.image.jpg [imagePath] => /full/server/path/to/your/full/size/image.png [thumbPath] => /full/server/path/to/your/thumbnail/image.png [href] => <a href="http://path.to.your.full.size.image.jpg" title="" class="shutterset_test"><img alt="portfolio-layout" src="http://path.to.your.thumbnail.image.jpg"/></a> [thumbPrefix] => thumbs_ [thumbFolder] => /thumbs/ [galleryid] => 1 [pid] => 1 [filename] => filename.png [description] => [alttext] => your alternative text [imagedate] => 2011-11-11 14:13:31 [exclude] => 0 [thumbcode] => class="shutterset_test" [name] => [path] => [title] => [pageid] => 0 [previewpic] => 1 [permalink] => [image_slug] => [post_id] => 0 [sortorder] => 0 [meta_data] => Array ( [0] => [aperture] => [credit] => [camera] => => [created_timestamp] => [copyright] => [focal_length] => [iso] => [shutter_speed] => [flash] => [title] => [keywords] => [width] => 1280 [height] => 1024 [saved] => 1 [thumbnail] => Array ( [width] => 100 [height] => 75 ) ) [gid] => 1 [slug] => test [galdesc] => [author] => 1 [imageHTML] => <a href="http://path.to.your.full.size.image.jpg" title="" class="shutterset_test"><img alt="" src="http://path.to.your.full.size.image.jpgout.png"/></a> [thumbHTML] => <a href="http://path.to.your.full.size.image.jpg" title="" class="shutterset_test"><img alt="" src="http://path.to.your.thumbnail.image.jpg"/></a> ) )
As you can see, there are heaps of properties associated with a single image. Now you can access those properties of a single imagelike this. Remember this code is within our foreach loop, so it will output the below markup for each image.
1 2 3 4 5 | <div class="single_image" id="image-<?php echo $image->pid; ?>"> <a href="<?php echo $image->imageURL; ?>" title="<?php echo $image->title; ?>"> <img src="<?php echo $image->thumbURL; ?>" alt="<?php echo $image->alttext; ?>" /> </a> </div> |
<div class="single_image" id="image-<?php echo $image->pid; ?>">
<a href="<?php echo $image->imageURL; ?>" title="<?php echo $image->title; ?>">
<img src="<?php echo $image->thumbURL; ?>" alt="<?php echo $image->alttext; ?>" />
</a>
</div>All together now
Here is the final code all in one go.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php global $nggdb; $gallery = $nggdb->get_gallery(5, 'sortorder', 'ASC', true, 0, 0); ?> <div id="series_of_images"> <?php foreach($gallery as $image) { ?> <div class="single_image" id="image-<?php echo $image->pid; ?>"> <a href="<?php echo $image->imageURL; ?>" title="<?php echo $image->title; ?>"> <img src="<?php echo $image->thumbURL; ?>" alt="<?php echo $image->alttext; ?>" /> </a> </div> <?php } ?> </div> |
<?php
global $nggdb;
$gallery = $nggdb->get_gallery(5, 'sortorder', 'ASC', true, 0, 0);
?>
<div id="series_of_images">
<?php foreach($gallery as $image) { ?>
<div class="single_image" id="image-<?php echo $image->pid; ?>">
<a href="<?php echo $image->imageURL; ?>" title="<?php echo $image->title; ?>">
<img src="<?php echo $image->thumbURL; ?>" alt="<?php echo $image->alttext; ?>" />
</a>
</div>
<?php } ?>
</div>I’ll update this post later with other methods I frequently use. Stay tuned.
No Responses