NextGEN is a fully integrated Image Gallery plugin for WordPress. It makes setting up, organizing and displaying website photos very easy. When surfing around the internet the majority of the questions and issues around NextGEN relate to the display of the images or what data is shown in all of NextGEN’s various templates. This article will not be an all inclusive tutorial on how to modify every last detail of NextGEN galleries but rather a few tips pointing you in the right direction.
Future Proofing your NextGEN Edits
The author of NextGEN has an extremely powerful and flexible template solution implemented for allowing the modification of core plugin files while making sure that any of these edits will not be overwritten in future plugin or WordPress updates. This all happens by way of making use of a priority driven template system. When NextGEN spits out it’s required PHP and CSS it first looks in your theme directory for templates before it goes to it’s default location for this info within the plugin files. This allows you to create your own templates that will not be stored in the plugin directory that gets overwritten every time you update the plugin. Brilliant!
NextGEN gallery templates by themselves are pretty well thought out in how they work in every step of the user experience. It is a rare day, however, when there wouldn’t be just one thing you would like to change about it that isn’t possible from NextGEN’s vast administration section in WordPress. A few common requests would be to add the photo alt text below each thumbnail on the gallery view pages, or to stylize the thumbnails with some creative backgrounds. The following will explain how to do just that.
Warning – this is not for the faint of heart and it will be assumed that some basic knowledge of FTP, HTML, CSS and PHP is had. It is however fairly easy once you know your way around to do just about anything you could imagine. This is where I feel the true power of NextGEN comes into the spotlight.
Changing the Look of NextGEN Galleries
If you take a look with Firebug on a gallery page created by NextGEN you will notice that the code is spit out with as many CSS tags as you would need for about any layout or look desired. The intial worry that I had about adding my own custom CSS to the plugin files was it being overwritten during an upgrade. I was pleasantly surprised to learn about how to prevent this. Just follow the following steps to make your own CSS template:
- Go to /wp-content/plugins/nextgen-gallery/css and make a copy of the nggallery.css file
- Place a copy of your nggallery.css file in your themes folder: /wp-content/themes/yourtheme/nggallery.css
- Succeed!
NextGEN will look to see if this file exists in your theme folder before it reads the CSS in your plugin folder. Make as many changes as you want to this copied CSS file and it will not get overwritten during an upgrade. For instance you could replace the .ngg-gallery-thumbnail class with something like this:
.ngg-gallery-thumbnail {
-moz-border-radius:10px 10px 10px 10px;
background:none repeat scroll 0 0 #CCCCCC;
float:left;
margin:15px;
padding:5px;
text-align:left;
width:200px;
}
It isn’t beautiful…but you get the idea.
Adding Additional Data to NextGEN Galleries
Now lets say you want to change something about the same gallery view besides what is possible with CSS. Maybe besides just having row after row of images you would also like to see the photo alt text below each. This is all very easy and will be handled in about the same way the CSS modifications where implemented. Take the following steps to accomplish this:
- Make a copy of the file called gallery.php located here: /wp-content/plugins/nextgen-gallery/view
- Make a new folder called nggallery in your theme folder: /wp-content/themes/yourtheme/nggallery
- Place your copy of the file called gallery.php here
You can now alter this gallery template file without having to touch the plugin files themselves.
To add the alt text below the thumbnails just add this code just above the closing “ngg=gallery-thumbnail” DIV tag:
<?php echo $image->alttext ?>
Although my specific examples are not too amazing the process would be the same for any type of NextGEN modification you could dream up. Enjoy!