获取文章内的图片做缩略图

由 axiu 撰写于 2010/07/26 | 76 条评论

thumbimg文章的缩略图功能在新版本的WordPress中已经有了,效果应该很不错。但是对于有很多旧文章的人来说,一篇一篇去修改显然很麻烦。插件有很多,如果你已经用上而且效果不错的话,可以随便看看。这里提供一个简单的缩略图生成方法-提取文章第一张图片做缩略图。可能很多同学那里已经使用上了,这里就在啰嗦几句吧。

获取文章图片的主要代码需要放在首页(当然可以是别的什么地方),找到文章主体部分,放入以下代码

<?php
$soContent = $post->post_content;
$soImages = '~<img [^\>]*\ />~';
preg_match_all( $soImages, $soContent, $thePics );
$allPics = count($thePics[0]);
if( $allPics > 0 ){
echo '<span id="thumb">';
echo $thePics[0][0];
echo '</span>';	
}
else {
echo "<img src="XXX.jpg"  />";      //这里可以放入你想要的图片地址如,注意图片大小
}
?>

放入之后你会发现一个问题,图片有大有小,而且可能占据了文章大部分地方,页面杯具。这里需要稍微定义一下图片的css。例如这样

#thumb{padding:0px; margin:15px 15px 15px 4px;width:145px;height:115px;border:3px solid #222;float:left;overflow:hidden;background:#fff;}
#thumb img{margin-left: 0px; margin-right: 0px; border-width: 0px;max-height:186px;max-width:186px}

注意:max-weight&height是对img进行的一点缩放,ie6不支持max-width&height。

好了,这样子就实现了一个简单的缩略图效果。对于图片较少的童鞋,放几张默认图片或者广告图轮着换也不错哈。

评论:76

  1. Mucid
  2. Mucid 10/08/09

    就是这句,假如我想要这种效果
    echo ‘<img src="/wp-content/themes/xx.jpg” />’
    :shock:

  3. Mucid
  4. Mucid 10/08/09

    就是这句,假如我想要这种效果
    echo ‘( img src=”bloginfo( ‘url’ )/wp-content/themes/xx” ) ’
    囧,打不出网址和php演示代码。。

    • axiu
    • axiu 10/08/09

      @Mucid 试试echo ‘(img src=”‘.get_bloginfo(‘url’). ‘/images/ad.png”/)’;
      (换成<..

    • Mucid
    • Mucid 10/08/09

      @阿修 呃,你也打不出来,我的主题必须使用绝对定位,不然只能在文件分页一显示,大哥发到偶的邮箱吧,i#mucid.me谢谢大哥了啊 :grin: :grin:

    • axiu
    • axiu 10/08/09

      @Mucid 我改了改~~你看看

    • Mucid
    • Mucid 10/08/09

      @阿修 OK了,谢谢大哥啊 :roll: :grin: :grin: :grin:

    • axiu
    • axiu 10/08/09

      @Mucid 呵呵,只是一个小地方而已~~

  5. Mucid
  6. Mucid 10/08/09

    看来必须进入PHP的学习了 :grin: :grin:

  7. 亿品元素
  8. 亿品元素 10/08/18

    这篇技术文章要学习!!!

  9. in1874
  10. in1874 11/02/12

    直接使用 出错,最后 echo “”; 双引号 改 单引号 即可 。

  11. Sky Woo
  12. Sky Woo 11/02/23

    学习了,赞一个,博客刚开,到处逛哈哈哈 :mrgreen:

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

:razz:

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

RSS订阅