Sylius
Filerobot Sylius plugin
Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:
composer require scaleflex/sylius-filerobot-plugin
This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation.
Then, enable the plugin by adding it to the list of registered plugins/bundles in config/bundles.php file of your project:
<?php
# config/bundles.php
return [
// ...
Scaleflex\SyliusFilerobotPlugin\ScaleflexSyliusFilerobotPlugin::class => ['all' => true],
];
To configure the Filerobot Sylius plugin, the following components need to be updated:
bin/console doctrine:migration:diff
bin/console doctrine:migration:migrate
bin/console cache:clear
Create file in
config/routes/scaleflex_sylius_filerobot.yaml with the following content:# config/routes/scaleflex_sylius_filerobot.yaml
scaleflex_sylius_filerobot:
resource: "@ScaleflexSyliusFilerobotPlugin/Resources/config/routing.yaml"
Change form theme
{% form_theme form '@ScaleflexSyliusFilerobotPlugin/Admin/Form/imagesTheme.html.twig' %}
in your 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>
Change grid thumbnail column template
# 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'
Create a file
config/packages/scaleflex_filerobot.yaml and add content bellow# config/packages/scaleflex_filerobot.yaml
imports:
- { resource: "@ScaleflexSyliusFilerobotPlugin/Resources/config/filters.yaml"}
Navigate to Configuration / Scaleflex Filerobot
Photo alt \#responsive
You can enable the plugin only if both token and security template id are correct.
- Activation: Enable/Disable Filerobot plugin
- Filerobot Token: Your Filerobot token, unique Filerobot Project and gallery identifier
- Security Template Identifier: Your security template ID, found in the "Developers" section of your Filerobot admin
- Filerobot upload directory: (sub)folder path to your asset's gallery, eg. /my_sylius_folder
The Filerobot plugin offers various Twig methods and filters to assist developers:
is_filerobot(image_path): Twig function which checks if an image is stored in Filerobot;image_path|filerobot('sylius_shop_product_thumbnail'): A resizing Twig filter; More filters can be added in inconfig/package/scaleflex_filerobot.yaml.
scaleflex_sylius_filerobot:
filters:
custom_size: { width: 120, height: 120 }
and in Twig
image_path|filerobot('custom_size')
We have some default size follow Sylius default, you can override it in filter config above
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 }
- If you use Scaleflex Filerobot on existing File you have to check the path is filerobot or not, if not use the default way
Example with Sylius default
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 %}
Last modified 1mo ago