Drupal 照片图库与相册
照片相册和图片画廊能让任何网站更具吸引力,无论是个人博客还是企业网站。精美的图片正是让人们流连于 Facebook、VK 等社交网络的重要原因。因此,让我们在自己的 Drupal 网站上添加一个漂亮的图片画廊吧。
我建议使用 Colorbox 效果创建一个简单的图片画廊。Colorbox 是一个基于 jQuery 的插件,是 thickbox 和 lightbox 的优秀替代方案。它的优势在于可以自动调整图片大小以适应屏幕,非常方便,因为现在显示器种类繁多,尺寸与分辨率各不相同。
下面开始动手。我将展示如何在 Drupal 7 中创建图片画廊(在 Drupal 6 中方法类似)。
我们需要安装以下模块:
Colorbox — http://drupal.org/project/colorbox
Libraries API — http://drupal.org/project/libraries
Views — http://drupal.org/project/views
Fields API(Drupal 7 已包含在核心中,Drupal 6 使用 CCK 模块)
Imagecache — http://drupal.org/project/imagecache
File(Drupal 7 已包含在核心中,Drupal 6 使用 Filefield 模块)
Image(Drupal 7 已包含在核心中,Drupal 6 使用 Imagefield 模块)
对于 Drupal 6,还需要安装 jQuery update 模块,将 jQuery 更新到 1.3.2 版本。
下载并安装上述所有模块。
接下来需要单独下载 Colorbox 库:
http://colorpowered.com/colorbox/
将下载的压缩包解压缩,并复制到 sites/all/libraries
文件夹。如果没有 libraries
文件夹,请手动创建。
解压后,Colorbox 应该位于 libraries 目录中:
你会注意到我保留了 Colorbox 示例文件,以便日后查看演示效果。
如果一切正确配置,在“系统状态报告”中应能看到如下信息:
很好,现在所有模块都已启用。准备工作完成,我们开始创建图片画廊。
我们将以“相册”的形式组织画廊。首先,创建一个新的内容类型“照片相册”。
/admin/structure/types/add
在该页面填写基本信息:
然后进入该内容类型的字段编辑页面:
/admin/structure/types
添加一个名为“照片”的新字段,数据类型选择“图像 (Image)”。
在字段设置中,允许上传多个图片(无限制),也可以设置固定数量,如 10 张。
保存字段设置。现在我们的“相册”内容类型已经就绪。如果想限制哪些用户可以创建相册,可以在权限管理页面中设置。
/admin/people/permissions
接下来创建一个新的相册节点:
/node/add
填写相册的标题和描述,并上传多张照片:
保存节点。
此时图片仍显示为原始大小。为了让图片以漂亮的画廊形式展示,我们将使用 ImageCache 模块。
ImageCache 允许对附加到节点的图片(如相册图片)进行裁剪、缩放、调色等操作。启用该模块后,将出现“图像样式”配置页面。图像样式(preset)即预定义的图片处理规则,例如创建一个裁剪为 100x100 像素的样式。
进入配置页面找到 ImageCache 设置:
admin/config
点击“添加样式”,填写名称。例如,如果要缩放到 150x150,可命名为 scale150x150。我这里创建一个名为 crop150x150 的样式,用于裁剪图片到 150x150 像素。
添加效果:
设置宽度和高度为 150,保存效果。现在我们的 crop150x150 样式可用于节点显示设置中。
进入所有内容类型页面:
/admin/structure/types
选择“管理显示 (Manage display)”:
将图片字段的显示格式设置为 Colorbox:
继续配置显示选项:
选择 Node image style:crop150x150(我们刚刚创建的样式)。
保存设置。
现在照片会以 Colorbox 效果显示,并以 150x150 像素缩略图形式展示。最后,我们添加一点 CSS 来美化布局:
.field-name-field-photos .field-item { float: left; margin-bottom: 15px; margin-right: 15px; }
你可以根据自己的网站样式调整 CSS(例如不同的类名或边距)。最终效果如下:一个带有缩略图预览的精美相册节点。