数据范儿

用NextGen Gallery这个插件很久了，一直以来没有好好琢磨，这几天遇到一些问题，正好整理出来与大家分享。以下的内容翻译自Narasopa Media，目的是向相册文件列表里给图片添加标题和描述。

最近给一个客户做项目时我遇到一个问题——为了搞定我的项目，需要用一个什么样的Wordpress插件呢？哥考虑再三，左搞右整，NextGen Gallery 这个插件脱颖而出，但是这家伙并不是服服帖帖，它不能按哥的想法呈现数据。

这货在Album视图下，会以网格形式列出所有缩略图，但问题是，哥希望这个网格里能随图片显示Title和Description（标题和描述）。

实际上，这个问题相当容易搞定。

在nextgen-gallery/view文件夹里，有一个文件叫做“gallery.php”。

在这个文件里，有一小段代码用来显示缩略图。

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

<div id=”ngg-image-<?php echo $image->pid ?>” class=”ngg-gallery-thumbnail-box” <?php echo $gallery->imagewidth ?> >

<div class=”ngg-gallery-thumbnail” >

<a href=”<?php echo $image->imageURL ?>” title=”<?php echo $image->description ?>” <?php echo $image->thumbcode ?> >

<img title=”<?php echo $image->alttext ?>” alt=”<?php echo $image->alttext ?>” src=”<?php echo $image->thumbnailURL ?>” border=”0″ <?php echo $image->size ?> />

</a>

</div>

</div>

<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>

<br style=”clear: both” />

<?php } ?>

<?php endforeach; ?>

我们要做的是，在img标签之后加这么段代码：

<p align=”left” style=”margin-left:0px;”>

<strong><?php echo $image->alttext ?></strong>

<br />

<?php echo $image->description ?>

</p>

这就好了。哥还想在自己的主题里，想在顶部的同一高度显示所有描述。因为哥一般不用图片编辑器里的裁剪功能形成同样大小的缩略图（默认情况下，会在图片下显示），所以图片都不一边高。为了解决这个问题，哥还在NextGen的样式表里加了这么一小段代码：

.ngg-gallery-imagewrap {

height:175px;

}

然后把图片放进div里，div写上class=ngg-gallery-imagewrap。

哥最后完整的代码是酱紫滴：

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

<div id=”ngg-image-<?php echo $image->pid ?>” class=”ngg-gallery-thumbnail-box” <?php echo $gallery->imagewidth ?> >

<div class=”ngg-gallery-thumbnail” >

<div class=”ngg-gallery-imagewrap”>

<a href=”<?php echo $image->imageURL ?>” title=”<?php echo $image->description ?>” <?php echo $image->thumbcode ?> >

<img title=”<?php echo $image->alttext ?>” alt=”<?php echo $image->alttext ?>” src=”<?php echo $image->thumbnailURL ?>” border=”0″ <?php echo $image->size ?> />

</a></div>

<p align=”left” style=”margin-left:0px;”><strong><?php echo $image->alttext ?></strong><br />

<?php echo $image->description ?></p>

</div>

</div>

<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>

<br style=”clear: both” />

<?php } ?>

<?php endforeach; ?>

在这里可以看看效果哦。

翻译完了，您也可以点这里看看我做的效果~

原文链接是http://narasopa.com/seoblog/2009/02/adding-title-and-description-to-nextgen-gallery-thumbnails/