登录 注册

登录

不管用什么 CMS 来建站,如果要在文章中大量使用图片,图片的管理就会成为站长头疼的问题之一。尤其是尺寸较大的图片数量很多时,不仅目录结构的管理是一个难题,同时对服务器空间的消耗和对虚拟主机流量的消耗,都将成为一个棘手的问题。Joomla 也不例外。在Joomla中文论坛上已有多位站长对此表达过忧虑的心情。

外链(hotlinked)图片不啻是一个好办法。既节省了空间,又节省了流量。但是外部图片所引发的新问题是:如何在文章中使用外链大图的缩略图?点击缩图时,外链的大图能否在站内打开,而不是将访客带离你的网站?也就是说,如何以“点击小图弹出大图”的方式在 Joomla! 网站上使用外链的图片?今天的教程就是要解决这个问题。

 

Hotlinked external images
Hotlinked external images

 

解决这个问题要用到两个 Joomla 扩展:ReadmoreExtShadowbox 插件。前者的功能是自动将文章引言中的图片链接到全文页面;后者的功能是在弹出窗口中打开指定链接。它们联合起来,就实现了前面提到的目标:既使用了外链大图,又没有发生访客流失的问题。

心急的读者一定想知道:真有这样的好事吗?有没有演示看一看?OK,请看演示页面: 用塑料桶自制USB接口3G无线网卡增益天线。该文章中的所有插图都是保存在外部网站的(图片上的水印说明了一切),文章中初步载入的是缩略图,点击后则在弹出窗口中显示大图。接下来就详细解说一下实现过程(别忘了在操作之前先安装好这两个 Joomla 插件并全部启用)。

第一步:上传图片到外部网站

我当时选用的外部图片储存空间是 tu.6.cn 网站的。打开这个网址,就会看到图像上传界面(如本文开头插图所示)。 不用注册就能立即上传图片,不过,为了方便管理自己的图片,我还是注册了一个免费帐号。

第二步:获取外链图片源地址

上传成功后,立即就看到了该网站自动生成的缩略图。点击该缩略图,就会在新窗口中打开大图。仔细看,就会发现大图下方有两个链接,分别表示大、小两种尺寸。点击每个链接,都能看到下方显示4种引用方式的 URL,我们需要的是最后一种“图片源地址”,如下图所示:

mt_nothumb:get the source link of externally hosted image
get the source link of externally hosted image

 

现在你已经分别知道了这张图片大图和小图的直接链接地址。下面的工作就是:

第三步:在 Joomla 文章中插入小图

下图是在 Joomla 1.5 后台编辑文章时的界面(所用编辑器是 CKeditor)。点击“插入图片”按钮,就会看到如图所示的对话框。将小图的 URL 粘贴进去,同时给图片填写合适的 ALT 介绍文字。

mt_nothumb:insert the thumbnail image to your Joomla article
insert the thumbnail image to your Joomla article

 

在上图中可看到,我给 ALT 描述开头增加了“mt_nothumb:” 这样的古怪代码,这是什么作用?后面详细解释。

点击确定按钮,小图就插入到 Joomla 文章中了。

第四步:将小图链接到大图

在编辑器的“所见即所得”模式下,点击小图一次,然后点击编辑器工具栏上的“插入链接”按钮,在弹出的对话框中,指定所链接的 URL 为大图的直接链接地址。如下图所示:

mt_nothumb:link your thumbnail to the external full-size image
link your thumbnail to the external full-size image

顺便说一下,在上图所示的插入链接对话框中,点击“Advanced”(高级)标签页,就能给链接添加 Title 描述,虽然此功能与本话题关系不大,但是给链接编写恰当的 Title 文字可以增强 SEO 效果。同时建议将“Target”(打开位置)选择为“_blank”。

看到这里,有人着急了:“这些没什么特殊啊!我就是这么操作的。但是前台点击小图时,大图在新窗口中打开了,或者在当前窗口打开了,但是访客必须点击“后退”按钮才能回到文章页面,根本没有弹出效果。”那么,我告诉你:真正的区别在下一步:

第五步:给图片链接增加 shadowbox 属性

上一步操作完成后,点击编辑器的“源代码”按钮,可以看到刚才插入的链接对应的源代码是:

<p>



<a href="http://i3.6.cn/cvbnm/fd/e8/bf/748f7d7c19bedc421c210c0d6ae2a44f.png" rel="shadowbox"><img alt="mt_nothumb: 初步外观:塑料桶切掉一半,USB 延长线已插入" height="240" src="http://i3.6.cn/cvbnm/fd/e8/bf/748f7d7c19bedc421c210c0d6ae2a44f.320.png" width="320" /></a></p>

我们要做的,就是手动给该链接的 A 元素添加一个 rel="shadowbox" 属性。完成之后,最终结果应该如下图所示:

 mt_nothumb:edit the source code of your
external image link

 

第六步:检查前台效果

现在保存文章,打开网站前台。我是将该图片放在文章引言中的,而且文章出现在首页的 blog 布局上。因此,在网站首页就看到了缩略图。点击该缩略图,打开了全文页面。在全文页面上点击缩略图,则以华丽的 shadowbox 特效弹出了大图:

mt_nothumb:full-size image pop-up with Shadowbox effect
full-size image pop-up with Shadowbox effect

怎么样?整个过程解说完了。您一定看懂了。下面解释几个相关问题:

问题一:如何选择外部图片储存空间?

在谷歌上面百度一下,就能找到很多“免费图片空间”、“免费在线相册”,但是真正允许外链图片的不多,既允许外链、又不会添加水印的更少!

选择图片储存空间应该依次考虑下面几个问题:

  1. 该网站在国内能访问吗?
  2. 该网站能生存多久?
  3. 提供多达的免费空间?
  4. 外链是否有水印?
按理说,ImageShack.comFlickr.comGoogle Picasa 相册是最安全的,这几个网站基本上不会倒闭,至少我相信他们比我的网站寿命长。但是,很可惜在国内都无法访问。只能放弃。

我在国内发现 tu.6.cn 是免费的,既然不注册都可以上传,说明其空间配额是无限的!唯一缺陷是“有水印”。另一个网站“图传网”号称中国最大的图片免费外链空间,也没有水印,但是在我观察的几天中竟然有一段时间无法使用,我很怀疑它的生命力。

因此,我建议还是使用 6.cn 的空间吧,虽然有水印,但是能一直活着才对我们有意义。

问题二:如何避免与 Multithumb/BK-thumb 插件冲突?

Multithumb 及其改进版 BK-Thumb 插件都有“自动为文章插图生成缩略图”的功能。既然我们已经使用了外部网站的小图,就不能让 Multithumb 再次处理这个小图了。除外方法就是在小图的 ALT 属性中以“mt_nothumb:”开头。注意别漏掉那个英文冒号。

问题三:ReadmoreExt 插件的功能体现在哪里?

上面的步骤中似乎没有涉及对 ReadmoreExt 插件的操作和应用,这是因为该插件一经安装和启用,就自动生效了。无需再手动操作。ReadmoreExt 插件在本方法中的功能只有一个:就是自动将博客布局上的缩略图链接到文章全文。

如果你的网站上安装了 BK-Thumb,你应该清楚 BK-Thumb 本身就有“自动将博客布局中的缩略图链接到全文页面”的功能,我们为什么还要使用 ReadmoreExt 插件呢?这是因为我们已经在小图中使用了“mt_nothumb:”除外标记,那么 BK-Thumb 就不再处理该图片了。为了继续享用这个功能,就必须安装 ReadmoreExt 插件。

最后,提醒一下:如果你够细心,应该发现本文中的所有插图也都是储存在外部网站的,点击小图时同样是用 Shadowbox 特效来打开的!希望你也喜欢这个功能,谢谢!

{quickdown:208}

{quickdown:1066}

  1. 评论 (1)

  2. Add Yours

评论 (1)

这里还没有人发表评论
  1. LiNGX
  附件
您无权查看附件
 

免费下载最新Joomla!核心中文版

扫描此二维码,立即开始下载 Joomla 3 核心中文版

付费下载汉化版扩展

付费后即可下载独家海量

Joomla! CMS 扩展汉化版

了解付费会员制度

点击这里给我发消息

了解 joomlagate.com 网站的付费会员制度