构建图像画廊.

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

这里构建照片画廊：居中标题、三张带替代文本的并排照片和灰带上的轮播。用图片展示地点或活动。要每项带描述展示项目，请遵循构建作品集图库。

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

开始之前

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

点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。
悬停版块并打开 More > Settings。在以下位置的下方 HTML classes 选择 Align text center，然后点击 Save.
点击 + 在版块上并选择 Text 从 Content 选项卡。
输入 "Student art gallery" 为 Heading 2，添加一行介绍并点击 Save。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见构建 SEO 友好页面。

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

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

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

视频中未展示：

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 再次。
媒体库为空。 尚未上传图像，或媒体浏览器未设置。参见图像无法上传或消失。
三张照片高度不同。 其比例不同。裁剪为相同比例，重新上传并选择新副本。
重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见更改无法保存。