页面 1 共有 3
我一向是支持拿来主义的——人生苦短,何必事事亲为?对于个人网站来说,插入视频、图片都是非常耗费网站空间和服务器带宽的。幸好我们有了All Videos Plugin可以引用多大40多个免费视频分享网站的内容,现在该谈谈如何好好利用在线电子相册的问题了。
免费电子相册已经足够多了,国内比较知名的如网易相册、雅虎在线相册等等,国外的如Flickr、ImageShack等等。中文的当然界面更亲切一些,但是当我试图把保存在网易相册的照片插入到我的网站内时,却显示出一个大红叉叉,附带一句警告“网易相册的图片只能用于网易博客”,这不是很Sh!t么?懒得再去看中文的了——不玩了,伤自尊了。
听说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张图片的系列。
|