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:
with the following lines of code:
<?php $longcap=$image->caption;
$shortcap=substr($longcap,0,150); ?>
<span><?php echo $shortcap; ?><a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > <br />[MORE]</a></span>
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.
/* 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…
Recent Posts
Client Work
