Domety

本文利用正则表达式查找文章内的图片信息，并在首页显示第一张图片的缩略图。效果请参看 http://domety.com 主页。

页面中的图片格式为<img … src=”图片链接” … />，查找此种格式的正则表达式有多种写法，下面是其中一种

<img\s+.*?src=[\'"]?(.+?)[\'"]?(\s+.*?)?\/\s*>

(.+?)中匹配的就是图片链接的地址。然后调用preg_match_all函数

preg_match_all('/<img\s+.*?src=[\'"]?(.+?)[\'"]?(\s+.*?)?\/\s*>/si', $content, $strResult, PREG_PATTERN_ORDER);

数组$strResult[1]中就保存了所有的图片链接(正则表达式中第一个括号中的匹配内容)，我们可以通过计算数组的大小来得出图片的个数，再对数组进行遍历可以得到每一个图片的链接地址。

以下是本人首页缩略图的代码片段

$content = $post->post_content;
preg_match_all('/<img\s+.*?src=[\'"]?(.+?)[\'"]?(\s+.*?)?\/\s*>/si', $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n > 0){
    echo '<div class="thumbnail"><a href="'.get_permalink().'" title="阅读全文"><img   src="'.$strResult[1][0].'" alt="" /><br />阅读全文('.$n.'P)</a></div>';
}
else {
    echo '<div class="thumbnail"><a href="'.get_permalink().'" title="阅读全文"><img src="'.get_bloginfo('template_url').'/imgs/default_thumbnail.jpg" alt="" /><br />阅读全文(无图)</a></div>';
}

以下是css样式，仅供参考

.post .postcontent .thumbnail {
    font-size:12px;
    text-align:center;
    float:right;
    padding-left:12px;
}
.post .postcontent .thumbnail img{
    width:200px;
}

这种显示缩略图方法的好处是显而易见的：我们在写文章的时候无需做额外的操作，网站的备份也简单。但是有一个缺点：因为首页加载了一些图片，会对加载速度产生一定的影响，因此要做好文章里图片的压缩工作。