Joomla/巧用ReadMoreExt和Shadowbox来插入外链大图

来自站长百科
跳转至: 导航、​ 搜索

Joomla | Joomla使用手册

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

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

ReadmoreExt和Shadowbox介绍[ ]

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

具体操作步骤[ ]

1.上传图片到外部网站

本例选用的外部图片储存空间是 tu.6.cn 网站的。打开这个网址,就会看到图像上传界面。

2.获取外链图片源地址

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

Joomla read 1.jpg

3.在Joomla文章中插入小图

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

Joomla read 2.jpg

在上图中可看到,我给 ALT 描述开头增加了“mt_nothumb:” 这样的古怪代码,这是什么作用?后面详细解释。点击确定按钮,小图就插入到 Joomla 文章中了。

4.将小图链接到大图

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

Joomla read 3.jpg

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

5.给图片链接增加shadowbox属性

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

<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>

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

Joomla read 4.jpg

6。检查前台效果

现在保存文章,打开网站前台。在网站首页就看到了缩略图。点击该缩略图,打开了全文页面。在全文页面上点击缩略图,则以华丽的 shadowbox 特效弹出了大图:

Joomla read 5.jpg

常见问题[ ]

如何选择外部图片储存空间[ ]

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

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

  • 该网站在国内能访问吗?
  • 该网站能生存多久?
  • 提供多达的免费空间?
  • 外链是否有水印?

如何避免与Multithumb/BK-thumb插件冲突[ ]

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

ReadmoreExt 插件的功能体现在哪里[ ]

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

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

参考来源[ ]

http://www.joomlagate.com/article/joomla15-tutorial/insert-external-hosted-large-image-with-readmoreext-shadowbox-in-joomla/

Joomla 1.5使用手册导航

Joomla安装

Joomla!的安装

Joomla 1.5教程

Joomla!1.5自带资源给前台添加下拉菜单 | 巧用ReadMoreExt和Shadowbox来插入外链大图 | 借助pcDTR插件使用任意字体美化Joomla页面 | 借助Abivia Redaction插件滤除Joomla扩展的版权链接 | Joomla!1.5网站防黑9条戒律 | Joomla!1.5与Dokuwiki的完全整合方案 | 用SJSB桥接器无缝整合Joomla!1.5.9、SMF2.0论坛 | 详解用RokBridge 1.0RC8整合Joomla!1.5.9与phpBB3论坛 | Joomla!与Tikiwiki的外观整合 | Jumi插件的介绍 | 用CSS控制Display News模块的外观样式 | Open-Realty介绍 | Google Gears的应用 | 在Joomla!1.5文章中插入Ozio Gallery图库 | 文章中自动插入广告 | GCalendar介绍 | Joomla 1.5 SEO Patch的用法 | Joomla! 1.5生成中文PDF的解决方案

其他Joomla教程

用XAMPP快速搭建Joomla本地测试服务器 | 用Gmail的SMTP发送Joomla激活及通知邮件 | 深入认识Joomla CMS:扩展、菜单及模板 | Joomla 1.0教程 | Joomla高级教程 | Joomla! SEO教程