Visual Experience Platform
Help CenterRelease NotesBlogWebsite
  • VXP - Visual Experience Platform
    • The VXP
      • Token
    • Settings
      • My Account
        • Profile
        • Support
      • Organisation
        • General Organisation Settings
        • Billing
          • Payment
          • Invoices
          • Plan
        • Users
          • Users
          • Roles
        • Teams
      • Project
        • Branding
        • Subscription
        • Analytics
          • Standard Dashboards
            • Multi tenants
            • User Dashboard
            • DAM Storage
            • Workflows Monitoring
            • Traffic Origin
            • Caching (Volumetry)
            • CDN performance
          • Custom Dashboard
        • Access
          • API keys
          • Security templates
          • OAuth2
  • Digital Asset Management (DAM)
    • Library
      • Assets
        • Asset Details window
          • Asset actions
            • Regional settings
            • Context menu ("..." button)
            • Add to My favorites (heart icon)
            • Edit media (image, video, etc)
              • Edit image
              • Edit video (coming soon)
              • Edit design template (coming soon)
            • Share
          • Asset information tabs
            • General
            • Metadata
            • Variations
            • Comments
            • Approvals
            • History
      • Folders
      • Collections
      • Labels
      • Products
      • My favorites
      • Help
      • Sharebox
      • Airbox
      • Search and Filters
        • Faceted Search
    • Plugins & Connectors
      • Plugins
        • Adobe Creative Cloud
        • Adobe Commerce (Magento)
        • Canva
        • Contentful
        • Contentstack
        • Directus
        • Drupal
        • Opencart
          • Opencart (v4)
        • Prestashop
        • Shopware
        • Storyblok
        • Strapi (v4)
        • Sylius
        • Uniform CMS
        • Wordpress
      • Connectors
        • Akeneo PIM App
        • Canva App
        • CI-Hub
        • Commercetools FaaS App
        • Hygraph app
        • Kontent.ai
        • OneTeg
        • Pabbly Connect
        • Prismic
        • Shopify / Shopify plus app
        • Zapier automation
    • Settings
      • Library
        • Featured components
        • Interface customization
      • Metadata
        • Metadata Configuration
        • Assets
      • Tags
        • Configuration
        • Dictionary
      • Notifications
      • Automations
        • Post processing
        • Webhooks
        • Workflows
      • Storage
        • Providers
        • Upload
        • Video
        • Listing
        • Download
        • Custom routing
  • Visual AI
    • Welcome
    • Visual AI
      • Images
        • Classification models
          • Auto-tagging
          • Brand detect
          • Dominant color extraction
          • Faces
            • Face analysis
            • Face clustering
          • Image quality
          • OCR
          • Number Plate recognition
          • Product type
          • Property classification
          • Scene Classification
          • Sport Classification
        • Generative AI models
          • Image-to-text
          • Plate blurring
          • Quality improvement (remove artifacts)
          • Remove background
          • Text-to-Image
        • Moderation models
          • Face count
          • NSFW - Not Safe For Work
          • Real estate authenticity
          • Watermark detection
      • Videos
        • Face detection
      • Search & find assets
        • Text Search
        • Similar Assets
  • Portals
    • Welcome
    • Creating a Portal
    • Editing a Portal
      • Pages
      • Sections
      • Design
      • Fonts
    • Managing a Portal
      • Settings
      • Access
      • Users
      • Labeling, Cloning, Archiving
    • Publishing a Portal
  • Dynamic Media Optimization (DMO)
    • Welcome
      • Responsive libraries
      • Native plugins
      • 360° view builder
      • Service status
    • Insights
      • Delivery
      • Optimization
      • Alerts
      • Logs
    • Transformations
      • Image optimization
        • Operations
          • Width and height
          • Prevent enlargement
          • Crop
            • Automatic Gravity Crop
            • Positionable Crop
            • Focal point Crop
            • Face Crop
            • Face hide
            • Aspect ratio crop
          • Fit
          • Cropfit
          • Bound
          • Boundmin
          • Cover
          • Device pixel ratio
          • Flip
          • Rotate
          • Trim
          • Rounded corners
        • Filters
          • Adjustment
            • Brightness
            • Contrast
            • Saturate
          • Color manipulation
            • Color overlay
            • Grayscale
            • Duotone
          • Blur
          • Pixelate
          • Sharpen
        • Watermarking
          • Static watermark
          • Dynamic watermark
          • Text watermark
        • Image compression
          • Image formats
          • Optipress
      • Video optimization
        • Video API
          • Editing
            • Chapters
            • Combine
            • Trim
          • Optimizing
            • Convert
            • Compress
            • Transcode
        • On-the-fly-video optimization
      • Static content optimization
        • PDF to image
        • JS/CSS optimization
    • Invalidation
    • Settings
      • Asset Origin
        • AWS S3 or any other S3-compatible storage provider
        • Google Cloud storage (GCP)
        • Azure Blob storage
        • Own HTTP-based Storage
      • Images
        • Compression
        • Optimization
        • Watermark
      • Static content
      • Delivery
        • CNAME
        • URL format
        • Rules
        • Security
        • Caching
        • Default behaviors
  • Developers / Headless
    • Headless DAM
      • DAM APIs
        • API Authentication
        • API Reference
      • Command Line Interface (CLI)
      • Media Asset Widget(MAW)
        • Overview
        • Developer reference
        • V2 End-of-life
Powered by GitBook
LogoLogo

Quick links

  • Go to website
  • Legal Center

©2024 Scaleflex SAS

On this page
  • Installation
  • Developer's den
Export as PDF
  1. Digital Asset Management (DAM)
  2. Plugins & Connectors
  3. Plugins

Sylius

DAM Sylius plugin

PreviousStrapi (v4)NextUniform CMS

Last updated 6 months ago

Installation

Prerequisites

if you don't already have a DAM 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 , 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 DAM Sylius plugin, the following components need to be updated:

1. DB Schema

Copy

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:

Copy

# 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

Copy

{% 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 DAM

You can enable the plugin only if both token and security template id are correct.

  • Activation: Enable/Disable the plugin

  • DAM Token: Your DAM token, unique DAM Project and gallery identifier

  • Security Template Identifier: Your security template ID, found in the "Access > Security templates" section of your DAM admin

  • DAM upload directory: (sub)folder path to your asset's gallery, eg. /my_sylius_folder

Developer's den

The DAM plugin offers various Twig methods and filters to assist developers:

  • is_filerobot(image_path): Twig function which checks if an image is stored in DAM ;

  • 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 ab

  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 DAM 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 %}
Register for a demo
installed globally