README

这是一个 SilverStripe 模块，通过添加多个分辨率的 srcset 属性来增强图像的输出。

它尝试计算给定图像和配置的最合适的分辨率。

在前端输出设置期间，您将配置有关图像将具有哪些输出大小的基本规则（匹配在 CSS 中完成的布局设置），模块将处理要生成的特定分辨率。

计算基于模块 mhe/imagetools – 更多信息请参阅那里。

背景

"人不应该做这件事" – 在这篇文章中，Jason Grigsby 讨论了在响应式输出中哪些图像分辨率是有意义的，这篇文章可能会给你一些启发： Image Breakpoints，特别是 基于性能预算设置图像断点

需求

需要 Silverstripe 5.x – 与 Silverstripe 4 兼容的版本请查看相应的分支 4

安装和设置

使用 composer 安装

composer require mhe/silverstripe-responsiveimages ^1.0

执行 ?flush

使用概述

该模块在 Image 对象上激活扩展，并提供增强的 Shortcode 提供程序。这意味着结果可以在模板中使用，在图像输出时程序化使用，也可以在通过 HTML 编辑器放置到页面内容中的图像上使用。

对于图像的不同用途，如不同的布局上下文和期望的视觉大小，可以有不同的配置。

用于图像的配置的主要参数是 CSS 类。

• 在 HTML 编辑器中，这通常由图像的标准“对齐”选项设置
• 在模板或程序化使用中，它直接作为参数设置

配置 可以 考虑用户设置的宽度，但默认情况下，期望的宽度仅由配置设置，以确保布局一致。

配置

一般说明：图像处理可能会对系统性能造成很大的影响，尤其是在内存使用方面。一旦生成了所需的图像，它们就会被 Silverstripe 缓存，但添加多个新图像、更改配置等可能会导致问题，尤其是在首次加载适当页面时（Silverstripe 通常会在请求时调整图像大小，这通常意味着查看页面）。

如果出现问题，请参阅以下一般建议，并尝试调整配置选项。

输出配置

配置是在 Silverstripe YAML 配置 API 中完成的。

配置属性 Mhe\SmartImages\Extensions\ImageExtension.rendering_classes 可以包含多个条目，条目包含 CSS 类的名称作为键。

特殊条目 default 用于图像没有匹配配置的情况的回退 – 以及它的属性也用作其他条目未定义属性的回退。

Mhe\SmartImages\Extensions\ImageExtension:
  rendering_classes:
    default:
      sizes: "(max-width: 1000px) 100vw, 1000px"
      sizediff: 50000
      retinalevel: 2
      maxsteps: 5
    fullWidth:
      sizes: "100vw"
      retinalevel: 2      
      # takes sizediff and maxsteps from "default" 
    smallThumbnail:
      sizes: "80px"
      maxsteps: 1
    fixed:
      rendersizes:
        - 50
        - 120
    variableImage:
      sizes: "(max-width:$USERWIDTHpx) 100v, $USERWIDTHpx"

属性

另请参阅Imagetools文档中的信息。

• sizes：响应式图片尺寸的定义，可能包含媒体条件。这将直接输出到输出img标签的sizes属性。此外，扩展程序使用这些信息来计算实际输出尺寸可能发生的情况以及哪些图像分辨率是合适的。
• sizediff：两个分辨率之间期望的文件大小（字节）差异。这不是一个精确值，而是一个大致的目标。较低的值意味着可能生成更多不同的文件，并且更好地适应响应式输出；较高的值可以减少图像生成的负载。maxsteps参数具有优先级，因此分辨率可能以较大的文件大小差异大致均匀分布。
  • 可以在值内部使用特殊的字符串 "$USERWIDTH"，在短代码中使用时，它将被替换为用户设置的源宽度属性，以启用可变、用户定义尺寸的图像。
• maxsteps：限制要创建的分辨率数量。如果retinalevel大于2，此值实际上会乘以。
• retinalevel：(1, 2或3) 创建额外的输出分辨率级别等。如果最大布局尺寸是1200px，则创建2400px的2倍分辨率。
• rendersizes：手动设置期望的分辨率，忽略其他参数。

推荐的一般Silverstripe配置

通常不需要刷新调整大小的图像。

SilverStripe\Assets\InterventionBackend:
    flush_enabled: true

如果可用，使用imagick后端通常性能更高，并且可以避免内存问题。

---
Name: mysite-imagebackend
Only:
    extensionloaded: imagick
---
SilverStripe\Core\Injector\Injector:
    Intervention\Image\ImageManager:
        constructor:
            - { driver: imagick }

在内容中使用

默认情况下，Silverstripe TinyMCE编辑器创建的图像短代码被处理。在默认设置中，您将设置如上所述的配置条目，键为"left"、"right"、"center"、"leftAlone"、"rightAlone"。

在模板中使用

根据特定配置输出图像

$Image.Rendering('cssclass=hero-img')

渲染使用自定义的DBFile_image.ss模板完成，这可以通过主题或应用中的常规方式进行调整。

在代码中使用

可以使用相同的方法在PHP代码中使用，以获取图像对象的增强副本

/** @var \SilverStripe\Assets\Image $image */
$variant = $image->Rendering(['cssclass' => 'maxsteps_90vw']);
$variant->Srcset();