Links

Sylius

Filerobot Sylius plugin

Installation

Prerequisites

​Register for a demo if you don't already have a Filerobot account.

Step 1: Download

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.

Step 2: Enable the plugin

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],
];

Step 3: Configure

To configure the Filerobot Sylius plugin, the following components need to be updated:

1. DB Schema

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

2. Admin route

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"

3. Product media tab form

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>

4. Product grid thumbnail

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"

5. Script

# config/package/sylius_ui.yaml
​
sylius_ui:
events:
sylius.admin.layout.javascripts:
blocks:
filerobot_script: '@ScaleflexSyliusFilerobotPlugin\Admin\filerobotScript.html.twig'

6. Config filter

Create a file config/packages/scaleflex_filerobot.yaml and add content bellow
# config/packages/scaleflex_filerobot.yaml
​
imports:
- { resource: "@ScaleflexSyliusFilerobotPlugin/Resources/config/filters.yaml"}

7. Update configuration in Admin

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

Developer's den

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 in config/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 %}