README

此模块引入了主题函数和字段格式器以显示响应式图像。它支持两种不同的HTML标签

• <IMG> 标签使用 srcsrc 属性；
• <PICTURE> 标签使用 <SOURCE> 元素。

<IMG> 标签支持 sizes 属性，允许在字段显示配置级别设置图像的相对视口大小，以便浏览器进行更好的图像选择以进行下载。

此模块不会允许您提供自己的图像样式，它只提供两种不同的模式

• 图像保持原始图像比例；
• 方形图像。

未来的计划是支持更复杂的图像样式（可能通过合并此模块自带的样式和使用用户提供的样式）。

此模块包含 Picturefill 2.0 polyfill，以确保旧浏览器的优雅降级。

安装

只需下载并启用该模块。

配置

您可能想要覆盖图像的可用大小，默认为

[285, 570, 855, 1140, 1440]

要覆盖它，只需在您的settings.php文件中添加

$conf['iresponsive_image_size_list'] = [200, 300, 500, 1400, ...];

使用

对于图像字段

选择 响应式图像 作为显示格式器，很简单吧？

手动显示图像

使用 ireponsive_img 或 iresponsive_picture 主题钩子之一，并按照这种方式使用渲染数组进行操作

// Considering that $file is loaded file_managed.
$build['my_image'] = [
  '#theme'        => 'iresponsive_picture',
  '#image_uri'    => $file->uri,
  '#image_width'  => $file->width,
  '#image_height' => $file->height,
  '#image_alt'    => t("Some alternative text"),
  '#image_title'  => t("Some HTML title tag"),
  // Note that 'w' is the default, and keeps ratio while 's' is for square.
  '#modifier'     => 'w',
  // Default size must exist in iresponsive_image_size_list() function defaults
  // the 'iresponsive_image_size_list' variable if you overrided it.
  '#default_size' => $settings['default_size'],
  // If you set to true, this will include the original image, but without
  // any transformation (no square, etc...) in the image sources.
  '#include_full' => false,
  // Targetted image size in viewport percent (aka 'vh' unit in CSS).
  '#viewport'     => 50,
];

或者如果您编写的是 Drupal 6 旧式代码（但您永远不应该这样做）

// Considering that $file is loaded file_managed.
theme(''iresponsive_picture', [
  'image_uri'    => $file->uri,
  'image_width'  => $file->width,
  'image_height' => $file->height,
  'image_alt'    => t("Some alternative text"),
  'image_title'  => t("Some HTML title tag"),
  // Note that 'w' is the default, and keeps ratio while 's' is for square.
  'modifier'     => 'w',
  // Default size must exist in iresponsive_image_size_list() function defaults
  // the 'iresponsive_image_size_list' variable if you overrided it.
  'default_size' => $settings['default_size'],
  // If you set to true, this will include the original image, but without
  // any transformation (no square, etc...) in the image sources.
  'include_full' => false,
  // Targetted image size in viewport percent (aka 'vh' unit in CSS).
  'viewport'     => 50,
]);