本文利用正则表达式查找文章内的图片信息,并在首页显示第一张图片的缩略图。效果请参看 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;
}

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