web200/magento-mod-web200_image-resize

为 Magento 2 添加简单图像缩放功能的模块

维护者

详细信息

github.com/Web200/magento-mod-web200_image-resize

源代码

问题

安装次数: 25 114

依赖项: 1

建议者: 0

安全性: 0

星标: 6

关注者: 2

分支: 3

开放性问题: 0

类型:magento2-module

v1.1.10 2024-06-28 14:50 UTC

Requires

OSL-3.0, AFL-3.0 a4ba1b4163c86804ee575a3182940db419f52a35

This package is auto-updated.

Last update: 2024-09-02 05:45:26 UTC

README

添加简单图像缩放功能，适用于所有块和 .phtml 模板

安装

$ composer require "web200/magento-mod-web200_image-resize":"*"

简单图像缩放使用

ViewModel

布局

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.container">
            <block name="authlinks" template="Magento_Theme::authlinks.phtml">
                <arguments>
                    <argument name="image_resize" xsi:type="object">Web200\ImageResize\ViewModel\ImageResize</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

phtml

<?php /** @var \Web200\ImageResize\ViewModel\ImageResize $imageResize */ ?>
<?php $imageResize = $block->getImageResize() ?>
<?php 
/**
* $originalImage can be a full url image : https://mywebsite.com/pub/media/catalog/product/a/b/001.jpg
* or relative media path : catalog/product/a/b/001.jpg
*/
?>
<?php $imageResize->getResize()->resizeAndGetUrl($originalImage, $width, $height, $resizeSettings);

助手

phtml

<?php /** @var \Web200\ImageResize\Helper\ImageResize $resizeHelper */ ?>
<?php $resizeHelper = $this->helper(\Web200\ImageResize\Helper\ImageResize::class) ?>
<?php 
/**
* $originalImage can be a full url image : https://mywebsite.com/pub/media/catalog/product/a/b/001.jpg
* or relative media path : catalog/product/a/b/001.jpg
*/
?>
<?php $resizeHelper->getResize()->resizeAndGetUrl($originalImage, $width, $height, $resizeSettings);

高级图像缩放和显示使用

  • 使用断点/视网膜设置显示替代图像大小。
  • 在“商店”>“配置”>“图像缩放”中显示 Webp 图像的选项。
  • 为了显示图像，请使用 js 库： https://github.com/verlok/vanilla-lazyload

ViewModel

布局

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.container">
            <block name="authlinks" template="Magento_Theme::authlinks.phtml">
                <arguments>
                    <argument name="image_display" xsi:type="object">Web200\ImageResize\ViewModel\ImageDisplay</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

phtml

<?php /** @var \Web200\ImageResize\ViewModel\ImageDisplay $imageDisplay */ ?>
<?php $imageDisplay = $block->getImageDisplay() ?>
<?php 
/**
* $originalImage can be a full url image : https://mywebsite.com/pub/media/catalog/product/a/b/001.jpg
* or relative media path : catalog/product/a/b/001.jpg
*/
?>
<?php $imageDisplay->getDisplay()->getImage(
                                      'catalog/product/a/b/001.jpg',
                                      250,
                                      250,
                                      [
                                              'title'       => $block->stripTags('Some Label'),
                                              'retina'      => true,
                                              'breakpoints' => ['1440' => ['325', '325'], '768' => ['250', '250'], '0' => ['150', '150']]
                                          ]
                                  );

在 html 中显示

<picture>
    <source media="(min-width: 768px)" data-srcset="https://domain.com/media/web200_imageresize/cache/cms/images/97x97_co_ar_tr_fr_bc_85/empty.webp 1x, https://domain.com/media/web200_imageresize/cache/cms/images/194x194_co_ar_tr_fr_bc_85/empty.webp 2x" />
    <source media="(min-width: 0px)" data-srcset="https://domain.com/media/web200_imageresize/cache/cms/images/44x44_co_ar_tr_fr_bc_85/empty.webp 1x, https://domain.com/media/web200_imageresize/cache/cms/images/88x88_co_ar_tr_fr_bc_85/empty.webp 2x" />
    <img alt="Service 1" title="Service 1" class="lazy" src="https://domain.com/media/web200_imageresize/cache/catalog/product/placeholder/default/97x97_co_ar_tr_fr_bc_85/placeholder.jpg" data-src="https://domain.com/media/web200_imageresize/cache/cms/images/97x97_co_ar_tr_fr_bc_85/empty.jpg" data-srcset="https://domain.com/media/web200_imageresize/cache/cms/images/97x97_co_ar_tr_fr_bc_85/empty.jpg 1x, https://domain.com/media/web200_imageresize/cache/cms/images/194x194_co_ar_tr_fr_bc_85/empty.webp 2x"/>
</picture>

缩放设置

以下是可以直接设置到 $resizeSettings 参数或通过“商店”>“配置”>“图像缩放”配置的缩放设置列表

Default resize configuration

SVG

授权并清理 SVG 图像上传。默认情况下禁用。您需要在“商店”>“配置”>“图像缩放”中启用它。

  • 为网站图标和标志添加 svg 上传
  • 为后端配置文件添加 svg 上传
  • 为产品图片添加 svg 上传

缓存

缩放后的图像保存到缓存以提高性能。这样，如果图像已被缩放，我们只需使用缓存中的图像。

如果您需要，可以在管理员缓存管理中清除缩放图像缓存

Admin Clear Resized Images Cache

先决条件

  • PHP >= 7.1.*
  • Magento >= 2.3.*

来自

https://github.com/staempfli/magento2-module-image-resizer