scaleflex / sylius-filerobot-plugin
Acme为Sylius的示例插件。
Requires
- php: ^8.0
- sylius/sylius: ^1.11
Requires (Dev)
- behat/behat: ^3.6.1
- behat/mink-selenium2-driver: ^1.4
- dmore/behat-chrome-extension: ^1.3
- dmore/chrome-mink-driver: ^2.7
- friends-of-behat/mink: ^1.8
- friends-of-behat/mink-browserkit-driver: ^1.4
- friends-of-behat/mink-debug-extension: ^2.0.0
- friends-of-behat/mink-extension: ^2.4
- friends-of-behat/page-object-extension: ^0.3
- friends-of-behat/suite-settings-extension: ^1.0
- friends-of-behat/symfony-extension: ^2.1
- friends-of-behat/variadic-extension: ^1.3
- friendsofsymfony/oauth-server-bundle: ^1.6 || >2.0.0-alpha.0 ^2.0@dev
- phpspec/phpspec: ^7.0
- phpstan/extension-installer: ^1.0
- phpstan/phpstan: 0.12.99
- phpstan/phpstan-doctrine: 0.12.33
- phpstan/phpstan-strict-rules: ^0.12.0
- phpstan/phpstan-webmozart-assert: 0.12.12
- phpunit/phpunit: ^9.5
- polishsymfonycommunity/symfony-mocker-container: ^1.0
- sensiolabs/security-checker: ^6.0
- sylius-labs/coding-standard: ^4.0
- symfony/browser-kit: ^5.4
- symfony/debug-bundle: ^5.4
- symfony/dotenv: ^5.4
- symfony/intl: ^5.4
- symfony/web-profiler-bundle: ^5.4
- vimeo/psalm: 4.7.1
This package is not auto-updated.
Last update: 2024-09-24 05:59:19 UTC
README
步骤 1: 下载插件
打开命令行控制台,进入您的项目目录,并执行以下命令以下载此捆绑包的最新稳定版本
composer require scaleflex/sylius-filerobot-plugin
此命令要求您全局安装Composer Composer,如Composer文档中的安装章节所述。
步骤 2: 启用插件
然后,通过将其添加到项目config/bundles.php文件中注册的插件/捆绑包列表中,来启用该插件
<?php
# config/bundles.php
return [
// ...
Scaleflex\SyliusFilerobotPlugin\ScaleflexSyliusFilerobotPlugin::class => ['all' => true],
];
步骤 3: 配置插件
更新数据库模式
bin/console doctrine:migration:diff bin/console doctrine:migration:migrate bin/console cache:clear
添加管理路由
在config/routes/scaleflex_sylius_filerobot.yaml
中创建文件并添加以下内容
# config/routes/scaleflex_sylius_filerobot.yaml scaleflex_sylius_filerobot: resource: "@ScaleflexSyliusFilerobotPlugin/Resources/config/routing.yaml"
更新产品媒体选项卡表单
更改表单主题 {% form_theme form '@ScaleflexSyliusFilerobotPlugin/Admin/Form/imagesTheme.html.twig' %}
在您的 templates/bundles/SyliusAdminBundle/Product/Tab/_media.html.twig
{% form_theme form '@ScaleflexSyliusFilerobotPlugin/Admin/Form/imagesTheme.html.twig' %} <div class="ui tab" data-tab="media"> <h3 class="ui top attached header">{{ 'sylius.ui.media'|trans }}</h3> <div class="ui attached segment"> {{ form_row(form.images, {'label': false}) }} {{ sylius_template_event(['sylius.admin.product.' ~ action ~ '.tab_media', 'sylius.admin.product.tab_media'], {'form': form}) }} </div> </div>
更新产品网格缩略图
更改网格缩略图列模板
# config/package/_sylius.yaml sylius_grid: grids: sylius_admin_product: fields: image: options: template: "@ScaleflexSyliusFilerobotPlugin/Admin/Product/Grid/Field/image.html.twig"
添加脚本
# config/package/sylius_ui.yaml sylius_ui: events: sylius.admin.layout.javascripts: blocks: filerobot_script: '@ScaleflexSyliusFilerobotPlugin\Admin\filerobotScript.html.twig'
添加配置过滤器
创建文件 config/packages/scaleflex_filerobot.yaml
并添加以下内容
imports: - { resource: "@ScaleflexSyliusFilerobotPlugin/Resources/config/filters.yaml"}
在管理员中更新配置
只有当令牌、安全模板ID正确时,才能启用
- 激活:启用/禁用Filerobot插件
- Filerobot令牌:您的Filerobot令牌
- 安全模板标识符:您的安全模板ID
- Filerobot上传目录:您的资产文件夹路径,例如 /magento
开发者指南
Filerobot插件提供了一些twig方法和过滤器,以支持开发者
-
is_filerobot(image_path)
:Twig函数检查图像是否为filerobot -
image_path|filerobot('sylius_shop_product_thumbnail')
:Twig过滤器,带有图像大小,您可以在config/package/scaleflex_filerobot.yaml
中添加更多过滤器scaleflex_sylius_filerobot: filters: custom_size: { width: 120, height: 120 }
并在Twig中
image_path|filerobot('custom_size')
我们有一些默认大小,遵循Sylius默认设置,您可以在上面的过滤器配置中覆盖它
scaleflex_sylius_filerobot: filters: sylius_admin_product_large_thumbnail: { width: 550, height: 412 } sylius_admin_product_small_thumbnail: { width: 150, height: 112 } sylius_admin_product_tiny_thumbnail: { width: 64, height: 64 } sylius_admin_product_thumbnail: { width: 50, height: 50 } sylius_shop_product_tiny_thumbnail: { width: 64, height: 64 } sylius_shop_product_small_thumbnail: { width: 150, height: 112 } sylius_shop_product_thumbnail: { width: 260, height: 260 } sylius_shop_product_large_thumbnail: { width: 550, height: 412 } sylius_small: { width: 120, height: 120 }
-
如果您在现有的文件上使用Scaleflex Filerobot,则必须检查路径是否为filerobot,如果不是,则使用默认方式
使用Sylius默认设置的示例
templates/bundles/SyliusShopBundle/Product/_mainImage.html.twig
{% if product.imagesByType('thumbnail') is not empty %} {% if is_filerobot(product.imagesByType('thumbnail').first.path) %} {% set path = product.imagesByType('thumbnail').first.path|filerobot('sylius_shop_product_thumbnail') %} {% else %} {% set path = product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %} {% endif %} {% elseif product.images.first %} {% if is_filerobot(product.images.first.path) %} {% set path = product.images.first.path|filerobot('sylius_shop_product_thumbnail') %} {% else %} {% set path = product.images.first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %} {% endif %} {% else %} {% set path = asset('assets/shop/img/200x200.png') %} {% endif %} <img src="{{ path }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}" class="ui bordered image" />
templates/bundles/SyliusShopBundle/Product/Show/_mainImage.html.twig
{% if product.imagesByType('main') is not empty %} {% set source_path = product.imagesByType('main').first.path %} {% if not is_filerobot(source_path) %} {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %} {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %} {% else %} {% set original_path = source_path|filerobot('sylius_shop_product_original') %} {% set path = source_path|filerobot('sylius_shop_product_large_thumbnail') %} {% endif %} {% elseif product.images.first %} {% set source_path = product.images.first.path %} {% if not is_filerobot(source_path) %} {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %} {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %} {% else %} {% set original_path = source_path|filerobot('sylius_shop_product_original') %} {% set path = source_path|filerobot('sylius_shop_product_large_thumbnail') %} {% endif %} {% else %} {% set original_path = asset('assets/shop/img/400x300.png') %} {% set path = original_path %} {% endif %} <div data-product-image="{{ path }}" data-product-link="{{ original_path }}"></div> <a href="{{ original_path }}" class="ui fluid image" data-lightbox="sylius-product-image"> <img src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} /> </a> {% if product.images|length > 1 %} <div class="ui divider"></div> {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }} <div class="ui small images"> {% for image in product.images %} {% set path = image.path is not null ? (is_filerobot(image.path) ? image.path|filerobot('sylius_shop_product_small_thumbnail') : image.path|imagine_filter('sylius_shop_product_small_thumbnail')) : asset('assets/shop/img/200x200.png') %} <div class="ui image"> {% if product.isConfigurable() and product.enabledVariants|length > 0 %} {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %} {% endif %} <a href="{{ is_filerobot(image.path) ? image.path|filerobot('sylius_shop_product_original') : image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image"> <img src="{{ path }}" data-large-thumbnail="{{ is_filerobot(image.path) ? image.path|filerobot('sylius_shop_product_large_thumbnail') : image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" /> </a> </div> {% endfor %} </div> {% endif %}