logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

Drupal 照片图库与相册

14/10/2025, by Ivan

照片相册图片画廊能让任何网站更具吸引力,无论是个人博客还是企业网站。精美的图片正是让人们流连于 Facebook、VK 等社交网络的重要原因。因此,让我们在自己的 Drupal 网站上添加一个漂亮的图片画廊吧。

我建议使用 Colorbox 效果创建一个简单的图片画廊。Colorbox 是一个基于 jQuery 的插件,是 thickbox 和 lightbox 的优秀替代方案。它的优势在于可以自动调整图片大小以适应屏幕,非常方便,因为现在显示器种类繁多,尺寸与分辨率各不相同。

下面开始动手。我将展示如何在 Drupal 7 中创建图片画廊(在 Drupal 6 中方法类似)。

我们需要安装以下模块:

Colorboxhttp://drupal.org/project/colorbox

Libraries APIhttp://drupal.org/project/libraries

Viewshttp://drupal.org/project/views

Fields API(Drupal 7 已包含在核心中,Drupal 6 使用 CCK 模块)

Imagecachehttp://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 文件夹,请手动创建。

Drupal libraries

解压后,Colorbox 应该位于 libraries 目录中:

Drupal colorbox

你会注意到我保留了 Colorbox 示例文件,以便日后查看演示效果。

如果一切正确配置,在“系统状态报告”中应能看到如下信息:

Drupal отчет о состояние

很好,现在所有模块都已启用。准备工作完成,我们开始创建图片画廊。

我们将以“相册”的形式组织画廊。首先,创建一个新的内容类型“照片相册”。

/admin/structure/types/add

在该页面填写基本信息:

Drupal типы содержимого

然后进入该内容类型的字段编辑页面:

/admin/structure/types

drupal управление полями

添加一个名为“照片”的新字段,数据类型选择“图像 (Image)”。

Drupal поля

在字段设置中,允许上传多个图片(无限制),也可以设置固定数量,如 10 张。

保存字段设置。现在我们的“相册”内容类型已经就绪。如果想限制哪些用户可以创建相册,可以在权限管理页面中设置。

/admin/people/permissions

接下来创建一个新的相册节点:

/node/add

Drupal добавить содержимое

填写相册的标题和描述,并上传多张照片:

Drupal image fields

保存节点。

此时图片仍显示为原始大小。为了让图片以漂亮的画廊形式展示,我们将使用 ImageCache 模块。

ImageCache 允许对附加到节点的图片(如相册图片)进行裁剪、缩放、调色等操作。启用该模块后,将出现“图像样式”配置页面。图像样式(preset)即预定义的图片处理规则,例如创建一个裁剪为 100x100 像素的样式。

进入配置页面找到 ImageCache 设置:

admin/config

Drupal пресеты

点击“添加样式”,填写名称。例如,如果要缩放到 150x150,可命名为 scale150x150。我这里创建一个名为 crop150x150 的样式,用于裁剪图片到 150x150 像素。

添加效果:

Drupal эффекты

设置宽度和高度为 150,保存效果。现在我们的 crop150x150 样式可用于节点显示设置中。

进入所有内容类型页面:

/admin/structure/types

选择“管理显示 (Manage display)”:

Drupal отображение полей

将图片字段的显示格式设置为 Colorbox:

Drupal colorbox

继续配置显示选项:

настройка colorbox

选择 Node image style:crop150x150(我们刚刚创建的样式)。

保存设置。

现在照片会以 Colorbox 效果显示,并以 150x150 像素缩略图形式展示。最后,我们添加一点 CSS 来美化布局:

.field-name-field-photos .field-item {
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
}

你可以根据自己的网站样式调整 CSS(例如不同的类名或边距)。最终效果如下:一个带有缩略图预览的精美相册节点。

Drupal album