Joomla之门广告招商,PR=5,alexa 排名2万1
English French German Italian Portuguese Russian Spanish

捐款 -> 升级 -> 下载

淘宝捐款升级到高级会员

点击这里给我发消息

Donate to joomlagate.com to translate more Joomla! extensions and free Joomla! templates

下载最新版本 Joomla!

Joomla! CMS - free Joomla! templates
download Joomla! 1.5.15 Chinese version

文章分类阅读

会员登录

 
 
Joomla之门 Joomla教程 Joomla 1.0 教程 flickr4j:把Flickr图库搬回家
flickr4j:把Flickr图库搬回家 E-mail
作者:白建鹏   
2007-04-10

我一向是支持拿来主义的——人生苦短,何必事事亲为?对于个人网站来说,插入视频、图片都是非常耗费网站空间和服务器带宽的。幸好我们有了All Videos Plugin可以引用多大40多个免费视频分享网站的内容,现在该谈谈如何好好利用在线电子相册的问题了。

免费电子相册已经足够多了,国内比较知名的如网易相册、雅虎在线相册等等,国外的如Flickr、ImageShack等等。中文的当然界面更亲切一些,但是当我试图把保存在网易相册的照片插入到我的网站内时,却显示出一个大红叉叉,附带一句警告“网易相册的图片只能用于网易博客”,这不是很Sh!t么?懒得再去看中文的了——不玩了,伤自尊了。

{flickr4j_photo id='446801722' size='2'}

 

听说Flickr不错,我就去注册了一个免费帐号。果然,在Flickr找到一张图片之后,可以将它的URL引用到我的网页中,图片正常显示,既没有水印,也没有警告。正在欣欣然之际,遇到了一个叫做Flickr4j的Joomla组件。简单看了一下作者的介绍,大意是说:可以把保存在Flickr相册里的图片引用到网站,三种形式:借助触发器插入到网页(Content Item)中;借助模块展示在网站某个位置;使用组件专门建立一个图库展示栏目。

 

听起来不错。于是就开始测试。谁知道并不是那么容易,在我一边费劲地体验这个组件同时,我也有了一个想法:一定要把这个痛苦地经历总结一下,把能够顺利插入图片的方法写出来,不要让其他用户再重蹈覆辙。

最主要的一个原因是作者隐瞒了一个事实:要使用这个组件引用Flickr的图片,必须先在Flickr网站申请一个API Key。Thank God,这个API是免费的 :-) 。组件作者也没有告诉我如何申请这个API,在Flickr网站也不容易找到这个方法。经过一番辛苦,终于找到了申请Flickr免费API的网页

你申请这个API的时候一定要耐心,页面当然是英文的,用户名填写清楚并记牢,用途要选择“Non-commercial use”(非商业用途),然后在“Describe the application you are planning to build”填写你准备怎么用(如果懒得陈述就随便写点啥,呵呵)。点击“Apply”按钮之后,你会看到一长串类似“35511ae1fb4c9329e376a89d6913afca”的大号字,这就是你的API,但这时还没有激活。必须点击“Click here to configure user authentication for this key”来设置一番,仔细填写应用范围和理由,最后有一个画面告诉你成功了,并且看到该API的状态是Active,就说明任务完成。

接下来给网站安装Flickr4j套件,共6个安装包,包括Flickr4j组件运行库单个图片插入触发器图片系列插入触发器图片展示模块标签云模块。点击这些链接即可在本站下载中文版。

在继续使用之前,确认你已经拥有了一个Flickr网站的帐号。注意:Flickr使用 Yahoo ID 注册,但是在 Flickr 的用户名却可以与该 Yahoo ID 不同。而你注册API的名字还可以与Flickr的用户名不同(倒!亏他们想得出来)。

下面简单介绍各个部件的用法:

一、运行库触发器

之所以先说运行库,是因为它是整个Flickr4j套件的灵魂。该运行库内含Lightbox2特效,正是有了这个特效,我们在插入文章中的图片上点击鼠标时,才会弹出lightbox2效果的放大窗口。此运行库文件是一个标准的mambot,从后台安装后需要手动发布才能激活。

此触发器安装后,还需要在网站当前模板的 index.php 文件中<head>标记之后,</head>标记之前,插入下面的代码,以便调用其Javascript程序及CSS样式:

 

 

<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/mambots/flickr4j/lightbox/js/prototype.js">
</script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/mambots/flickr4j/lightbox/js/scriptaculous.js?load=effects">
</script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/mambots/flickr4j/lightbox/js/lightbox.js">
</script>
<link href="<?php echo $mosConfig_live_site; ?>/mambots/flickr4j/lightbox/css/lightbox.css" rel="stylesheet" type="text/css"/>

 

在其后台设置页面上只有3个内容:用户名、API和缓存时间。这里的用户名当然指你的Flickr用户名;API就是刚才申请的那个;缓存是用来加速图片显示的,作者没有指明时间单位,我想应该是秒(seconds)。

当然,这个用户名也不一定要用你自己的,只要你知道一个Flickr用户名及其对应的API,就可以了。

二、单个图片插入触发器

这个触发器安装后也需要手动发布。后台没有设置参数。使用语法是:

 { flickr4j_photo id='xxx' size='0|1|2|3' }

为了防止自动转换成图片,我在上面的代码两头大括号内侧各加了一个空格,使用时当然不能有空格。

此处id 指该图片在Flickr网站的ID号,size='0' 插入正方形缩略图, size='1' 插入小缩略图,size='2' 插入中等尺寸的图片,size='3' 插入大尺寸图片。至于这几个尺寸到底都是多大,你自己变换一下参数试试就知道了。一般来说,文章中选择size='1' 比较好。

例如,你在Flickr相册中找到一张图片,其网址是:http://www.flickr.com/photos/coyote1/446801722/ ,没错,这就是你在文章开头看到的那架飞机。这个网址的最后一个数字串就是该图片的ID。为了加快页面打开速度,我只想在文章中插入一个缩略图,那么我就选择 size='1' 这个参数。现在,我要在网页中插入的代码就是(同样的,为了防止代码运行我加入了多余空格):

{ flickr4j_photo id='446801722' size='1' }

如果要把图片居中显示,就在wysiwyg编辑器中将上面一行代码居中即可。

其他图片如法炮制即可。不过,我提醒一点,Flickr网站中所有图片的版权都是图片所有人/发布人的,如果你要使用其他人上传的图片,最好还是打个招呼,免得老外找上门来告你侵权。

三、图片系列插入触发器

Flickr网站所说的图片系列(sets)相当于“类别”或者“目录”。用图片系列可以方便地将主题近似,或者同一日期,或者同一参数等等的多个图片集中存放,并与其他图片有明显分界,便于索引、浏览。

Flickr4j_sets触发器的功能就是在网页中一次插入整个图片系列的所有图片。当然,这些图片是以最小尺寸的方块缩略图展示的。该触发器安装后也是手动发布,无需设置任何参数。其使用语法是:

{ flickr4j_set id='xxx' }

这里的id指该图片系列在flickr 网站的id号,实际上仍然是该图片系列URL中的一串数字。

这个页面有点长了,我们换一页吧。点击“下一页”看本文的后半部分。

注意:接下来的一页可能打开很慢,原因是我利用flickr4j_set触发器插入了一个拥有7张图片的系列。

{mospagebreak_scroll title=第二页&heading=第一页}

例如,在Flickr网站上的某一个图片系列其URL是:http://www.flickr.com/photos/10741039@N02/sets/72157602640979764/,那么最后一串数字就是我们要的 ID。使用这些数字替换上面代码中的xxx,其效果就是:

{flickr4j_set id='72157602640979764'}

Wow!这么多图片!这个触发器使用的时候要小心,如果某个图片系列中有上千张图片,恐怕你的网页就打开很慢了。

实际上,上面提到的URL很难碰到,一般常见的是,在某个页面的右上角经常看到在“xxx's photostream”下面有“View as slideshow”的链接(如下图所示),这就提示该发布者有多张图片在同一个系列中,点击后往往会打开新页面,其URL格式通常是:http://www.flickr.com/photos/amberlion/sets/72157594195559684/show/ ,那么这个URL的倒数第二个字段,/show 之前的数字就是我们要的图片系列 id。

Flickr网站的图片系列链接

 

 

四、图片展示模块

这个Flickr4j图片展示模块可以展示两种图片:最新添加的,或者随机图片。模块安装后,在后台设置页面上将其发布到适当的位置,然后可以设置以下4个参数:显示最新还是随机、图片数量、用户名、图片尺寸。

比较怪异的是,此处的用户名仍然可以冒用他人的,当然,显示的图片也就来自该用户的帐号。图片数量最多10张,最少1张,并且在前台分两列显示,因此最好填写偶数。鉴于大多数人都会将此模块发布到左侧或者右侧,建议图片尺寸选择最小的“正方块”,以免破坏页面布局。这个尺寸的另一个好处是,不管原始图片的外形比例是多少,所显示的正方块始终是正方形,并且都一样大,比较整齐;如果选择了“小型缩略图”,则按照原始图片的比例缩小,如果原始图片有的瘦高,有的矮胖,那么在模块中展示时的零乱状态就可想而知了。

Flickr4j图片展示模块的切换效果

如果选择了随机图片,那么只有在页面刷新/更换时才更换图片。如上图所示,这是选择了missioncontrol 的相册中的随机图片来展示,右边是点击了“News”菜单后网页刷新,然后看到随机图片也更换了。

一点遗憾:这个模块没有“slideshow”的自动切换效果——作者可以在开发下个版本时加入一个“静止还是滚动/幻灯”的选项。

五、标签云展示模块

Flickr4j的标签云展示模块我觉得意义不大,毕竟显示的是文字,不是图片。访客点击某个标签(tag)之后,才会转到Flickr网站打开所有标记为该标签的图片。当然也有人需要这个模块来展示不同标签。此模块安装之后,后台没有设置参数。也就是说,你在 Flickr 网站的个人图片中设置了多少个标签,这里就全部展示出来。

鉴于本站没有安装这个模块,那么你可以前往Flickr4j作者的演示页面看看效果,右侧下端就是一个标签云模块。

六、Flickr4j组件

不知不觉竟然把组件放在了最后来说,呵呵,好戏总在后头嘛。

这个组件可以用来建立一个图库栏目,展示在网站的mainbody区域。它可以展示3方面内容,就是你的Flickr帐号下的图片流(幻灯放映)、图片系列、以及你的图片收藏夹。遗憾的是,这些参数在该组件的后台是找不到的。你必须建立一个菜单项指向该组件,然后通过后台的“menu -> mainmenu -> Gallery”(当然,你也可能是在topmenu,或者名字不叫Gallery叫做“图片”)打开刚才建立的菜单项,然后在其右侧设置参数。

一共有5个参数:链接到、Flickr用户名、逗号分隔的系列、图片尺寸、图片显示方式。

第一个参数有4个选项:主菜单、照片流、系列、收藏。这里的“主菜单”并非你Joomla网站的主菜单,而是指你的Flickr帐号页面的主菜单。如果选择链接到主菜单,那么在前台打开“图库”栏目后,可以看到页面上有其余三个内容从上到下排列:幻灯放映(Photostream)、分类浏览(Sets)和我的收藏(Favorites)。如果选择了链接到其他三个任何一个,那么“图库”栏目打开后就只看到该项目的内容。

下图展示的就是在菜单设置中选择了“链接到主菜单”后,前台打开“图库”栏目的样子。

用 Flickr4j 组件建立的图库首页

第二个参数当然填写你的用户名,除非你知道其他用户名及其对应的API。不建议使用他人帐号,毕竟你自己申请一个也很方便。

第三个参数,是要求列出一些图片系列,并使用英文逗号分隔。其功能是,只允许在前台展示这些系列中的图片。如果该参数留空不填写,那么将列出你的帐号下所有的图片系列。假如你有200个图片系列,那么该页面就比较长了——作者怎么就没有设计一个“图片系列表上每页展示多少个系列”参数?

第四个参数很简单,你选择合适的尺寸即可。建议选择“小”尺寸以加快页面打开速度。

最后一个参数只有两个选项:紧缩型还是扩展型。当然后一个模式所需要的空间更大。

{mospagebreak_scroll title=第三页}

 

七、这个组件有个鸟用?

辛辛苦苦说了这么多,或许还有人会说:这个Flickr4j 有啥必要啊?我直接在Flickr网站的图片上点右键,查看图片属性,然后复制URL,再插入到网页中,不就行了吗?费这么大劲干嘛?

当然不一样。用这种简单方法很容易插入图片,但是没有Lightbox2特效。你插入的图片将以原大小展示出来,对页面效果破坏严重(除非你安装了Multithumb缩略图触发器)。

当然,如果你要插入一系列图片,或者制作一个“美图欣赏”栏目,那么前面所说的复制URL的方法显然不够用了。而利用Flickr4j制作图库的优势在于:所有图片都是保存在Flickr网站的,你自己的网站空间不会被很快消耗掉。

什么?你担心Flickr会倒闭,图片丢失?I 服了u,如果Flickr都倒闭了,恐怕整个互联网也快玩完了。

背靠 Yahoo!,Flickr想倒也倒不了

八、几句闲话

如果你网站安装了Multithumb缩略图触发器,那么它有可能会对你用Flickr4j引用到网页中的图片产生作用。比如你用Flickr4j photo插件引用了一张单个图片,设置尺寸为3,但是你的Muitithumb已经设置缩略图片到200px宽度,并且针对网站所有图片有效。这时候,很可能你从Flickr引用来的图片不会以大尺寸显示,而是以宽度200px的缩略图显示。解决方法:在网站后台的mambots列表中,将Multithumb的位置向上移,或者将flickr4j photo 和 flickr4j set 触发器向下移,使得 Multithumb的触发早于这两个即可。

我觉得这个组件再有一个功能就接近完美了:那就是从该组件上传图片到Flickr网站。这样的话,我们建立的图库就可以很方便地添加新图片,甚至允许会员来上传图片(把图片系列当作会员的个人相册不就可以满足会员的私有相册需求吗?)。

可以毫不夸张地说,Flickr4j改变了我们建立图库的概念:以往我们使用RSgallery2或者zOOm等组件建立图库时,需要将图片保存在自己的网站空间,如果要持续发展下去,空间成本将飞速上涨。而Flickr4j却巧妙地借用了Flickr这个巨大的免费存储站,使我们有可能作出无限大的图库(Flickr给免费会员的存储空间是每个月100MB,每张图片不超过5MB)。当然,目前的Flickr4j功能还比较简单,仅仅是“展示图片”而已。如果要对图片作出评论,投票,收藏,推荐等等操作,还不够方便,尽管Flickr网站就有这些功能。

期盼Flickr4j能够继续开发新功能。我静候佳音。