---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/image-gallery'
title: '构建图像画廊 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:24:35+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里构建照片画廊：居中标题、三张带替代文本的并排照片和灰带上的轮播。用图片展示地点或活动。要每项带描述展示项目，请遵循 构建作品集图库。
  本视频为大学构建学生画作画廊。
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 构建图像画廊
      description: |-
        这里构建照片画廊：居中标题、三张带替代文本的并排照片和灰带上的轮播。用图片展示地点或活动。要每项带描述展示项目，请遵循 构建作品集图库。
        本视频为大学构建学生画作画廊。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:24:35+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/image-gallery'
      articleSection: 跟着教程做
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/image-gallery'
      description: |-
        这里构建照片画廊：居中标题、三张带替代文本的并排照片和灰带上的轮播。用图片展示地点或活动。要每项带描述展示项目，请遵循 构建作品集图库。
        本视频为大学构建学生画作画廊。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[跟着教程做](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/overview) # 构建图像画廊.

 学习 DXPR Builder搭建页面跟着教程做

   ## 本指南内容

 相关指南

- [添加图像](/zh-hans/hc/documentation/learn-dxpr-builder/elements/image)
- [添加图片轮播](/zh-hans/hc/documentation/learn-dxpr-builder/elements/image-carousel)
- [构建作品集画廊](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

这里构建照片画廊：居中标题、三张带替代文本的并排照片和灰带上的轮播。用图片展示地点或活动。要每项带描述展示项目，请遵循 [构建作品集图库](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)。

本视频为大学构建学生画作画廊。

  ## 开始之前

- 您的角色有 **Edit with DXPR Builder** 权限。
- 媒体库保存至少六张照片，裁剪为相同比例。
- 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**.

## 第 1 步：添加页头

1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。
2. 悬停版块并打开 **More** > **Settings**。在以下位置的下方 **HTML classes** 选择 **Align text center**，然后点击 **Save**.
3. 点击 **+** 在版块上并选择 **Text** 从 **Content** 选项卡。
4. 输入 "Student art gallery" 为 **Heading 2**，添加一行介绍并点击 **Save**。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 [构建 SEO 友好页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)。

## 第 2 步：添加照片网格

1. 悬停版块并点击 **Add Section Below**。点击 **+** 在新版块上并选择 **Row**；它带有两个等宽列。
2. 点击行的网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**.
3. 点击 **+** 在第一列中并选择 **Image**.
4. 点击 **Select Image**，通过以下方式搜索媒体库 **Apply filters**，点击一张照片并点击 **Insert selected**.
5. 打开 **SEO** 面板并输入 **Alt attribute**：看不到照片的人应该知道的内容。点击 **Save**.
6. 对第二和第三列重复。

裁剪为相同比例的照片保持行整齐。

## 第 3 步：添加轮播

1. 添加第三个版块，其中包含 **Add Section Below** 并打开其 **More** > **Settings**。选择 **Align text center** 在 **HTML classes** 和浅灰色 **Background**：**Style** 面板。点击 **Save**.
2. 点击 **+** 在版块上并选择 **Image carousel**。
3. 点击 **Select Image**，搜索媒体库，点击三张照片并点击 **Insert selected**，然后点击 **Save**.
4. 点击 **+** 在版块上再次并选择 **Text**；它落在轮播上方。输入 "Slideshow" as **Heading 2** 并点击 **Save**.

## 第 4 步：保存并预览

1. 点击 **Save** 在页面构建器工具栏上。
2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**.

## 进一步了解

视频中未展示：

- **Captions**：在列中放置一个 **Card**，并添加带内部标题的 **Text** 元素。然后在卡片内添加 **Image**；它落在说明文字上方。
- **全尺寸照片**：设置 **Image link** 到全尺寸文件并 **Image link target** 为 **New window**.
- **Style**：在每张图像上，设置 **Border radius** 为 4 并 **Drop shadow** 为 1，在 **Style** 面板以实现柔和浮起。
- **轮播计时**：设置 **Interval** 在轮播上，以毫秒计。位于 **Hide**，勾选 **Hide pagination control** 或 **Hide prev/next buttons** 以移除这些控件。
- **自填充图库**：位于 **Structure** > **Views** > **Add view**，在以下位置中为图像媒体创建一个带区块显示的视图 **Grid** 格式。从以下位置插入它 **Drupal Views** 选项卡，新上传自动出现。

## 您会看到的内容

居中标题开启页面，随后三张照片并排。下方灰带上轮播一次显示一张照片，每五秒切换到下一张。

## 如果您看不到如图所示的照片

- **Insert selected 未添加照片。** 库在以下操作后仍在重新加载 **Apply filters**，因此您的点击没有选中照片。等网格稳定后，确认照片显示勾选标记，然后点击 **Insert selected** 再次。
- **媒体库为空。** 尚未上传图像，或媒体浏览器未设置。参见 [图像无法上传或消失](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/images-and-media)。
- **三张照片高度不同。** 其比例不同。裁剪为相同比例，重新上传并选择新副本。
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [图像元素](/zh-hans/hc/documentation/learn-dxpr-builder/elements/image) 用于每个图像设置
- [图像轮播元素](/zh-hans/hc/documentation/learn-dxpr-builder/elements/image-carousel) 用于轮播选项
- [Portfolio](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) 用于带筛选器的项目网格