README

此插件允许您通过将图像缩放任务推送到队列或将缩放操作在图像加载时进行，从而将图像缩放从页面渲染中卸载。此功能在图像密集型网站上非常有用，在这些网站上，要显示的图像会随时间变化，并且您的网站模板中使用了同一图像的多个尺寸。

为了提供最佳用户体验，预计您将在可能的情况下预先生成所需的图像尺寸，例如，通过后端更改图像画廊时触发相关页面渲染。此插件的目的就是通过避免页面执行时间限制，并在具有更高内存限制的队列工作中处理缩放，来简化这一过程。

如果由于某种原因，所需的图像尺寸尚未预先生成，并且在网站访客访问页面时不存在，页面可以在图像缩放操作完成之前进行渲染和显示。根据服务器负载和您的配置，访客在加载所有页面图像之前可能会有显著的延迟，但他们应该体验到图像加载的暂时缓慢，而不是页面加载或PHP执行时间限制错误的长等待。

使用方法

在您的Twig模板中提供了可用的smart_resize过滤器。此过滤器几乎可以替代OctoberCMS文件附件提供的getThumb函数，增加了priority参数来指定排队优先级。

可用的参数列表为smart_resize(width, height, options, priority)

新增选项

文件附件getThumb替代

<img src="{{ file.getThumb(200, 200) }}">

变为

<img src="{{ file | smart_resize(200, 200) }}">

直接路径

除了处理文件附件对象外，您还可以将图像路径传递给您的media或uploads存储。与由mediafinder表单小部件保存的路径一致，media路径应使用media文件夹作为根目录。在uploads中的路径应相对于项目根目录。

以下是一个示例，假设默认目录结构

-- storage
   `-- app
       `-- media
           `-- media_file.jpg
       `-- uploads
           `-- test_upload.jpg

您的页面可以包含以下标记

<img src="{{ '/media_file.jpg' | smart_resize(600, 400, { 'quality': 95 }) }}">
<img src="{{ '/storage/app/uploads/test_upload.jpg' | smart_resize(350, 350, { 'mode': 'crop', 'quality': 95 }) }}">

全局函数

定义了一个全局的smartResize函数，用于在后台（或任何地方）使用。此函数的第一个参数是文件附件对象或字符串路径，然后是与Twig过滤器相同的参数。与过滤器一样，它返回用于加载缩放图像的URL。

$resizedUrl = smartResize('/media/file.jpg', 300, 200);

优先级级别

默认情况下，此插件设置了两个优先级级别，它们会影响缩放作业的排队方式：high和default

...
    'priorityLevels' => [
        /*
         * The key defines the priority level to use in the Twig filter,
         * e.g. {{ image || smart_resize(600, 400, 'auto', 'high) }}
         */
        'high' => [
            'isPriority' => true, // true to send to queue as soon as a batch is ready
            'queue'      => null, // The queue name to send jobs to, or null for the default
        ],
        'default' => [
            'isPriority' => false,
            'queue'      => null
        ]
    ],
...

以下是一个示例，说明优先级级别可能有用的情况：考虑一个在页面上显示缩略图的图像画廊，并提供链接到更大生成的图像尺寸。缩略图将在页面加载时自动加载，但较大的图像可能或可能不会由网站访客加载。因此，我们可以选择使用类似的标记

...
{% for image in gallery_images %}
    <a href="{{ image | smart_resize(1200, 800) }}">
        <img src="{{ image | smart_resize(250, 250, 'auto', 'high') }}">
    </a>
{% endfor %}
...

因为isPriority设置为high优先级级别，所以一旦准备好，缩放批次就会发送到队列，并且在页面渲染完成后，任何剩余的high优先级缩放都将排队，然后再发送其余内容。

如果一次只渲染需要生成图像的一页，那么这工作得很好，但如果存在其他页面并发排队进行图像调整大小的可能性，您可能需要设置带优先级的排队，如排队文档中所述。通过我们上面的示例标记，通过queue设置将每个优先级分配给不同的队列，可以优先生成相册页的缩略图，而在此之前排队的另一个相册页的大图像正在进行调整大小。

许可证

MIT许可证