Customizing the NextGen Gallery Plugin (WordPress)

While working on a client solution, I needed to customize an already great plugin NextGen Gallery.

The client wanted a staff directory, and I thought it would look good as a gallery with the staff bio fully visible in the lightbox. That part was easy, just put the staff bio in the description box in the gallery.

Now my goal was to have just a snippet of the bio visible on the directory. Therefore we have to trim the bio down for the gallery view and through CSS magic rearrange it so that it does not appear below the gallery image, but to the right.

First the code. We need to modify one of the next-gen files. Make sure you back these changes up, because they will get written over if you upgrade the plugin.

The file needed to modify the gallery-caption.php file and is located in your plugins directory. nextgen-gallery –> view –> gallery-caption.php

We are going to replace this line of code:

<?php echo $image->caption ?>

with the following lines of code:

<?php echo $image->alttext ?>
	<?php $longcap=$image->caption;
	$shortcap=substr($longcap,0,150); ?>

<?php echo $shortcap; ?><a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > <br />[MORE]</a>

This takes our caption and shortens it to 150 characters for our purposes. Just change the 150 to whatever length you want.

Now we play with the CSS to get the caption over to the location we want. For my purposes, I have a two column gallery and I moved the new caption sipper to the right of the thumbnail.

.ngg-gallery-thumbnail span {
	/* Images description */
	font-size:80%;
	padding-left:5px; 
	display:block;
	float:right;
	text-align:left;
	position:relative;
	left:-20px;
	top:-170px;
	width:300px;
}

The results look like this…

4 Comments

  1. Hi there, have updated css file but having problems with pasting the code in the gallery-caption.php keep on getting unexpected < on line 50 error. Any ideas?

    Thanks,

  2. Jc Almonte Reply

    Anthony, I am new to wordpress and i am trying to apply the technique you used to create a staff directory for a university website. I can’t find the “gallery-caption.php” in the current version of NextGen gallery (Version 2.0.40). IS this file not present in the current version?
    Is there any other plug-in you would recommend to do what i am trying to do.
    I want to present the staff with a preview image and info just like you have it, and then when a user clicks on it i want to present it in a more detailed view like the example in the link below:
    http://psc.usu.edu/htm/people/faculty/memberID=5101

    Thanks!

    • In the current version, gallery-caption.php is located in the /products/photocrati_nextgen/modules/ngglegacy/view/ folder.

      Line 55 has the echo $image -> caption code you need to change.

Leave a Reply