在Drupal 9中启用响应式图片支持

By 大伟哥 | 2022-05-17,周二, 10:43

最佳的用户体验是网站开发追求的一个重要方面,而其中的关键是保证正确的图像尺寸。大分辨率的图片一股适用桌面显示器,而如果有些访问者使用的是移动设备,那么加载这些非常大的图片反而不是最佳选择。

确保为正确的设备提供正确大小的图像就是所谓的 "响应式图像"。

响应式图像有助于提高加载速度,节省带宽,并给访问者带来更好的整体体验。

这篇文章将重点介绍在Drupal 9中设置响应式图片。

对于Drupal 9,启用响应式图片支持的的关键步骤如下:

  1. 安装响应式图片模块Responsive Image(使用Composer或Drupal UI)。
  2. 设置断点。
  3. 创建图片样式。
  4. 设置响应式图像。
  5. 将响应式图像样式分配给图像字段。
  6. 将配置导出为代码。

一、安装启用Responsive Image模块

和Drupal 8一样,Responsive Image模块也已经包含在Drupal核心里了,在Drupal 9中不需要下载安装额外的模块。

Responsive Image模块提供了一个图像格式和断点映射,使用HTML5 <picture>标签输出响应式图像。这样就可以让设备根据屏幕尺寸显示更大或更小的图片。

方法一、通过Composer启用Responsive Image模块

  1. 打开你的命令行工具。
  2. 使用 "cd "进入你的网站目录。
  3. 运行命令drush en responsive image

方法二、通过Drupal用户界面的步骤

  1. 以管理员身份登录后,在Drupal管理菜单中进入 "扩展",或访问URL路径:/admin/modules
  2. 然后,在模块列表中,向下滚动直到找到 "Responsive Image",并点击旁边的复选框。提示:你也可以在顶部的搜索框中搜索模块的名称。
  3. 点击列表最下方的 "安装"。

二、设置Breakpoints断点

现在要为我们的图像样式创建一些断点。我们需要确定要设置多少个断点,这取决于你想要在什么样的屏幕尺寸上,分别显示不同尺寸的图片。在一些默认的主题已经定义了 ".breakpoints.yml " 文件,所以可以先检查一下你的主题里是不是有这个文件。

如果你有一个自定义的主题,请使用你喜欢的编辑器。比如Sublime Text、Atom或Visual studio code。

在Drupal 9中,你的主题根目录一般位于"/themes/my_theme_name "或"/themes/custom/my_theme_name",这要看你是怎么设置的。你要在你的主题目录的根部,创建一个名为 "my_theme_name.breakpoints.yml "的文件,其中 "my_theme_name " 是你的主题的名称。

这个教程里,我将把我的主题称为 "myd9demo"。

我们用下面这个例子来告诉你如何给这个主题设置图像断点。我们要设置三个断点:一个用于手机,一个用于平板电脑,还有一个用于PC桌面。当然这里只是一个例子,你需要自行选择一个最适合你的网站和主题的断点,因为你可能已经在你的CSS中配置了一个带有断点的网格系统。

myd9demo.breakpoints.yml:

myd9demo.small:
  label: small
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 2x
myd9demo.medium:
  label: medium
  mediaQuery: 'all and (min-width: 768px)'
  weight: 2
  multipliers:
    - 1x
    - 2x
myd9demo.large:
  label: large
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 2
  multipliers:
    - 1x
    - 2x

每个断点都告诉Drupal为每个指定的mediaQuery加载什么尺寸的图片。例如,我们可以在min-width: 0px的断点处为移动设备加载小尺寸的图像;当浏览器在min-width: 768px的宽度时,加载tablet "平板电脑 "图像样式,而在最小宽度min-width: 1200px时,加载PC桌面或全尺寸图像。

值得注意的是,断点的权重应该从最小的mediaQuery到最大的mediaQuery依次列出,这样我们可以遵循移动优先的原则,因为你的网格系统(如果你有的话)很有可能也遵循移动优先的原则。

multipliers属性可以让我们为高清和视网膜屏显示一个更清晰的图像。一个很好的例子是,在普通屏幕上有一个1000 x 1000像素的样式,但在视网膜屏幕上,你可以加载一个分辨率高达2000 x 2000像素的图片。

三、设置你的图片样式

现在我们需要为不同的断点和不同的分辨率创建图像尺寸。在顶部菜单里,选择配置>媒体>图像样式,或者去路径: /admin/config/media/image-styles

接下来,你需要为my_theme_name.breakpoints.yml中设置的断点和分辨率创建一个图像样式。由于我们在breakpoint.yml 文件中创建了三个断点,并且我们为视网膜屏和非视网膜屏设置了两种分辨率,这样我们就有总共六个图像样式。你可以给它们使用如下标签:

  • Mobile 1X
  • Mobile 2X
  • Tablet 1X
  • Tablet 2X
  • Desktop 1X
  • Desktop 2X

现在请遵循以下步骤创建你的图像样式:

  1. 点击左上角的 "Add image style添加图像样式 "按钮。
  2. 输入你的图像样式名称,最好是使用能够表达清楚样式特点的,因为你可能会在整个项目中设置多个图像样式。
  3. 点击 "Create new style创建新样式"。
  4. 然后会转到新页面设置你的新图像样式,使用 "Effect效果 "下的下拉菜单,选择缩放和裁剪。提示:为了获得更好的透明度和裁剪效果,可以试试安装 "Focal Point"模块。它允许你设置在图像的哪个区域/方向进行缩放和裁剪。
  5. 点击 "添加 add"按钮。
  6. 输入你的图像样式的尺寸。例如,我们设置移动图像400x200,而视网膜屏的移动图像是800x400。
  7. 点击 "保存Save"。
  8. 重复步骤1-7,直到你创建了所有六个图像样式。

 对于每一种图片风格,我们都使用了缩放和裁剪效果,对上传的图片自动缩放和裁剪。

以下是几个例子,可以看一下大概是什么样子:

编辑图像样式

image styles

四、设置响应式图像样式

现在我们将把图像样式分配给断点。进入菜单:管理 > 配置 > 媒体,或者进入史路径/admin/config/media/responsive-image-style,点击 "添加响应式图像样式Add responsive image style"。

在本教程中,我将称之为 "文章图片",因为这将用于我们文章内容类型中的主图像。我们将选择我们的主题(在这个例子中是 "My D9 demo")。

Edit responsive image style

然后为每个断点选择正确的图片样式。在Drupal用户界面中,它将显示从最大到最小的断点。对于我们用于视网膜屏的桌面图像,打开名为 "Large 2X "的下拉菜单,选择图像样式 "Desktop 2X"。对于我们的非视网膜桌面图像,选择 "Desktop 1X"。以此类推,直到你为每个断点和屏幕分辨率选择了正确的图像样式。

为每个断点选择正确的图片样式

在表单的最后,你会发现Fallback选项。这将在响应式图像不可用的情况下使用。你应该在这里选择你创建的最小的图像样式,与移动端一样的那个,在Fallback选项中选择你创建的最小的响应式图像样式效果。

五、将响应式图像样式分配给图像字段。

让我们回顾一下。到目前为止,我们已经在我们的主题中设置了断点和分辨率大小,用于我们的图像。然后我们创建了六个图像样式,每个样式对应一个屏幕尺寸和分辨率。然后,我们把创建的图片样式与我们创建的断点连接起来。

现在是时候将响应式图像样式添加到我们的一个图像字段了。这样,当一个图片使用内容类型的 "显示display "来打印图像时,它就会使用这个响应式的图像样式展示出来。

进入菜单 "管理">"结构",或在你的地址栏中进路径"/admin/structure/type"。在你想改变的内容类型content type上(在这个例子里,它是一篇文章),点击 "管理字段Manage fields "旁边的箭头并选择 "管理显示Manage Display"。

在 "管理显示Manage Display "表单里,在图像字段上,点击你的图像 "格式Format "下的下拉菜单,然后选择 "响应式图像Responsive image "选项。

将响应式图像样式分配给图像字段

之后,点击位于最右边的齿轮图标,并选择响应式图片样式Responsive image(在我们的例子中是 "文章图片")。

点击保存,我们就完成了! 好吧,是几乎完成了,还差一点 :)

要检查是不是成功了,我们需要添加一个新的内容,并在图像字段里添加一个图像(确保别选错内容类型)。调整你的浏览器的大小,就像在平板电脑或移动设备上一样来查看页面。

在图片上点击右键,点击 "检查inspect",你应该看到一个HTML5 <picture>属性标签,在断点内会有许多不同的图片样式。

六、 将你的配置导出为代码

最后一步是将所有这些Drupal的配置导出为代码。这样做有几方面的原因,其中两个原因是:

  1. 确保我们的设置被保存下来,并且将来可以导入到你的网站上,这样允许你在将来对配置进行修改后覆盖它们。
  2. 允许我们向git提交一些东西,为我们的工作保留一个漂亮的痕迹/面包屑。

有两种方法可以做到这一点:通过用户界面导出所有配置,或者通过命令行使用Drush(如果你有一个运行Drush的服务器,这是推荐的方法)。

下面是两种方法的步骤:

通过命令行使用Drush:

  1. 使用你的命令行工具,"cd "到你网站的根目录。
  2. 然后运行以下命令: "drush cex"。 如果你在本地运行你的网站,你可能会使用类似Docker和docksal的东西,在这种情况下,你可以运行 "fin drush cex"
  3. 一旦运行这个命令,你会得到一个修改后的配置和文件的列表,并保存在你的/config/default目录中。
  4. 按回车键接受。

 
通过用户界面

  1. 进入菜单 "配置Configuration > 开发Development > 配置同步Configuration Synchronization" > 导出Export, 或进入路径:"admin/config/development/configuration/full/export"。
  2. 点击导出export按钮。
  3. 这将把整个配置文件夹导出到一个压缩包。

然后,唯一要做的就是把你的代码推送到你使用的任何git仓库,并庆祝你的成功了。

添加新评论

此字段内容将保密,不会被其他人看见。
  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。
验证码
发布评论前,请通过下面的验证,以免被当作垃圾评论机器人屏蔽。
6 + 10 =
计算出这道简单的算术题并键入答案。例如、1+3,就输入 4。