README

优化您的 Sylius 商店的图片！目前仅支持与 kraken.io 一起使用，但将来将支持其他供应商。

您是否看到 Google 页面速度工具显示的这条消息："使用下一代图片格式"，这就是您需要使用的插件。

它将同时优化您的 jpeg 图片，并将它们转换为 webp 格式，为支持 webp（例如 Chrome）的浏览器提供 webp 图片。

安装

步骤 1：下载插件

$ composer require setono/sylius-image-optimizer-plugin

这将同时安装 Kraken.io Bundle，这是配置 API 密钥所需的。

步骤 2：启用插件

然后，通过将其添加到项目 config/bundles.php 文件中注册的插件/包列表中，启用该插件

确保您在 SyliusGridBundle 之前添加它，否则您将收到 您请求了一个不存在的参数 "setono_sylius_image_optimizer.model.savings.class"。 异常。

<?php
# config/bundles.php

return [
    // ...
    Setono\SyliusImageOptimizerPlugin\SetonoSyliusImageOptimizerPlugin::class => ['all' => true],
    Sylius\Bundle\GridBundle\SyliusGridBundle::class => ['all' => true],
    // ...
];

步骤 3：配置插件

添加应优化的资源（图片资源）。以下示例中，产品图片被优化，并且优化的过滤器设置为产品默认前端过滤器设置。

这也是您需要从 kraken.io 获取 API 密钥和密钥的地方。

# .env.local
KRAKEN_API_KEY=YOUR API KEY
KRAKEN_API_SECRET=YOUR API SECRET

# config/packages/setono_kraken_io.yaml
setono_kraken_io:
    api_key: "%env(KRAKEN_API_KEY)%"
    api_secret: "%env(KRAKEN_API_SECRET)%"

# config/packages/setono_sylius_image_optimizer.yaml
imports:
    - { resource: "@SetonoSyliusImageOptimizerPlugin/Resources/config/app/config.yaml" }

setono_sylius_image_optimizer:
    image_resources:
        sylius.product_image:
            # Run "php bin/console debug:config liip_imagine filter_sets" to find the filter sets configured in your app
            - sylius_shop_product_large_thumbnail
            - sylius_shop_product_thumbnail
            - sylius_shop_product_small_thumbnail
            - sylius_shop_product_tiny_thumbnail
            - sylius_shop_product_original

# config/routes/setono_sylius_image_optimizer.yaml
setono_sylius_image_optimizer:
    resource: "@SetonoSyliusImageOptimizerPlugin/Resources/config/routes.yaml"

步骤 4：配置 Symfony Messenger

如果您之前没有使用过 Symfony Messenger，您需要指定一个默认的 bus，如下所示

# config/packages/messenger.yaml

framework:
    messenger:
        default_bus: setono_sylius_image_optimizer.command_bus

步骤 4.1：使用异步传输（可选，但推荐）

此插件中的所有命令都将扩展 CommandInterface，所有事件都将扩展 EventInterface。

因此，您可以通过添加以下内容轻松地将所有命令和事件路由到您的 Messenger 配置

# config/packages/messenger.yaml
framework:
   messenger:
       routing:
           # Route all command messages to the async transport
           # This presumes that you have already set up an 'async' transport
           'Setono\SyliusImageOptimizerPlugin\Message\Command\CommandInterface': async
           'Setono\SyliusImageOptimizerPlugin\Message\Event\EventInterface': async

步骤 5：扩展图片资源

以下示例是针对产品图片的。您应该为所有想要优化的图片资源遵循此程序。

<?php
// src/Entity/Product/ProductImage.php
declare(strict_types=1);

namespace App\Entity\Product;

use Doctrine\ORM\Mapping as ORM;
use Setono\SyliusImageOptimizerPlugin\Model\OptimizableInterface;
use Setono\SyliusImageOptimizerPlugin\Model\OptimizableTrait;
use Sylius\Component\Core\Model\ProductImage as BaseProductImage;

/**
 * @ORM\Table(name="sylius_product_image")
 * @ORM\Entity()
 */
final class ProductImage extends BaseProductImage implements OptimizableInterface
{
    use OptimizableTrait;
}

# config/packages/_sylius.yaml

sylius_core:
    resources:
        product_image:
            classes:
                model: App\Entity\Product\ProductImage

步骤 6：更新数据库

最后一步是创建当前数据库模式的 diff 并迁移该模式。

$ php bin/console doctrine:migrations:diff
$ php bin/console doctrine:migrations:migrate

使用

现在运行此命令以优化您的图片

$ php bin/console setono:sylius-image-optimizer:optimize

测试

如果您想测试此插件，您可以设置 ngrok 以将请求隧道到您的 localhost

下载并安装 ngrok
运行您的本地 web 服务器：symfony serve --allow-http（这里的 allow-http 很重要，因为 ngrok 总是隧道到非安全的 localhost）
运行 ngrok：ngrok http 8000

setono / sylius-image-optimizer-plugin

维护者

详细信息