README

步骤 1：下载插件

打开命令行，进入您的项目目录，然后执行以下命令以下载此包的最新稳定版本

 composer require scaleflex/sylius-cloudimage-plugin

此命令需要您全局安装 Composer，具体请参阅 Composer 文档的安装章节。

步骤 2：启用插件

然后，将插件添加到项目中 config/bundles.php 文件中已注册的插件/包列表中，以启用它

<?php

# config/bundles.php

return [
    // ...
    Scaleflex\SyliusCloudimagePlugin\ScaleflexSyliusCloudimagePlugin::class => ['all' => true],
];

步骤 3：配置插件

更新渠道模型

您的实体渠道必须实现 \Scaleflex\SyliusCloudimagePlugin\Model\ExtendedChannelInterface。您可以使用 Trait \Scaleflex\SyliusCloudimagePlugin\Model\ExtendedChannelTrait。

然后添加到您的配置

# config/packages/_sylius.yaml
sylius_channel:
    resources:
        channel:
            classes:
                model: App\Entity\Channel #Your Channel Model

升级数据库

bin/console doctrine:migration:diff
bin/console doctrine:migration:migrate

更新渠道表单

将 {{ include('@ScaleflexSyliusCloudimagePlugin/Admin/Channel/extendedChannelForm.html.twig') }} 包含在您的 templates/bundles/SyliusAdminBundle\Channel\_form.html.twig 中

示例

{{ form_errors(form) }}
<div class="ui two column stackable grid">
        <!-- Example -->
        {{ include('@ScaleflexSyliusCloudimagePlugin/Admin/Channel/extendedChannelForm.html.twig') }}
</div>

更改配置

选项

预渲染：如果启用，则图像 URL 将更新为 {token}.cloudimg.io，并禁用 CI Responsive JS。

使用原始 URL：如果启用，则模块将仅向图像源 URL 添加查询参数，而无需以 {token}.cloudimg.io 为前缀。

忽略图像大小节点：对于与某些主题的兼容性很有用。

忽略图像大小样式：对于与某些主题的兼容性很有用。

懒加载：如果启用，则图像将进行懒加载，以实现更好的加载时间和用户体验。

请注意，懒加载在某些网站上可能会有不同的结果，因为第一行图像加载时可能会出现延迟。因此，建议使用提供的集成新类“lazy-off”。您可以在后台办公室通过页面构建器或在模板中直接指定“lazy-off”类（例如，分类页面和产品页面）。

删除 V7：从 URL 格式中删除“/v7”部分。激活 2021 年 10 月 20 日之后创建的令牌。

高级配置 [可选] 此设置仅适用于高级用户，并允许将自定义 JS 函数注入到 Magento 模板中，以支持某些特定模板。如有需要，请与我们联系以获取要注入以解决您特定模板问题的自定义 JS 函数。

自定义 JS 函数：用于自定义 Cloudimage 库的 js 函数。

图像质量：自定义图像质量，因此压缩 -大小- 是默认应用的。 （警告：设置低于 80 可能会有可见的影响）

忽略 SVG 图像：如果启用，则所有 SVG 图像都将从加速中跳过，因为矢量图像本身不会进行压缩。

最大“像素比”：支持的设备像素比列表，默认为 2，例如：2 用于 Retina 设备

自定义库选项：这些可选参数将被添加到通过 Cloudimage 加速基础设施的每个 URL 的请求中。这可以允许您强制使用图像格式、应用自动转换或水印，并可能用于故障排除目的。 （仅限高级用户，请参阅此处官方 Cloudimage 文档 中的可能参数列表）

包含脚本

您可以通过监听任何模板事件来包含我们的脚本

• 脚本 @ScaleflexSyliusCloudimagePlugin\Shop\cloudimageScript.html.twig
• 处理 @ScaleflexSyliusCloudimagePlugin\Shop\cloudimageProcess.html.twig 示例

# config/packages/sylius_ui.yaml
sylius_ui:
  events:
    sylius.shop.layout.head:
      blocks:
        cloudimage_script: '@ScaleflexSyliusCloudimagePlugin\Shop\cloudimageScript.html.twig'
    sylius.shop.layout.after_body:
      blocks:
        cloudimage_process: '@ScaleflexSyliusCloudimagePlugin\Shop\cloudimageProcess.html.twig'

覆盖模板

要通过 Cloudimage 处理您的图像，您有两种实现方式

• 方法一：使用 ci_src(path) Twig 函数

#templates/bundles/SyliusShopBundle/Product/_mainImage.html.twig

{% if product.imagesByType('thumbnail') is not empty %}
  {% set path = product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
  {% elseif product.images.first %}
  {% set path = product.images.first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
  {% else %}
  {% set path = '//placehold.it/200x200' %}
  {% endif %}

  <img {{ ci_src(path) }} {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}" class="ui bordered image" />

• 方法二：定义自己的
  • 更新图像的 src 为 ci-src="{path}?q={sylius.channel.cloudimageImageQuality}"
  • 添加脚本

    {% if sylius.channel.cloudimageStatus and sylius.channel.cloudimageToken %}
        <script>
            window.ciResponsive.process();
        </script>
    {% endif %}