Keep on going, never give up.

文章标题图片的三种实现方式

文章标题图片也有叫缩略图的,由于缩略图这个概念各有理解法,内文插图也可以附带缩略图,标题图片也可以带多个缩略图,可以按照各种规格进行显示,所以标题图片似乎更为准确点,标题图片一般只有一个,而且体积一般很小,相对整张图片而言可以加快页面载入,但是标题图片的实现方法却是多种多样,所以本文只常见的实现原理,方便网友对缩略图/标题图片显示机理有所了解,作为自己设计网页、定制博客模板参考,实际运用起来可难可易。

基础阅读:

个人独立博客的建站流程

WordPress和Z-Blog各自特点及选择建议

日志标题图片有三种常见运用方法:

  1. 独立上传和创建的标题图片
  2. 程序抓取的标题图片
  3. 伪造的标题图片

当然上面将要提到的三种方法理论全部可以添加到任何一种博客系统上,只是由于考虑到升级需要,一般多是在本着最小改动系统代码的原则下进行,除非是你自己的系统,否则以后每次升级都要检查甚至是重新修改升级代码,而且系统代码改动越大,以后带来的兼容问题会越多,最好选择一种对系统代码影响最小的方法进行。

一、独立上传和创建的标题图片

这类缩略图来源于独立上传和创建,这种方式多在新闻系统及常见的CMS里(比如帝国CMS里的标题图片字段titlepic),就像日志摘要一样,数据表会设计一个专门的字段来保存缩略图地址,写日志时,需要单独上传这个标题图片或者叫索引图片,系统自动剪切并生成指定大小的缩略图图片(一个或多个),在实际显示时可以大小统一步调一致,如下图是网易的新闻图片,如果你把这些缩略图保存到本地,会发现它们全是相同大小的,这些小缩略图都是由程序自动生成的。

在编辑新闻时,就已经指定该日志的标题图片,如下图是帝国的CMS表单情况:

而Z-Blog和WordPress都没有单独预留这个字段,所以,只能通过下面的方式实现类似的效果,在WordPress上可以通过插件或手动修改程序的方式达到显示缩略图的目的。

二、程序抓取的标题图片

程序抓取和下面的伪造都是常用实现方法,在Wordpress和Z-BLOG上经常用到,日志数据表不带独立的标题图片字段,所以就需要自己找源,要么是来自于日志内文图片,要么来自于自己指定位置的图片,程序员可以通过程序来抓取内文图片作为题图显示,可以只显示第一副插图,也可以随机显示,这一点在WordPress上很容易实现,因为WordPress上传附件都有父项记录(表wp_posts,字段post_parent),很容易找到它的“爸爸”是谁,然后就是读取显示就可以了。

所以在Wordpresss上要想为自己的文章显示缩略图,要么使用插件,要么必须自己手动修改程序到数据库里去抓取,所以PHP+MYSQL的基本用法还是必须的。而Z-Blog上所有的上传附件都没有parent标记,也就是说除非你去搜索,否则根本无法判断某个附件/图片归属的日志文章,那么要想随机抓取还是比较麻烦的,因为涉及查询过程效率极低,所以在Z-BLOG上一般采用下面的方式。

三、伪造的标题图片

既然是伪造,就是不太完美的,甚至可能只有使用者自己才明白,伪造过程是利用博客或CMS系统的特点,来实现自己独特的题图显示方式,通过是利用博客程序主题模板的替换过程或执行过程,有意的设置标志或标记,而又几乎不需要去修改系统源码(或是插入少量的修改代码),同样可达到显示缩略图的目的,比如在Z-Blog典型应用,可以利用的标记有<#article/firsttagname#> 、<#article/intro#>、<#article/id#>等等(更多变量:Z-BLOG模块文件及标签变量说明),就是利用Z-BLOG在调用模板是需要替换这些变量,所以当你有意在需要替换的文件里组合利用这些字符串,让Z-BLOG自动替换掉,就可以实现自己的功能,比如下面这段代码:

标签:<#article/firsttagname#>

那么替换后效果就是显示“标签:xxx”,而如果你把标记这样放置:

<img src="/images/<#article/firsttagname#>.jpg" />

这样替换出来的效果就不是标签了,而是调用images目录下名称为xxx格式为.jpg的一张图片,这个过程就是伪造,因为这个用法已经脱离了原标记变量的意义,只是我们有意这么做而已。当然在Wordpress上也可以这么用,但需要自己去调用变量来替换,因为WORDPRESS跟Z-BLOG的主题应用方式有所不同。

四、如何协调日志缩略图的显示风格

1、缩略图位置协调示例

天缘博客文章列表是左侧缩略图,还有的博客是居中一张大图,用上文任何一种方式你都可以达到显示缩略图或标题图片的目的,但是要再“好看”一点,比如统一靠左对齐或居中对齐等,就需要运用到CSS层叠样式表,这属于前端设计的问题,比如上面的图片代码,如果改成:

<div style="float:left;border:1px solid #CCC;margin:0px 3px 3px 0px;"><img src="/images/<#article/firsttagname#>.jpg" /></div>

那么显示效果就变成类似天缘博客首页缩略图的样子,如果改成float:right,则是类似本文广告的样式,可以根据自己需要定制,当然这个方法不是唯一的。

2、缩略图的大小问题

缩略图的大小可以通过手动创建时指定或程序来约束,如果数量有限的缩略图,比如天缘博客上的文章缩略图实际上跟TAG是对应的,全博客只有60个TAG,就可以手动设计60个大小一致的图片,然后全部统一按照规则命名,后由程序自动替换调用就可以了。

如果你的标题图片太多,比如每篇文章一个不同的标题图片,不可能手动一一制作,那么只能使用程序来约束,要么就是在图片上传自动剪裁到合适大小,要么就是豁出去,全部指定宽度和高度,而不管原图如何大小(效果不好最好不用),比如:

<img src="/images/abc.gif" width="150" height="90"/>

还可以使用Javascript等动态调整(效果好一些),比如:

<img src="/images/abc.gif" onload="ResizeImage(this,150)"/>

当然最理想的,还是已经裁剪好或是准备的尺寸大小且按照100%比例显示的图片,至于采用哪种方式,还是要看个人习惯,或是哪个更方便,能有更好的兼容性。

3、关于画廊展示

画廊展示在很多图片站上很常见,对大部分非图片型网站、博客而言,画廊展示纯粹是为了增加美感动感,比如天缘博客上尽是些Windows窗口抓图,如果使用统一大小的画廊展示,根本不知道是什么,而对风景、美女、打架斗殴等这类本来就吸引眼球的东西,如果使用画廊效果会更好,如下图(来源网易):

画廊展示原理也不复杂,只不过是上文内容的综合运用而已,增加了热点抽取或是随机抽取。WordPress用户可以使用插件来实现画廊效果,在Z-Blog上要实现画廊图片,那更麻烦了,因为Z-BLOG本来就面向专心写作、少折腾的用户使用的,所以Z-BLOG用户还是别浪费时间了,真的不值得。

综述:

虽然只是简单的标题图片,实际上涉及的知识面并不少,要想灵活的实现标题图片功能,还是要花些功夫的,最基础的只修改Z-BLOG主题实现显示缩略图也要求掌握“网页编辑器使用”、“CSS样式表”、“FTP软件上传下载”、“图片大小定制”这几个方面知识。

下一篇文章我会介绍Z-BLOG添加缩略图的完整实现,但是对于一个如果使用FTP软件都有困难的用户而言,可能天缘博客上文章目前来讲,还不能完全解决所有的细节问题,持续的学习心态或许更重要。

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.