# Sylius

The Cloudimage Sylius Plugin will automatically adapt the image URLs in your Sylius site to deliver your images rocket fast over the Cloudimage multi-CDN infrastructure. You only need to register with Cloudimage and install the plugin in your Sylius Admin.

## Installation <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

### Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

To use the plugin, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/3HSu1DzpLwYNpbuJAM33/image.png" alt=""><figcaption></figcaption></figure>

### Step 1. Install and setup the plugin <a href="#od_9c6ab473" id="od_9c6ab473"></a>

Open a command console on your Sylius hosting server, enter your project directory and execute the following command to download the latest stable version of this bundle:

```none
composer require scaleflex/sylius-cloudimage-plugin
```

Then, enable the plugin by adding it to the list of registered plugins/bundles in config/bundles.php file of your project

```php
<?php
# config/bundles.php
return [
    // ...
    Scaleflex\SyliusCloudimagePlugin\ScaleflexSyliusCloudimagePlugin::class => ['all' => true],
];
```

**Update Channel Model**\
Your Entity Channel has to implement **\Scaleflex\SyliusCloudimagePlugin\Model\ExtendedChannelInterface**

You can use Trait **\Scaleflex\SyliusCloudimagePlugin\Model\ExtendedChannelTrait**

Update Database Schema

```none
nonebin/console doctrine:migration:diff
bin/console doctrine:migration:migrate
```

Include&#x20;

{% code overflow="wrap" %}

```twig
{{ include('@ScaleflexSyliusCloudimagePlugin/Admin/Channel/extendedChannelForm.html.twig') }} 
```

{% endcode %}

in your **templates/bundles/SyliusAdminBundle\Channel\_form.html.twig** form.

Then you can start to personalize the configuration (token, options) in Admin / Channel -> Choose one Channel

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/UkXf96RNxbcRW5ID9Et9/s2.png" alt=""><figcaption></figcaption></figure>

#### **Add script to Shop by Event**

```markup
# config/packages/sylius_ui.yaml
sylius_ui:
  events:
    sylius.shop.layout.head:
      blocks:
        cloudimage_script: '@ScaleflexSyliusCloudimagePlugin\Shop\cloudimageScript.html.twig'
    sylius.shop.layout.after_body:
      blocks:
        cloudimage_process: '@ScaleflexSyliusCloudimagePlugin\Shop\cloudimageProcess.html.twig'
```

#### **Development**

To process your image through Cloudimage you have two ways to implement

* Option 1: Use the `ci_src(path)` Twig Function

```php
#templates/bundles/SyliusShopBundle/Product/_mainImage.html.twig
{% if product.imagesByType('thumbnail') is not empty %}
  {% set path = product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
  {% elseif product.images.first %}
  {% set path = product.images.first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
  {% else %}
  {% set path = '//placehold.it/200x200' %}
  {% endif %}
  <img {{ ci_src(path) }} {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}" class="ui bordered image" />
```

* Option 2: Define your own
  * Update the image `src` to `ci-src="{path}?q={sylius.channel.cloudimageImageQuality}"`
  * Add the script

```php
{% if sylius.channel.cloudimageStatus and sylius.channel.cloudimageToken %}
      <script>
          window.ciResponsive.process();
      </script>
  {% endif %}
```

### Step 2. Configure the module <a href="#od_d0435609" id="od_d0435609"></a>

Here are the available configuration options:

| Option                  | descriptions                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Activation              | Enable/Disable the plugin                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| Token                   | Token from Cloudimage (found in your admin panel)                                                                                                                                                                                                                                                                                                                                                                                                              |
| Use origin URL          | If enabled, the module will only add query parameters to the image source URL without prefixing it with {token}.cloudimg.io : might be useful to avoid double CDNization, for exemple if you have aliases configured                                                                                                                                                                                                                                           |
| Ignore Image Size Node  | Useful for improving compatibility with some themes.                                                                                                                                                                                                                                                                                                                                                                                                           |
| Ignore Image Size Style | Useful for improving compatibility with some themes.                                                                                                                                                                                                                                                                                                                                                                                                           |
| Lazy Loading            | <p>If enabled, images will be lazy-loaded for better initial loading times and user experience.<br>⚠️ lazy loading can have variable results on some websites as for the first rows of images loaded, therefore it is recommended to make use of an integrated new class provided: “lazy-off”. You can specify the "lazy-off" class either in the page builder through the back-office, or in the templates directly (eg. category page and product page).</p> |
| Custom js function      | 🚨 Any js function to customize the behavior of the Cloudimage library. Attention, adding js should only be done by *advanced administrators* as it can break the js or have unintended effects if not thoroughly tested and validated.                                                                                                                                                                                                                        |
| Image Quality           | Customizes image quality, therefore compression -influences the size of image-.applied by default. Warning, a setting under 80 might have a potentially visible impact.                                                                                                                                                                                                                                                                                        |
| Ignore SVG images       | If enabled, all SVG images will be skipped from acceleration as anyway vector images will not be compressed.                                                                                                                                                                                                                                                                                                                                                   |
| Maximum "Pixel ratio"   | List of supported device pixel ratios, default is 2, eg: 2 for Retina devices                                                                                                                                                                                                                                                                                                                                                                                  |
| Custom Library Options  | <p>🚨 Those optional parameters will be added to the request for each URL going through the Cloudimage acceleration infrastructure. It can allow you to force image formats, apply automatic transformations or watermarking, and might be used for troubleshooting purposes.<br>For advanced users only, please refer to the Cloudimage documentation <a href="https://docs.cloudimage.io/">here</a> for the list of possible parameters.</p>                 |

*When Javascript Mode is active, make sure that no other module is overwriting the plugin's delivery with "ci-src" image source.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloudimage.io/implementation/cms-plugins/sylius.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.