Sylius
Cloudimage Sylius Plugin
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.
To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.
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:
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
# 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
nonebin/console doctrine:migration:diff
bin/console doctrine:migration:migrate
Include
{{ include('@ScaleflexSyliusCloudimagePlugin/Admin/Channel/extendedChannelForm.html.twig') }}
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
# 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'
To process your image through Cloudimage you have two ways to implement
- Option 1: Use the
ci_src(path)Twig Function
#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
srctoci-src="{path}?q={sylius.channel.cloudimageImageQuality}" - Add the script
{% if sylius.channel.cloudimageStatus and sylius.channel.cloudimageToken %}
<script>
window.ciResponsive.process();
</script>
{% endif %}
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 | If enabled, images will be lazy-loaded for better initial loading times and user experience.
⚠️ 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). |
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 | 🚨 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.
For advanced users only, please refer to the Cloudimage documentation here for the list of possible parameters. |
When Javascript Mode is active, make sure that no other module is overwriting the plugin's delivery with "ci-src" image source.
Last modified 1mo ago