1 of 100

Visual Experience Platform

VXP - Visual Experience Platform

Welcome to the VXP Documentation! This guide is designed to help you get started with The Visual Experience Platform and make the most out of its modules and features.

What is the VXP ?

The VXP is a platform to support the creation, management, optimization and delivery of visual experiences relying on visual assets, such as images, videos and documents.

It brings together 4 modules into 1 scalable and flexible platform for digital teams and IT teams to use via an web console (VXP Hub) or API (headless):

Digital Asset Management (DAM): manage visual assets in one single source-of-truth for both digital teams and developers.
Visual AI: automate manual content workflows with AI-powered enrichment, moderation, and generative AI to streamline processes.
Portals: publish design guidelines and galleries to multiple stakeholders using a no-code portal builder.
Dynamic Media Optimization (DMO): optimize images and videos with smart transformations and accelerate delivery over multi-CDN.

The platform follows MACH principles and is built in a composable way to simplify the integration into an existing stack of solutions, such as your PIM, CMS or e-commerce platform.

Platform overview

Start using the DAM to upload your first files, such as images and videos, via simple drag and drop, CSV import or API upload. Streamline team collaboration around marketing and product assets.

Enrich files with tags as well as metadata to turn them into assets and organise them into static folders or dynamic collections. Leverage Visual AI to automatically tag, describe and categorize assets.

Publish media galeries on responsive and multi-lingual Portals, built via our easy-to-use and templated no-code CMS.

Dynamically generate variations of assets to ensure optimal size and crop for each specific channel. Leverage the DAM Studio to create marketing banners at scale with dynamic images and text.

Speed up delivery by utilizing modern compression formats such as WebP, AVIF, and WebM, alongside Content Delivery Networks (CDNs), to enhance web page performance and improve core web vitals.

Finally, get access to analytics and insights about the platform's user adoption, insights about your asset's performance and help drive decision on which asset to use when.

Business examples

Manage and optimize large volumes of e-commerce or real estate product assets

Modules: DAM, Visual AI, DMO Target users: developers and e-commerce team

Modules: DAM Target users: studio team, marketers

Create a brand portal to publish brand guidelines

Modules: DAM, Portals Target users: branding team

Build a multi-tenant and scalable content backend for your SaaS application and leverage AI-powered visual search to find assets by text prompts

Modules: DAM, Portals Target users: branding team

If you need further assistance, please check our knowledgebase or contact our Customer Experience team at support@scaleflex.com

The VXP Hub

The Visual Experience Hub is your platform that hosts all modules you use with Scaleflex.

In this section, you will learn about the basics of the VXP, which include: - Your VXP token - The VXP Menu - Help Section

Token

The provided token is a key concept to understand when working with Scaleflex DAM. Your token identifies as your tenant, which is used for and known as a project.

Each new Scaleflex DAM account comes with a token for a project. Each token combines a storage container to store assets and a CDN distribution to deliver optimized assets over CDN worldwide. An account can have multiple tokens to suit different projects within an organisation, which is called multi-tenancy.

Whether you use one or multiple tokens for your projects, Scaleflex DAM's multi-tenancy allows you to manage all use cases across various tokens or projects through a unified interface.

Company-wide vs project-wide users

Users can be created at the company level or project level.

A hierarchy can be created within each token or project, and users and teams can be given access permissions to single or multiple tokens.

Company-level: grants access to all projects
Project-level: grants access to a project or selected projects, but not all within the company

Some system settings are company-specific, while others are project-specific.

As a simple rule, all Organisation settings are linked to the company, while all other settings, such as Project or Development, are project-specific.

Asset

View and search through all your assets within the Asset view in the DAM.

Asset View

You can view and search for all the assets within the DAM's assets view. This view is found on the left-hand menu titled Assets.

[insert screenshot here]

Searching for assets

Use the search bar to find specific assets and narrow your search using the available filters.

You can also pin and save your searches to access the assets being searched quickly.

[insert screenshot or gif here]

Getting assets details

If you select a single asset and click the "Info" icon at the top right of the page, a panel showing the asset details will open.

Within this panel, you can view the general details of the asset and be able to edit basic information such as name, title, description, and tags.

The second tab, Custom Metadata, allows you to view and directly edit the asset's metadata.

[insert screenshot or gif here]

Folders

Folders View

Within Scaleflex DAM, you can organize your assets into folders. This view is available in the left panel under "Folders".

It consists of a navigation panel where the folders and their sub-folders are hierarchically ordered, and there is an expanded view where you can preview the content of the current folder. You can view your folders through a Grid view or as a List. The following icon controls the view:

Getting Folder Details

If you select a single folder and click the "Info" icon at the top right of the page, a panel showing the folder's details will open.

Creating a new Folder

To create a new folder, you can use the + New Folder button at the top right corner of the page. The new folder will be created as a sub-folder of your current folder's location.

Please note that "/" is a special symbol in the folder name. If you specify "Media/Images," the system will create a folder named "Media" and a subfolder named "Images" inside it.

Downloading the Folder's Contents

Downloading Assets

If you select a folder and open its context menu, you can download its content. The same action is available from the navigation bar by clicking the download icon at the top right corner of the selected folder. You can download the content as a ZIP archive or CSV file.

Exporting List of Files as CSV

This option is helpful when you need details about the folder's content.

Please select the folder, open the context menu, and choose "More actions -> Export list of files (CSV)." At this step, you can export the file details of the entire project, only the files placed directly in the selected folder or the folder and its nested sub-folders.

The information that is exported in the CSV contains:

Item Type
Path CDN link
mime-type size
SHA1
file uuid
creation date
update date
visibility settings

Searching Folders

To search for a folder by name, use the Search bar located in the folder's side menu.

If you know that a specific file is located within a particular folder, you can use the main Search bar to specify this folder and then apply additional search criteria to find the files you are interested in.

Collections

A collection is a group of related assets defined by metadata.

Example: A collection of Cars may contain all assets having "Car" as a value in the metadata field "Vehicle type".

Unlike Folders, Labels, and My Favourites, Collections are dynamic, meaning assets are grouped automatically based on metadata rules, without needing manual updates.

Collections View

You can access the Collections view from the main menu on the Library page.

In the collections list, the collections submenu has the following options:

Name: sort by name ascending or descending
“Sort” icon: if the collections are currently sorted by name ascending, then this will sort them descending and vice-versa
“Planet” icon: allows to select the metadata/tags language
Refresh: refreshes the collections list
"Info" icon: if an asset is selected, provide additional details for it
"Cart" icon: a collection of downloaded assets.

Managing Collections

Add a New Collection

You can do this by clicking on the button + Add collection. A pop-up configuration panel will appear, prompting you to specify the collection’s name and settings.

Name - please specify a meaningful collection name
Access - by default, it is Company. Only users with access to Scaleflex DAM can see these assets.
Groups - the groups contain a list of pre-defined collection criteria that can be combined together.

Edit Collections

Click on the "Settings" icon in the left panel of the page to open the Configuration window, which allows you to manage your collections.

That will open the "Manage collections" window where you can Search, Add new collections, Edit the current configuration or Delete existing collections.

Labels

Labels are used to categorize and describe items, allowing for flexible grouping and easy search. One asset can have multiple labels.

Difference between Labels, Tags, and Collections

Labels allow users to organise their assets in a more structured and permanent way than Tags. They are static—unlike dynamic Collections, whose assets change through applicable filters—and similar in principle to the labels on physical products (drinks, foods, clothes).

Users can still modify a given label and/or change which assets fall under it.

This system also lets users view and search the labels and their applicable assets.

Labels View

The Labels page can be accessed from the DAM sidebar menu.

Managing Labels

Creating Labels

You can create named, color-coded labels by clicking on + Add label button. This lets you list and place all assets assigned to a specific label in a single view.

Title - choose a meaningful name for your new label
Color selector - choose a color by clicking a pre-defined color or by entering an RGB code manually.
Pinned - check this box to display the label at the top of your label list. On Sort, the system will first sort the Pinned labels and then show the others.

Editing Labels

To manage labels, click the 'Settings' icon in the left panel. This opens the Configuration window.

That will open the "Manage labels" window where you can Search, Add new labels, Edit the current configuration or Delete existing labels.

[insert screenshot or gif]

If you want to delete a label, it is a good practice to ensure that the number of current assets assigned to it is "0."

Attaching a Label to an Asset

Right-click on an asset (or multiple selected assets) and choose the 'Labels' submenu to search for and apply a label.

[insert screenshot or gif]

If no exact match is found during the search, the user has the option to create a new label and apply it to the asset immediately.

[insert screenshot or gif]

Detach a Label from an Asset

This function is available on the Labels page when selecting a file and opening its context menu.

[insert screenshot or gif]

The user can also select multiple files and use the Navigation bar icon ... to access the same option.

In both cases, the user should have a Developer, Manager, Admin, or Owner User Role to detach a label.

Searching Labels

Searching for an Asset by a Specific Label

You can search by specific search criteria inside the pool of all assets assigned to a particular label, using the main Search box.

[insert screenshot or gif]

Searching for a Specific Label

If you are interested in finding all assets assigned to a specific label, you can search for this label's name in the Search box at the left panel and then click on the result.

[insert screenshot or gif]

My favorites

"My Favorites" are typically used to quickly access frequently visited assets. They provide a way to create a personalized flat list of preferred items for easy access.

Users can mark assets as favorites and view / search these assets under the My Favorites view for quick access. Each asset can be marked as a favorite or not, and each user can access their list of favorite assets via Menu > My favorites.

Adding Assets to My Favorites List

The user can add an asset to the My Favorites list by clicking on the heart icon at the bottom right corner of the asset.

An asset whose heart icon is coloured in has already been added to this list, while an asset whose heart icon is white or empty is not part of My Favorites.

Users can add multiple assets in bulk to My Favorites list by selecting them and then opening ... -> Add to -> My favorites in the Navigation bar.

In the same way, an asset or a group of assets that have already been added to My favorites list can be removed from it.

Help

The Help section located at the bottom of the main sidebar menu provides information to users that need further assistance in operating the DAM.

When clicking the Help box in the menu, an additional menu appears:

Settings

The settings within the VXP platform are your control centre; use this section to understand how to set up your account, manage users or billing, and apply brand identity to your platform.

Within this section, you will learn about the following sections found within the Settings menu: - My Account - Organisation - Project

My Account

The Account section within Settings consist of two parts: Profile and Support. Use these pages to understand how to set up your account and use Support.

Continue to the next page to learn about setting up your Profile.

Profile

Control panel where users can manage profile information, login and security settings

Section

Fields

Support

Use the Support page to log a bug or make inquiry directly to the Scaleflex CX team.

The Support window will display your logged ticket history to the Customer Experience team. The following information will be displayed:

In addition, you can make a direct request to the Support team by clicking the + Send request button.

When clicking the + Send request button, a form will appear. You can provide a title, message, and any attachments to the request.

When logging a bug, we recommend attaching screenshots or videos of the issue so the Support team can better understand and reproduce the issue.

Organisation

The Organisation section with Settings is where you can set the general details, view billing, and manage users and teams.

You can jump to the following sections to learn more.

General Organisation Settings

This page contains company-wide settings that are applied to all projects.

Basics

This page section contains information about the company:

Access management

In this section, the company-wide security settings can be specified.

SSO

Configure SSO so that users can log in with their corporate credentials (such as Active Directory, Okta, or Azure AD / Entra ID) into Scaleflex DAM.

An Identity Provider supporting SAMLv2 is required.

To configure SAMLv2-based SSO, click on the Add SSO connection button. Any Identity Provider supporting the SAMLv2 protocol is supported.

After saving the SSO connection, every user attempting to log in with an email address from the domain configured in Step 3 will be redirected to the configured Identity Provider and automatically logged into the Asset Hub if an active SAMLv2 session is enabled.

Terms and conditions (T & Cs)

Billing

Manage your billing information and plan and view your invoices within the Billing section of the VXP platform.

The Billing page within Settings consists of three sections:

Payment
Invoices
Plan

Payment

Billing information

Setting

Description

Payment details

List of available payment methods for making payments on your invoices. You can only choose one option.

Invoices

The invoice page shows all your paid and pending invoices. You can download them for your records and future reference.

Plan

The Plan page provides an overview of your current plan which details what is included and the add-on features that you can purchase.

Users

View your Users and manage roles with the DAM through the Users section.

Within these pages you will learn about:

Users - managing and inviting users onto your DAM
Roles - viewing available roles and creating custom roles for your DAM

Users

This section oversees the management of all users with access to Scaleflex DAM

Invite new users

The Invite Users modal allows you to send single or bulk invitation emails. You can create users at the company level, granting access to all projects within the company or providing access to one or multiple projects at the project level.

User level

The DAM supports various user access levels, known as a user level.

The user levels Owner and Administrator are only available for company-wide users as they have access to company-related information such as Billing or Organisation

User level

Available menu

The User Level determines which DAM menu items are visible to a user. It does not affect the folders and assets a user can view or the permissions assigned to them.

These accesses are controlled via the gallery role assigned via the Manage access modal.

Custom levels

In addition to the standard levels mentioned above, VXP administrators can create up to 5 custom levels and define which pages and menus will be available for each.

Custom company levels are only available for company-wide users as they can have access to company-related information such as Billing or Company

Custom project levels are available for company-level and project-level users (they don't have access to company-related information)

User invitation flow

Users can only invite lower-level users, except project-level VXP Managers, who can also invite VXP Managers.

Individually or in bulk, new users can be added via the + Invite Users button. The following fields are needed to invite a user:

Email address
User level (see above)
Access scope:
- Entire company
- Project(s): select projects the user should have access to

Once validated, an email invitation is sent to the user's email address.

Managing existing users

A user can only manage lower-level users, e.g. a VXP Viewer cannot manage a VXP Manager.

The following attributes are available for editing:

User level
Active or inactive status
Access scope

It is also possible to create custom user attributes fields on top of the existing system fields (email, name..)

Roles

The Roles page displays all current Roles and their permissions within Scaleflex DAM.

This page allows you to view all roles within the DAM and the permissions for each role.

Creating Custom Roles

You can click on + Add level to create custom levels. Custom levels can be created at the company or project levels. You can name the role as you wish and select which permissions are acceptable within the role.

Company-level roles exist within all projects within the organization, whereas a project-level role only pertains to the project in which the role was created.

Up to five custom roles can be created.

Teams

Scaleflex DAM allows you to group users in teams for easier role and permission management.

Create a new Team

To create a new team, you can use the + Add Team button.

Give your team a meaningful name, add a description, and upload an avatar.

Manage a Team

After a Team is created, you can find it in the list of existing teams. Click the ... icon at the most-right part of the screen and choose "Manage".

Now, you can add team members from the list of existing users in your current project. If the user hasn’t been invited to the project, or their invitation is pending, they cannot be added to a team.

You can select and delete team members, which removes them from the Team, but their account will remain active in the project.

Edit a Team's description

If you select option "Edit" from the ... menu, you can rename the Team, modify its Avatar and Description.

Delete a Team

Choosing option "Delete" from the ... menu allows you to delete a team. The users who were part of this team will remain active in the current project.

Project

The Project section under Settings is where you will find the options to include brand identity, view your subscription, and apply analytics, and manage your access.

You can jump to the following sections to learn more.

Branding
Subscription
Analytics
Access

Branding

Customize Scaleflex DAM's branding to match your brand preferences

Project Name

Use this section to name your project. The name will be displayed at the top right corner of the DAM.

This section allows you to customize the login page of your project

Logo

Theme

Subscription

This section summarizes the Subscription page seen in the Settings bar.

The Subscription page lets you view and manage your current Scaleflex DAM subscription.

In addition, you can view additional optional modules and services that Scaleflex provides.

Analytics

Enable standard dashboards to control usage and assets delivery.

Standard Dashboards

DAM Standard Dashboard

Dashboards visibility is managed in Settings -> Project->Analytics->Standard Dashboard

Introduction

The Standard Dashboards Configuration section allows users to enable or disable various pre-built dashboards that help monitor and manage key asset delivery and usage areas. These dashboards provide insights into different aspects of the system, including CDN performance, optimization, storage, and more.

Dashboard Name

Description

State

Purpose

Example Workflow

Enable or Disable Dashboards: Toggle switches are available for each dashboard.
- Enabled: The dashboard is active and providing insights.
- Disabled: The dashboard is inactive.

Multi tenants

DAM Multi Tenants Dashboard

Introduction

Purpose:

The Multi-Tenants Dashboard is designed to provide a comprehensive overview of traffic, image cache data and allowances for individual customers. This dashboard offers a granular view of customer usage per token. [insert screenshot ]

Filters

[insert screenshot ] Graphs

User Dashboard

DAM users

Introduction

Purpose:

The DAM Users Dashboard is designed to provide a comprehensive overview of user activity within the VXP (Visual Experience Platform). This dashboard offers valuable insights into user engagement, team dynamics, and overall system usage.

Graphs

Custom Dashboard

DAM User Can request Custom Dashboard

The Custom Dashboard is managed in Settings -> Project->Analytics->Custom Dashboard Menu.

Introduction

Purpose:

The Custom Dashboard Creation page allows users to enable custom dashboards to gain insights about their assets. The interface offers input fields for creating a new dashboard, which includes providing specific identifiers and a quick seal.

Features

Add Dashboard Button: Users can add a new dashboard by clicking the "+ Add dashboard" button, which reveals input fields for configuration.
Dashboard Input Fields: Users must complete four key fields to create a dashboard successfully:
- Dashboard Name: The display name of the dashboard.
- Page Identifier: A unique identifier for the dashboard page.
- Dashboard Identifier: A unique ID for the dashboard itself.
- Quick Seal: A quick-access identifier for the dashboard.
Save and Cancel: Users can save the dashboard or cancel the creation process using the respective buttons after filling in the fields.

Access

You will find the "access" page by going to Settings > Project > Access (page). From here, you will be able to manage access to your project, through API keys, custom security templates or OAuth2.

API keys

Manage API keys for headless applications

API keys allow to call of the Scaleflex DAM file management API and are suited for backend or headless applications where no user context is needed and where the key is not exposed to the browser

Create new API keys

Authentication against the Scaleflex API is done with an API Secret Key, available under Settings > Project > Access (page) > API keys (tab).

New API keys can be created with the +Add key button. On click, the user will be requested to:

Enter the API key description so it can be easily identified
Select the permissions to be attached with the API key (multi-selection from the permissions list) -- these define what the user will be able to do with the assets

Permissions

API Permission

Description

Manage Existing API Keys

Existing API keys can be managed individually or in bulk for status (Active <> Deactivate). The following settings can be edited:

Security templates

Security templates are used to generate API access keys (temporary keys with configurable permissions & restrictions)

The Security Templates are accessible from Settings > Project > Access (page) > Security template (tab).

Create a security template

Security Templates can be created with the +Add Template button by entering the following informations

Description

Used to identify the security template

Permissions

Used to define what users can / can't do with the assets. Permissions are selected from the list:

API Permission

Description

Upload limits

These settings set limits on the Upload API.

Restrict IP limitation

It restricts API calls based on IP address ranges and/or countries.

Key Validity

This setting allows to set the validity period of the key, for example to match the user's session length in your authenticated application

Listing Limits

Directories where the key is allowed to list elements.

Manage existing Security templates

Existing API keys can be managed individually or in bulk for status (Active <> Deactivate):

OAuth2

OAuth2 allows external websites or applications to access resources hosted by Hub on behalf of a user.

OAuth2 authentication is a more secure and complex authentication method that allows users to grant limited access to their resources without exposing their credentials.

Only users with admin or owner levels (roles) have access to the OAuth2 page in Settings

Digital Asset Management (DAM)

Welcome

This documentation section is dedicated exclusively to Scaleflex DAM. You can access the DAM directly from the top left menu in your VXP hub, to the right of the "home" tab, you will see the "DAM" tab. Once you've clicked on it, you will find yourself within Scaleflex's Digital Asset Management portal.

Assets

DAM Assets Management

Upload assets

Upload assets in bulk from your local computer or various external sources.

Overview

The Uploader lets you upload assets in the DAM from a variety of sources:

Your device's storage, camera or screen
Web links
Third-party sources include Google Drive, Dropbox, Instagram, and many others.

You can drag & drop, copy & paste or browse to the file's location to select it for upload:

Transform assets during upload

You can transform your assets as part of the upload process.

Monitoring upload progress

Once you click the Upload button, a progress icon is shown on each asset, as well as an overall Progress bar underneath the Upload modal, showing the cumulative progress of all assets:

Upload results

There are three possible end states and relevant actions:

Asset Details window

View and manage your asset through the Asset Details window.

The Asset Details window allows you to peruse and edit all the information pertaining to the asset, modify the media (if it's in a supported format), publish the asset and more.

All the information about the asset is organised in vertical tabs:

All the available actions are at the top:

Asset actions

You can perform the following actions from the Asset Details window:

Regional settings

Regional settings allow you to view the asset information for a particular region / locale - whether it be language, currency or anything else that is configured in the Metadata settings.

If Metadata Variants are configured for your project, you can view the asset according to a selected locale - including language, currency or anything else that is configured.

For example, if a project uses English and French metadata or tags in each language, you can use this setting to view the information corresponding to the selected language.

Add to My favorites (heart icon)

Save assets to My favorites for quick access later.

Click the heart icon in the top menu of the asset window to add an asset to your personal list.

My Favorites are unique to each user and are not shared with the entire company. This helps you keep track of assets that are important to you.

Edit media (image, video, etc)

Leverage the Scaleflex Media Editors to edit images, videos and more directly in the browser

In Scaleflex DAM you can manipulate your media files to get them just right for your needs.

Browse the relevant media subpage to learn more:

Sylius

DAM Sylius plugin

Installation

Prerequisites

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 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 %}

Akeneo PIM App

DAM Akeneo connector app

The DAM Akeneo app offers the following features:

One DAM token supports only one Akeneo EE Instance. One Akeneo EE Instance however can use multiples DAM tokens

Metadata sync locales and code of metadata need to match.

Asset Manager
- Medialink Type only: Link Sync
Akeneo Entity Reference
- Image Type: Binary sync
- Text type: Link sync
Size setting
- Support at family level (Asset Manager), Entity level (Entity Reference) for specific Scope and Locale
Metadata sync to Attribute
- Support Global
- Support value per locale

Installation

Prerequisites

You need an active DAM account. if you don't already have one;
Your Akeneo plan needs to be Enterprise Edition.

Step 1. Install, activate and connect

After login to Akeneo, navigate to Connect / App Store and Find the DAM by Scaleflex App
Then click Connect: You will be redirected to the Asset Hub and will be able to choose which token you want to use for your Akeneo EE instance
- Each Token can be used for only one Akeneo EE Instance
- Multiple Akeneo instance can use the same Token
After selecting your token and clicking Active, you will be redirected back to Akeneo

Then please Confirm that you give App access to the Akeneo EE instance

After confirmation, you will be redirected back to DAM

Choose to go to Setting
View the Asset Library

Step 2. Configure

1. General Settings

General settings:
- Enable / Disable: If disabled, you cannot use Akeneo Sync feature on DAM
- Default size: Default image size will be used if there are no configs related to each asset
- Default function: Crop or Fit
- Please click Apply change to update configuration
After updating the settings, please refresh the DAM browser page
Size settings: please see the size section below
Sync all setting / Best fit for newcomers

2. Size Settings

How does it work?

Can be duplicated
Priority: Bottom to Top, and it will apply the first matching setting only
Example: An Asset with these information:
- Scope: commerce / Locale: en_US / Family: filerobotmedia
- Will try to match setting following the steps bellow:
  - First try: Type: Asset / Family: filerobotmedia / Scope: commerce / Locale: en_US
  - Second try: Type: Asset / Family: All Items / Scope: commerce / Locale: en_US
  - Third try: Type: Global / Scope: commerce / Locale: en_US
  - Use default setting

Add new

(1) To add new size setting click Add new size on the top right

Explanation

(1) Type - currently the app supports 3 types

Global: Affects all assets including entity and asset
Asset: Asset Family
Entity: Entity Reference

(2) If we choose Asset or Entity, we can also choose which attribute family(asset manager) or entity(entity reference) will be applied this setting

We can also choose All Items to apply to all Family / Entity

(3) / (4) Scope and Locale

To choose locale you muse choose a scope first / can choose No Scope
There are 4 cases which can happen:

(5) / (6) Function and Size
- Function: Crop and Fit
- Size of asset to be resized
- Must follow format: width x height, example: 300x400

Edit / Delete

(1) Click on Edit on each setting

Same as Add new
You can delete by clicking the Delete button on the opened Modal

Usage

Synchronize assets

Synchronize Media

(1) On each Asset / Click Detail

(2) You can choose which type to sync

Entity: Entity reference
Asset: Asset Manager

(3) On Sync Asset Tab

Choose Family or Entity
Choose attribute(For Entity support two types: Text(Link sync) and Image(Binary Sync)
There are 4 cases that can happen:
- Value per channel and value per locale are both false: Can sync without choose scopes or locales
- Value per locale is true, value per channel is false: Must choose at least one locale
- Value per locale is false, value per channel is true: Must choose at least one scope
- Value per channel and value per locale are both true: Must choose at least one scope and locale
Entity Code(Entity Ref): Code -> You can search for old code, or create new one.

(4) To check sync history, Click Sync Logs

(5) You can see which locales and scopes were synced by clicking View on each item

Synchronize metadata

Only support attribute with following settings:
- Value per locale: true / Value per channel: false
- Value per locale: false / Value per channel: false
Configuration step:

(1) Go to store config

(2) In Regional variants, Add new group

(3) Option setting

(3.1) Name of Group - Can be anything you want

(3.2) / (3.3) Code of Locale / Must match the setting in Akeneo / See picture bellow

Metadata setting
- (1) Click to manage, Metadata tab; you can add new Group then Add new field
- (2.1) API Value must match (3.1) Attribute code(in Entity / Asset Manager Family)
- If (3.2) is uncheck then (2.2) is None else (2.2) must specific a Regional variants group as we did above with Same setting as Akeneo locales
How to sync
- After configuration, everything is automatic for the mapping between two systems
- On each Asset detail(1) you can see Metadata tab(2), You can change value by locale or value only(if value per locale is false)(3) , then click Done(4) to save the value