Top Down Contact Closed
Home > hacks > TimThumb及其在wordpress中的应用

TimThumb及其在wordpress中的应用

2009/10/29 Add 14 comments |

一、什么是TimThumb?

TimThumb是一个简洁高效的创建图片缩略图的程序。它功能非常强大,并且制定性很强。通过对多个参数的控制,你可以灵活地设置缩略图片的输出样式。

如果你建立了一个图片博客,缩略图的输出是必不可少的。你如果打算手动为每一个图片制作缩略图,我想那不是明智的选择,工作量大且繁琐;若果你使用原图输出,只是通过width、height这些简单的属性来控制显示的效果的话,当你的网页上需要显示的图片很多时,载入速度则会变得很慢,从而影响读者的阅读体验。而使用TimThumb则是一个很不错的选择,它可以为你的网站批量地生成样式化的缩略图,并在你的主机上缓存起来。这样既生成了缩略图也加快了载入速度。


简单地说TimThumb使用更精简的程序来达成phpThumb的功能,增加了对PNG和GIF图片格式的支持,并且通过缓存提高了程序的执行效能。

据说TimThumb原本是附加在Mimbo Pro这个WordPress主题中的PHP缩图程序,后来开发团队将它独立为一个开放的源代码以供更多的人使用。你可以到其Google SVN中查看最新开发进展或用TortoiseSVN下载最新版本。



二、如何使用TimThumb?

1、请保证你主机上的GD library是开启状态(这个一般默认都是)

2、下载TimThumb.php程序文件,并将其上传到你网站的任意目录下(本文假定在/scripts/文件夹内),需要注意的是TimThumb所在目录的权限必须设置成777

3、TimThumb程序会在其所在同级文件夹下建立名为「cache」的子文件夹(所有生成的缩略图都将自动保存在此文件夹内),如果主机权限不如许的话,请手动建立同名文件夹,并将此文件夹权限设定为777。 
4、调用图片方式示例:

<IMG alt="" src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1">

5、参数的设定:

w: width //宽度

h: height //高度

zc: zoom crop (0 or 1) //是否裁剪,0为否,1为是,默认是从图片中央进行裁剪。

q: quality (default is 75 and max is 100) //图片质量75-100,默认为75



三、TimThumb在wordpress中的应用实例

我们现在以TimThumb在Black Canvas这个主题中的应用为例来看看其在wordpress中一些简单的应用。在这个例子中要涉及到另外两个概念,一是wordpress中的“自定义字段”(Custom Field);另外一个是WP_Query()函数。如果你对这两个东东不甚了解,请先用Google搜索一下O(∩_∩)O~

这个主题是一个图片主题,它的每篇日志的图片添加是用image这个自定义字段添加的,在其首页的下面的Recent Photos就是使用TimThumb这个功能实现的,具体代码如下:

<h3>Recent Photos</h3>

<?php $recent = new WP_Query("showposts=10&offset=1"); while($recent->have_posts()) : $recent->the_post();?>

<a href="<?php the_permalink() ?>"><img class="thumbnails" src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php bloginfo('url') ?>/uploads/=<?php echo get_post_meta( $post->ID, "image", true ); ?>.png&w=75&h=50&zc=1" alt="<?php the_title(); ?>" /></a>               
<?php endwhile; ?>

显示效果如本文题图所示。

我们再看下面这一段示例代码,也是TimThumb和Custom Field结合的例子:

<a href="<?php bloginfo('template_directory'); ?>/js/timthumb/timthumb.php?src=<?php bloginfo('url') ?>/uploads/=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>.jpg&w=500&h=375&zc=1" onclick="return hs.expand(this)">

以上是一个简单的示例,你还可以以此类推定义随机日志之类等等。

四、加快图片的载入速度

你可以把以下规则添加进你的.htaccess文件中,可加速图片载入速度:

RewriteEngine on

RewriteRule .* - [E=HTTP_IF_MODIFIED_SINCE:%{HTTP:If-Modified-Since}]

RewriteRule .* - [E=HTTP_IF_NONE_MATCH:%{HTTP:If-None-Match}]

OK,关于TimThumb的基本用法就介绍到这里,希望能对初接触这个功能的新人有所帮助。

后面将会介绍一下TimThumb的一点进阶用法,如果你感兴趣的话,希望继续关注!

Ad spot

声明:城市@后版权所有,未经授权请勿转载本博客日志到任何博客或论坛!

如果你喜欢我的文章,欢迎订阅。Google Reader | 鲜果 | 抓虾 | 九点 | QQ邮箱 | 有道 | 更多

Posted by: Gil | Categories: hacks | Tags: , , , | Read: 928 views
  1. 10月 29th, 2009 at 16:32 | #1

    了解了。

  2. 10月 29th, 2009 at 18:27 | #2

    期待进阶用法。。

  3. 10月 29th, 2009 at 19:55 | #3

    TimThumb不是被墙了嘛,我以前用过的,被墙之后就撤了

  4. 10月 29th, 2009 at 20:34 | #4

    围观下 我暂时用不到~~

  5. 10月 29th, 2009 at 21:22 | #5

    是个好东西,我也去试下。谢谢!

  6. 10月 29th, 2009 at 23:06 | #6

    @Louis Han
    嘿嘿,敬请关注! :roll:

  7. 10月 29th, 2009 at 23:07 | #7

    @万戈
    恩...你说的被墙的这段往事我还不甚了解 :mrgreen:

  8. 10月 29th, 2009 at 23:09 | #8

    @whisperer
    欢迎围观,小声问一下:来我博客是不是有“回家”的感觉? :grin:

  9. 10月 30th, 2009 at 11:22 | #9

    正在寻觅一个图片博客主题,恩,希望到时候这个能用上
    不过看上去,似乎很技术……

  10. 10月 30th, 2009 at 14:16 | #10

    @流星天空
    上传一个文件,而后生成一个文件夹,开启一个权限,之后全自动?
    缩略图都在文件夹里面,这空间还真要保留起来……

  11. 10月 30th, 2009 at 14:49 | #11

    @流星天空
    对,之后就是全自动,不用你管。你只是调用它就OK!其实很简单,没有什么技术含量,但是很有用 :|
    有时间我推荐几个图片博客主题给大家 :cool:

  12. 11月 1st, 2009 at 18:19 | #12

    @Gil 安装了,没地方进行修改,好似没看出来啥变化啊

  13. 11月 2nd, 2009 at 12:45 | #13

    @流星天空
    没有地方进行修改? :?: 只需要在你想出现缩略图的地方调用代码就可以了嘛 :|

  14. 11月 2nd, 2009 at 13:57 | #14

    @Gil 原来还是要修改代码啊……

  1. No trackbacks yet.