编辑“Joomla/巧用ReadMoreExt和Shadowbox来插入外链大图”

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

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

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

===具体操作步骤===
1.上传图片到外部网站

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

2.获取外链图片源地址

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

[[Image:Joomla read 1.jpg]]

3.在Joomla文章中插入小图

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

[[Image:Joomla read 2.jpg]]

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

4.将小图链接到大图

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

[[Image:Joomla read 3.jpg]]

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

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

上一步操作完成后，点击编辑器的“源代码”按钮，可以看到刚才插入的链接对应的源代码是：
<pre>
<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>
</pre>
我们要做的，就是手动给该链接的 A 元素添加一个 rel="shadowbox" 属性。完成之后，最终结果应该如下图所示：

[[Image:Joomla read 4.jpg]]

6。检查前台效果

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

[[Image: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}}

[[category:Joomla|Q]]