Installation

Start up the Spryker shop and run:

composer require scaleflex/spryker-cloudimage

Configuration in the shop

To get the package running, register the "Scaleflex" namespace into the config_default.php in the KernelConstants::CORE_NAMESPACES

$config[KernelConstants::CORE_NAMESPACES] = [
    'Scaleflex',
    ...
];

Set these constants in the config, where it is needed. the BaseUrl and the ignoredUrlPaths need to be set according to the use case.

use Scaleflex\Shared\Cloudimage\CloudimageConstants;

$config[CloudimageConstants::TOKEN] = '{{YOUR_TOKEN}}';
$config[CloudimageConstants::BASE_URL] = 'http://yves.de.spryker.local';
$config[CloudimageConstants::IGNORED_URL_PATHS] = ['http://yves.de.spryker.local'];

Integration into the code

Register the Twig plugin in the Pyz\Yves\Twig\TwigDependencyProvider.php

/**
 * @return \Spryker\Shared\TwigExtension\Dependency\Plugin\TwigPluginInterface[]
 */
protected function getTwigPlugins(): array
{
    return [
        ...
        new CloudimageTwigPlugin(),
    ];
]

Example

Use the TwigFilter for the images. Here is an example of how to extend the Pyz\Yves\ShopUi\Theme\default\components\molecules\lazy-image.twig. Everywhere this molecule will use Cloudimage and apply a grey filter.

{% block body %}
    {% set data = data | merge({'imageSrc': data.imageSrc | cloudimage({}, {grey: 1}) }) %}
    ...
{% endblock %}

How to use the plugin

cloudimage({YOUR_OPERATIONS}, {YOUR_FILTERS})

Cloudimage documentation for the operations: https://docs.cloudimage.io/transformations/image-operations

Cloudimage documentation for the filters: https://docs.cloudimage.io/transformations/image-filters

Installation

You can install the Cloudimage module from Github or by using Packagist.

Download from Github

• Step 1: Download the latest version Download Latest release of the Module

• Step 2: Extract the zip file at location "/modules"

• Step 3: In Admin go to Extend -> find Cloudimage by Scaleflex -> Install

Installation with Packagist

• Step 1: Run "composer require 'drupal/cloudimage_by_scaleflex:^1.0'"

• Step 2: In Admin go to Extend -> find Cloudimage by Scaleflex -> Install

Configuration

• Activation: Enable/Disable the module

• Standard Mode: Replace image URLs not using any Javascript or Javascript library.

• Token or CNAME: Please enter your cloudimage token here (eg: abcdefgh), or your complete CNAME (eg. media.company.com) if the configuration is already validated in your Cloudimage Admin.

• Use origin URL: If enabled, the module will only add query parameters to the image source URL without prefixing it with {token}.cloudimg.io.

• Lazy Load: If enabled, only images close to the current viewpoint will be loaded.

• Ignore SVG Size: If enabled, the module will ignore the image size node in the SVG file.

• Image Size Attributes: Used to calculate width and height of images

• Prevent Image Upsize: If you set Maximum "Pixel ratio" equal to 2, but some of your assets does not have min retina size(at least 2560x960), please enable this to prevent image resized. By default, yes.

• Image Quality: The smaller the value, the more your image will be compressed. Careful — the quality of the image will decrease as well. By default, 90.

• Maximum Pixel Ratio: The maximum pixel ratio of the image. By default, 2.

• Remove V7: If enabled, the module will remove the "/v7" part in URL format. Activate for token created after October 20th 2021.

Advanced User's options

• Custom JS Function: The valid js function starting with { and finishing with }

• Custom Library Options: Modifies the library URL (to add transformations)

Installation

Prerequisites

You need to have a Kontent CMS setup. https://kontent.ai/

Step 1. Add custom element

Content model (left hand side) > Create new > Custom element (right hand side). You will then have the below view.

Hosted code URL: https://scaleflex.cloudimg.io/v7/plugins/cloudimage-kontent/cloudimage.html?func=proxy

Parameters are the information that Kontent-Cloudimage needs to accelerate your images. See below:

json{
    "token": "your_token",
    "baseURL": "your_base URL",
    "lazyLoading": true/false,
    "mgmtApiKey": "your Management API key",
}

note: "mgmtApiKey" is obtained from:

Step 2. Create new content with this Kontent-Cloudimage Custom Element

Content & asset (left hand side) > Create new > Chose type: Cloudimage. Chose add/remove some images, publish. You will then have the below view.

After publishing, it will look like below. The URLs are Cloudimage accelerated.

Step 3. Set up a preview

Here, you can find a tutorial on how to set up a preview: https://kontent.ai/learn/tutorials/develop-apps/build-strong-foundation/set-up-preview/

Go to Settings > API Keys. For this, you will definitely need your Project ID. You may also need your API Key (depends on what you want to do, but for simple things Project ID is enough).

Write a client app that utilizes the Delivery API

Recall that Kontent have 3 set of APIs that you can interact with

Delivery APIs in plain HTTPS form can be taken from https://kontent.ai/learn/tutorials/develop-apps/get-started/postman-collection/ , imported into POSTMAN

For the 3 content items that comes out of the box, Kontent already have an example client app, which we can imitate.

• This example app was made by using React JS https://github.com/Kentico/kontent-sample-app-react

• Hosted on Github Pages: https://kentico.github.io/kontent-sample-app-preview-react/{restof the URL}

After writing and hosting your client app, go to Settings > Preview URLs and define your Preview URL formats.

See how Kontent defined their preview URLS for their example app

Codename, URLSlug & ItemId are obtained as follows:

Once you done all the above, you can preview by clicking Preview

Support

• https://kontent.ai/community/ or https://kontent.ai/discord

• https://scaleflex.zendesk.com/hc/en-gb/requests/new or hello@scaleflex.com

Installation

Prerequisites

You need to have a Contentful account. Contentful is 100% Cloud Native, so you have to sign up for a hosted CMS at https://be.contentful.com

You’ll get :

https://app.contentful.com/spaces/{Your Space ID}/home

Step 1. Install from Contentful Marketplace

Find it here https://www.contentful.com/marketplace/ and install it.

Or click "Install now" on https://www.contentful.com/marketplace/app/scaleflex-cloudimage/

Step 2. Configure App

Then save and install.

Step 3. Create Content Type

Absolutely important: The Field ID must be "cloudimage".

By doing the above, you will associate the Cloudimage field (the field that you named Cloudimage) to the Cloudimage App. Recall the warning message you saw during the app configuration stage "There are no content types with ..."? By doing the above, that will no longer be an issue.

Usage

Now you can create a content item of Cloudimage type.

You can add and remove images.

Cloudimage will optimize those images in the background. (If you inspect in developer console, you will see the call to its infrastructure)

Cloudimage can be implemented to accelerate Magento shops in 2 modes:

This simple and fast implementation in Magento 2 enables JPEG optimization, WebP compression and CDN delivery of your images.

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Login to Magento

First, you need to log in to your Magento 2 website admin

Step 2. Configure the plugin

On the Admin sidebar, go to Stores > Settings > Configuration.

Navigate to the settings page - from the left panel, in the General group, choose Web.

Then, you need to set up the Base URLs.

It is important to set this prefix in both - Base URL for User Media Files and Secure Base URL for User Media Files.

In Base URL for User Media Files in Base URLs and Base URLs (Secure) add the following value, replacing your token: https://<token>.cloudimg.io/{{secure_base_url}}pub/media/

For example, if your website is https://sfxmagento.site, and your token is demo, the final URL address should be: https://demo.cloudimg.io/https://sfxmagento.site/pub/media/

You can also use your own domain instead of {token}.cloudmg.io via CNAME records. Please contact us and an engineer will help setting it up.

When complete, do not forget to click Save Config.

Step 3. Flush the cache of Magento

On the Admin sidebar, go to System > Tools > Cache Management and Flush the cache of Magento.

Magento’s cache management system is an easy way to improve the performance of your site. Whenever a cache needs to be refreshed, a notice appears at the top of the workspace to guide you through the process. Find additional information and tips in this Magento tutorial for cache management.

Verify your HTML page source

Please ensure that you are properly delivering static content via the CDN.

You can now modify your template to resize your images with us.

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Install the Cloudimage module

To be able to install the module by Composer, you need to get a copy of the module on the Magento Marketplace, or directly from Github.

composer config repositories.cloudimage vcs https://github.com/scaleflex/magento-cloudimage-responsive
composer require cloudimage/module-responsive-plugin --sort-packages

Enable and install module in Magento:

php bin/magento module:enable Cloudimage_Responsive
php bin/magento setup:upgrade

Step 2. Activate the Cloudimage module

Activate the module and enter your Cloudimage token in the module configuration in Magento admin interface: Stores / Configuration / Cloudimage by Scaleflex / Cloudimage Responsive:

Step 3. Configure the module

Advanced settings (optional)

This setting is for advanced users only and allows to inject a custom JS function into the Magento templates in order to support some specific Magento templates. Feel free to contact us in order to get the custom JS function to address issues with your specific template.

Custom themes (optional)

Once activated, the Cloudimage Responsive module will replace your template's classic image tag elements on-the-fly. This functionality is 100% compatible with the Magento Luma theme.

In the case of a personalized template, please consult the Manual integration in Magento templates section in the Cloudimage plugin Github page.

The Cloudimage Opencart Plugin will automatically adapt the image URLs in your Opencart 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 Opencart Admin.

Installation

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Download the plugin

To get the plugin, you need to open Opencart Extension Marketplace.

Then, search for "Cloudimage" in the search bar.

Select the Cloudimage by Scaleflex plugin and click on Download. The Download button will be available on the right side. This will download the .zip file.

Step 2. Install the plugin in Opencart

First, you need to log in to your Opencart Admin:

Then, navigate to Extension->Installer.

Click on "Upload" and upload the .zip file that you downloaded in the previous step:

Step 3. Activate the module

Navigate to Extensions->Modifications and select refresh in the Modification panel. Refresh button will be available on the top right corner as shown below:

Navigate to Extensions->Extensions->Modules.

Select Cloudimage from the list of modules and click on Edit.

Enable the plugin and enter Cloudimage Token or CNAME

You need to enter your Cloudimage account token which you have received upon account creation (step 1).If you need a CNAME please contact our sales team.

After you enter your token and save the changes, the plugin will start to deliver your images via Cloudimage.

Configure

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

The Cloudimage Prestashop Module will automatically adapt the image URLs in your Prestashop Theme 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 Prestashop Admin.

Installation

Prerequisites

First, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Install the module

Manual installation - download and unzip the module

• Download the latest version Download Latest release of Module

• Unzip the file and change the folder name to "cloudimage"

• Zip the file with the name "cloudimage.zip"

• In Admin go to Modules/Module Manager -> Upload the Zipped file

Automated installation - find the module in the marketplace

• In Admin go to Modules/Module Catalog search for "Clouldimage by Scaleflex"

• Click "Install"

Step 2. Configure the module

• Go to Modules/Module Manager -> Other Section -> Click on Configure on "Cloudimage by Scaleflex"

• Update configuration and activate the Module, then your site is ready to go. (Please clear the Cache)

Configuration

• Activation: Enable/Disable the module

• Cloudimage API Key: Your Cloudimage Token

• Prerender: If enabled, the plugin will disable JS Responsive and Change URL to {token}.cloudimg.io/{origin_url}

• Auto Base URL Image: If enabled, Production with SSL only, The Plugin auto add base url to some missing Base URL Images

• Use origin URL: If enabled, the plugin will only add query parameters to the image source URL, avoiding double CDNization in some cases, like if you have aliases configured.

• Lazy Load: If enabled, only images close to the current viewpoint will be loaded.

• Ignore SVG Size: If enabled, the module will ignore the image size node in the SVG file.

• Prevent Image Resize: If you set Maximum "Pixel ratio" equal to 2, but some of your assets does not have min retina size(at least 2560x960), please enable this to prevent image resized. By default, yes.

• Image Quality: The smaller the value, the more your image will be compressed. Careful — the quality of the image will decrease as well. By default, 90.

• Maximum Pixel Ratio: The maximum pixel ratio of the image. By default, 2.

• Remove V7: If enabled, the module will remove the "/v7" part in URL format. Activate for token created after October 20th 2021.

Advanced User

• Custom JS Function: The valid js function starting with { and finishing with }

• Custom Library Options: Modifies the library URL and must begin with the symbol &. Please read document before use.

Please note: if you are using an earlier version of Prestashop (v1.6.x or less) and / or this plugins is not compatible with some of your add-ons, it is always possible to make a manual integration of the Cloudimage acceleration, following the Prestashop tutorial.

This simple and fast implementation in Prestashop leverages JPEG optimisation, WebP compression and CDN delivery of your images. Contact us if you want to use Cloudimage at its full extend and also resize, watermark, transform and leverage responsive images on your Prestashop store.

Please note that to use your Cloudimage account with Prestashop, you need to use the Origin URL prefix function. This means that you will be able to use your Cloudimage token for delivering images only from your Prestashop site.

Installation

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 2. Configure the Cloudimage for use with Prestashop

There are two basic configuration steps:

1. First, you need to contact us at hello@cloudimage.io and let us know that you would like to use your Cloudimage token with Prestashop. We will lock your account to the v7 API of Cloudimage. Note: This step is required only for tokens created before November 1, 2021.

2. Then, you need to set up the Origin URL prefix in your Cloudimage admin to your Prestashop domain. By doing this, your token will fetch images only from your Prestashop site.

Step 3. Log in to your Prestashop website admin

Step 4. On the Admin sidebar, go to Advanced Parameters > Performance.

Add in Media Server #1, the Cloudimage domain and click to Save.

Step 5. Clear the cache.

Verify your HTML page source

Please ensure that you are properly delivering static content via the CDN.

You can modify your template to resize your images with us

This simple and fast implementation in Prestashop leverages JPEG optimisation, WebP compression and CDN delivery of your images. Contact us if you want to use Cloudimage at its full extent and also resize, watermark, transform and leverage responsive images on your Prestashop store.

Installation

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Download and install the module

Installation from Github

• Step 1: Download the latest version Download Latest release of Module

• Step 2: Zip the file with the name "cloudimage.zip"

• Step 3: In Admin go to Extensions -> My extensions -> Upload extension

Or Installation from Store

• Step 1: In Admin go to Extensions -> Store -> Catalog and search for "Cloudimage by Scaleflex"

• Step 2: Click on extension and after that "Add extension"

• Step 3: Go to Extensions -> My extensions -> Cloudimage by Scaleflex -> Click on Configuration

• Step 4: Update configuration and activate the Module, then your site is ready to go.

Step 2. Configure the module

• Activation: Enable/Disable the module

• Standard Mode: Replace image URLs not using any Javascript or Javascript library.

• Token or CNAME: Please enter your cloudimage token here (eg: abcdefgh), or your complete CNAME (eg. media.company.com) if the configuration is already validated in your Cloudimage Admin.

• Use origin URL: If enabled, the module will only add query parameters to the image source URL without prefixing it with {token}.cloudimg.io.

• Lazy Load: If enabled, only images close to the current viewpoint will be loaded.

• Ignore SVG Size: If enabled, the module will ignore the image size node in the SVG file.

• Prevent Image Upsize: If you set Maximum "Pixel ratio" equal to 2, but some of your assets does not have min retina size(at least 2560x960), please enable this to prevent image resized. By default, yes.

• Image Quality: The smaller the value, the more your image will be compressed. Careful — the quality of the image will decrease as well. By default, 90.

• Maximum Pixel Ratio: The maximum pixel ratio of the image. By default, 2.

• Remove V7: If enabled, the module will remove the "/v7" part in URL format. Activate for token created after October 20th 2021.

Advanced User's options

• Custom JS Function: The valid js function starting with { and finishing with }

• Custom Library Options: Modifies the library URL (to add transformations)

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

Prerequisites

To use the plugin, you need to have a Cloudimage account. You can create one on the Cloudimage registration page.

Step 1. Install and setup the plugin

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

Add script to Shop by Event

# 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

#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

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

Step 2. Configure the module

Here are the available configuration options:

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

The Cloudimage Wordpress plugin will automatically adapt the image URLs in your Wordpress site to deliver your images rocket fast over Cloudimage. You only need to register with Cloudimage and install the plugin in your Wordpress site.

If you need to adjust the behaviour of the plugin, please see the Advanced Configuration settings.

Installation

Prerequisites

Create an account if you have not registered already. You can create an account on the Cloudimage registration page.

Step 1. Install the plugin

Log in to your Wordpress admin panel

In the Admin sidebar, navigate to Plugins / Add New

Search for "Cloudimage" in the search field and then install our plugin

Step 2. Activate the installed plugin

Configure the plugin

Navigate to the Cloudimage admin page

You need to enter your Cloudimage account token which you have received upon account creation (step 1).

Configration options

The v7 option

• Some tokens are associated with a v7 URL, while others are not.

• But not to worry, this plugin automatically checks and sets it for you, all within a few seconds.

• Eg: If you enter a v7 token into the text input field, then a few seconds later, the v7 dial will automatically turn itself on.

• Please be patient and wait for the “The v7 checking process …” message to disappear, before pressing the “SAVE ALL CHANGES“ button.

The JS Mode option

Without Cloudimage

Your image URL will be like this:

<img 
  class="alignnone size-medium wp-image-437" 
  src="http://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-201x300.jpeg" 
  alt="" 
  width="201" 
  height="300" 
  srcset="https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-201x300.jpeg 201w, 
          https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-600x894.jpeg 600w, 
          https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg 644w" 
  sizes="(max-width: 201px) 100vw, 201px"
>

With Cloudimage

<img 
  class="alignnone size-medium wp-image-440" 
  src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&amp;w=300&amp;h=300" 
  alt="" 
  width="300" 
  height="300" 
  srcset="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=150 150w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450 450w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=100 100w
  sizes="(max-width: 300px) 100vw, 300px"
>

• Notice that the URLs has been appended with https://token.cloudimg.io/ to ensure CDN delivery and optimization of images.

With Cloudimage and its JavaScript Mode turned on

<img 
  class="alignnone size-medium wp-image-440 ci-image ci-image-loaded lazyloaded" 
  ci-src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&amp;w=300&amp;h=300" 
  alt="" 
  data-srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound 1x, 
               https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&amp;org_if_sml=1&amp;func=bound 1.5x, 
               https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&amp;org_if_sml=1&amp;func=bound 2x" 
  data-src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound" 
  srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound 1x, 
          https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&amp;org_if_sml=1&amp;func=bound 1.5x, 
          https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&amp;org_if_sml=1&amp;func=bound 2x" 
  src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound"
>

With JS Mode turned on, Cloudimage will:

• the ci-src(https://github.com/scaleflex/js-cloudimage-responsive#step-3-implement-in-an-img-tag-or-use-it-as-a-background-image) attribute will be added into theimgelement, which will

  • generate data-srcset

  • set resize

  • lazy loading https://github.com/scaleflex/js-cloudimage-responsive#lazyloading

With JS Mode off and these srcsetstandard settings

theme-light<img 
  class="alignnone size-medium wp-image-440" 
  src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&amp;w=300&amp;h=300" 
  alt="" 
  width="300" 
  height="300" 
  srcset="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=150 150w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450 450w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=100 100w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=666 666w"
  sizes="(max-width: 300px) 100vw, 300px"
>

• Notice the 666 in the srcset

When to use JS Mode and when it’s better not used

The login option

With this turned on, Cloudimage will only take effect when the user is logged in

Localhost

Please note that Cloudimage will not take effect on localhosts

Advanced Configuration

Global

Disable image downsize filter

ON: disable WordPress’s default image-cropping functionality

Standard Mode

Enable srcset adding

If this is turned off, then “Srcset widths“ will have no effect.

srcset widths (px)

Add more sizes to srcset

Replaceable text

For example Cloudimage URL: token.cloudimg.io/mywebsite/wp-uploads/2020/image.png Replaceable text: wp-uploads/2020 Replacement text: upload

Then from frontend users will see the image URL as: token.cloudimg.io/mywebsite/upload/image.png

But we need to configure Aliases in Cloudimage admin and set up the alias upload with value wp-uploads/2020

Replacement text

(See above)

JavaScript mode

Skip classes

Exclude Cloudimage processing by class name

Skip files

Exclude Cloudimage processing by file type, eg “.gif“

Use WordPress filter method

OFF: use ob_buffer PHP function

ON: use the_content filter from WordPress.

Local JavaScript libraries

ON: use Cloudimage JS files from CDN

OFF: use Cloudimage JS files from plugin locally

Ignore image node size

Can become helpful to turn on when using non-standard WordPress themes. Especially for badly-made themes, to compensate for some adverse impact on images.

Save image node ratio

Enable Save Image Node Ratio to preserve the aspect ratio.

Turn on Ignore Image Node Size to bypass the incorrect width and height attributes.

Destroy node image size

Optionally, use Destroy Node Image Size if you want to completely remove size attributes from the image tags.

Detect image node css

Use Detect Image Node CSS if the theme's CSS is involved in setting these incorrect sizes.

Process only width

This setting ensures that only the width is considered for image processing, and the height is adjusted proportionally to maintain the aspect ratio.

Disable setTimeout checks

Better to turn this on when there are AJAX loaded images, so that the late-loaded images don’t miss out on Cloudimage processing

Cloudimage will accelerate your Shopify shop by compressing images and delivering them over CDN.

Step 1. Configure an origin HTTP-Storage in Cloudimage

After finding out your Shopify URL as shown below (i.e. https://cdn.shopify.com, https://cdn2.shopify.com or https://cdn.shopifycloud.com), you can create a HTTP-Storage in Cloudimage.

Create the Storage record in the Cloudimage admin as follows:

Step 2. Verify alias

Adding an HTTP-based Storage will make you create a Cloudimage Alias. After saving the storage in Step 1 above, verify that images are delivered correctly over your Cloudimage URL with the Alias:

Origin image URL on Shopify:

https://cdn.shopify.com/shopifycloud/brochure/assets/home/hero-stock-small-72c1242fc5bbf6cfe135968110e9c52435af1e389c0fd4fe68208d21427e21e0.jpg

Cloudimage URL with Alias:

https://{token}.cloudimg.io/_myshopify_/shopifycloud/brochure/assets/home/hero-stock-small-72c1242fc5bbf6cfe135968110e9c52435af1e389c0fd4fe68208d21427e21e0.jpg

Replace {token} with your Cloudimage token.

Unable to delivery images over your Cloudimage URL? Contact hello@cloudimage.io if you are not able to fetch the image as explained above. In such a situation, do not move to step 3 as this could break your website images.

Step 3. Create settings_schema.json

Proceed with making the changes in our Shopify settings and theme files to switch the image delivery to Cloudimage.

From your Shopify admin, click Online Store > Themes. Find the theme you want to edit, click the Actions button and then Edit code.

Under Config, click settings_schema.json and append the code below after the last section of this file:

{
  "name": "Cloudimage",
  "settings": [
    {
      "type": "paragraph",
      "content": "Check out Cloudimage's [Cloudimage and Shopify integration](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/shopify-tutorial) to learn more about this."
    },
    {
      "type": "checkbox",
      "id": "enableCloudimage",
      "label": "Enable Cloudimage"
    },
    {
      "type": "text",
      "id": "cloudImageToken",
      "label": "Cloudimage Token",
      "info": "The token of Cloudimage"
    },
    {
      "type": "text",
      "id": "cloudImageUrl",
      "label": "Cloudimage url endpoint",
      "info": "The url endpoint you set within Cloudimage. Example: //token.cloudimg.io/v7/_myshopify_"
    },
    {
      "type": "text",
      "id": "cloudimageShopifyCdnUrl",
      "label": "Shopify CDN domain",
      "default": "//cdn.shopify.com",
      "info": "Do not change this unless you have a proxy in place. Not sure? Leave it as is."
    }
  ]
}

Step 4. Create cloudimage.liquid and cloudimage-video-tag.liquid file

Create new files cloudimage.liquid and cloudimage-video-tag.liquid under the Snippets directory. Copy the code below into that file, and save it:

• cloudimage.liquid

{% capture CLOUDIMAGE %}
 {% if settings.enableCloudimage%}
   {% for i in (1..1) %}
     {% unless src or settings.cloudImageUrl != blank %}
       {{ src }}
       {% break %}
     {% endunless %}
     {% assign cdnUrls = settings.cloudimageShopifyCdnUrl | split: ',' %}
   {% if cdnUrls.size  == 0 %}
   {{ src }}
       {% break %}
   {% endif %}
     {% assign cdnUrl = cdnUrls[0] %}
     {% for temp in cdnUrls %}
       {% if src contains temp %}
         {% assign cdnUrl = temp %}
         {% break %}
       {% endif %}
     {% endfor %}
   {% assign cdnUrl = cdnUrl | strip %}
   {% unless src contains cdnUrl %}
       {{ src }}
       {% break %}
     {% endunless %}
   {% assign cloudImageUrl = settings.cloudImageUrl | strip %}
     {% assign tempCloudImageUrl = cloudImageUrl %}
     {% assign lastChar = cloudImageUrl | slice:-1 %}
     {% assign cloudImageUrlLength = cloudImageUrl | size %}
     {% assign newCloudImageUrl = cloudImageUrlLength | minus:1 %}
     {% if lastChar == "/" %}
       {% assign tempCloudImageUrl = cloudImageUrl | slice:0,newCloudImageUrl %}
     {% endif %}
   {% assign newSrc = src | strip | replace:cdnUrl,tempCloudImageUrl %}
   {{ newSrc | default:src }}
   {% endfor %}
 {% else %}
   {{ src }}
 {% endif %}
{% endcapture %}{{ CLOUDIMAGE | strip | replace:'  ' | strip_newlines }}

• cloudimage-video-tag.liquid

{% comment %}
    Renders video tag

    Accepts:
    - image_size: {String} Size of media
    - autoplay: {Boolean} Video autoplay
    - loop: {String} Video loop
    - controls: {Boolean} Video controls
    - url: {String} Video url
    - muted: {Boolean} Video muted

    Usage:
    {% render 'cloudimage-video-tag',
      image_size: image_size,
      autoplay: autoplay,
      loop: loop,
      controls: controls,
      url: url,
      muted: muted
    %}
{% endcomment %}

{% if settings.enableCloudimage%}
 {% for i in (1..1) %}
   {% unless url or settings.cloudImageUrl != blank %}
     {% assign newSrc = url %}
     {% break %}
   {% endunless %}
   {% assign cdnUrls = settings.cloudimageShopifyCdnUrl | split: ',' %}
   {% if cdnUrls.size  == 0 %}
     {% assign newSrc = url %}
     {% break %}
   {% endif %}
   {% assign cdnUrl = cdnUrls[0] %}
   {% for temp in cdnUrls %}
     {% if url contains temp %}
       {% assign cdnUrl = temp %}
       {% break %}
     {% endif %}
   {% endfor %}
 {% assign cdnUrl = cdnUrl | strip %}
 {% unless url contains cdnUrl %}
     {% assign newSrc = url %}
     {% break %}
   {% endunless %}
   {% assign cloudImageUrl = settings.cloudImageUrl | strip %}
   {% assign tempCloudImageUrl = cloudImageUrl %}
   {% assign lastChar = cloudImageUrl | slice:-1 %}
   {% assign cloudImageUrlLength = cloudImageUrl | size %}
   {% assign newCloudImageUrl = cloudImageUrlLength | minus:1 %}
   {% if lastChar == "/" %}
     {% assign tempCloudImageUrl = cloudImageUrl | slice:0,newCloudImageUrl %}
   {% endif %}
 {% assign newSrc = url | strip | replace:cdnUrl,tempCloudImageUrl | append: '&func=proxy' %}
 {% endfor %}
{% else %}
  {% assign newSrc = url %}
{% endif %}

{%- if controls -%}
  {% assign videoControls = 'controls="controls"' %}
{%- else -%}
  {% assign videoControls = "" %}
{%- endif -%}

{%- if autoplay -%}
  {% assign videoAutoplay = 'autoplay="autoplay"' %}
{%- else -%}
  {% assign videoAutoplay = "" %}
{%- endif -%}

{%- if muted -%}
  {% assign videoMuted = 'muted="muted"' %}
{%- else -%}
  {% assign videoMuted = "" %}
{%- endif -%}

<video playsinline="playsinline" {{ videoControls }} {{ videoAutoplay }} {{ videoMuted }}>
  <source src="{{ newSrc }}" type="video/mp4">
</video>

Step 5. Enable Cloudimage

Navigate to Online store > Themes > Customize theme. In the sidebar, under Theme Settings open Cloudimage and enable it. Fill out the below two fields:

• Cloudimage Token - It should be your Cloudimage Token

• Default URL endpoint - It should be //{token}.cloudimg.io/myshopify (where token is your Cloudimage token)

• Shopify CDN domain - Its value should be //cdn2.shopify.com, //cdn.shopify.com

• Hit the "Save" button.

Step 6. Edit your theme files

The final step of this tutorial is to adapt your theme files to start delivering your images over Cloudimage.

For more information, please see the Theme files and FAQ sections.

You need to adapt your individual theme files for the image URLs to be changed to Cloudimage URLs. Identify first which theme files are used by your shop and edit them one by one as detailled below.

Here are a couple of examples indicating the change that needs to be made in the theme files. You can follow similar steps to change all of your theme files. List of some files that need to be changed (files may vary between themes):

• featured-product.liquid

• product-template.liquid

• collection-grid-item.liquid

• Product-grid-item.liquid

• header.liquid

• video.liquid

As general what you need to do is:

• assign new variable inheriting the original theme image url

• replace the old image invocation with inclusion of cloudimage

Example 1

You can make the changes inside product-template.liquid.

Before:

<img id="{{ img_id }}"
                class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
                {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
                src="{{ image | img_url: '200x200' }}"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ image.alt | escape }}">

After:

Explained changes:
We assign new variables for every URL usage from the original theme file (visible above)
using 
{% assign meaningfull_name = the_entire_value_used_in_the_original_request %}

For example: src="{{ image | img_url: '200x200' }}"
we create new variable that equals the old src "image | img_url: '200x200'" 
{% assign old_img_src = image | img_url: '200x200' %}

Now we replace the src="{{ image | img_url: '200x200' }}" with src="{% include 'cloudimage' src:old_img_src %}"
Where wi replace the old value with {% include 'cloudimage' src:the_meaningful_name_we_assign_before_that %}-

This way we get the chance to switch between the original image path and the optimised one by using the implemented Cloudimage enable/disable option
Now we need to perform this change in all files that deliver image URLs being src, data-src, background-image, zoom-image

{% assign old_img_src = image | img_url: '200x200' %}
{% assign old_img_data_src = img_url %}
{% assign old_img_data_zoom = image | img_url: '1024x1024' %}

        <img id="{{ img_id }}"
             class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
             {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{% include 'cloudimage' src:old_img_data_zoom %}"{% endif %}
             src="{% include 'cloudimage' src:old_img_src %}"
             data-src="{% include 'cloudimage' src:old_img_data_src %}"
             data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ image.alt | escape }}">

Example 2

Before:

<noscript>
 <img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</noscript>

After:

<noscript>
 {% assign old_img_url = featured_image | img_url: 'grande' %}
 <img src="{% include 'cloudimage' src:old_img_url %}" alt="{{ featured_image.alt | escape }}">
</noscript>

Example 3

Before:

<li class="grid__item {{ thumbnail_width }}">
 <a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
   <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
 </a>
</li>

After:

<li class="grid__item {{ thumbnail_width }}">
 {% assign old_img_grande = image.src | img_url: 'grande' %}
 {% assign old_img_compact = image.src | img_url: 'compact' %}
 <a href="{% include 'cloudimage' src:old_img_grande %}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
   <img src="{% include 'cloudimage' src:old_img_compact %}" alt="{{ image.alt | escape }}">
 </a>
</li>

Example 4

Before:

{% if section.settings.product_image_zoom_type == 'lightbox' %}
 <ul class="gallery hidden">
   {% for image in product.images %}
     <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '2048x2048' }}"></li>
   {% endfor %}
 </ul>

After:

{% if section.settings.product_image_zoom_type == 'lightbox' %}
  <ul class="gallery hidden">
    {% for image in product.images %}

    {% assign old_data-mfp-src = image | img_url: '2048x2048' %}
      <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{% include 'cloudimage' src:old_data-mfp-src %}"></li>
    {% endfor %}
  </ul>

Example 5 - with capture

If there is a tag inside image URL and you cannot simply assign it, use capture

Before:

<img width="{{ image.width }}" height="{{ image.height }}" src="{{ image | img_url: '50x50' }}" class="lazyload attachment-shop_single size-shop_single sp-post-image" alt="{{image.alt}}" title="{{product.title}}"
data-src="{{ img_url }}"
data-large_image="{%-include 'gl_image_format',cache:true, src: image.src, size: product_image_photowipe -%}" data-large_image_width="{{ image.width }}" data-large_image_height="{{ image.height }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto">

After:

{% assign old_img_src = image | img_url: '50x50' %}
{% assign old_img_data_src = img_url %}
{% capture old_img_data_large_image %}
{%-include 'gl_image_format',cache:true, src: image.src, size: product_image_photowipe -%}
{% endcapture %}
<img width="{{ image.width }}" height="{{ image.height }}" src="{% include 'cloudimage' src:old_img_src %}" class="lazyload attachment-shop_single size-shop_single sp-post-image" alt="{{image.alt}}" title="{{product.title}}"
data-src="{% include 'cloudimage' src:old_img_data_src %}"
data-large_image="{% include 'cloudimage' src:old_img_data_large_image %}" data-large_image_width="{{ image.width }}" data-large_image_height="{{ image.height }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto">

Example 6 - Video

Before:

{{ section.settings.video
  | video_tag:
    image_size: "1100x",
    autoplay: true,
    loop: section.settings.enable_video_looping,
    controls: true,
    muted: false
}}

After:

{% assign old_video_url = section.settings.video.sources.first.url %}
{% render 'cloudimage-video-tag', image_size: "1100x", autoplay: true, loop: loop, controls: true, url: old_video_url, muted: false %}

You can also take a look at the FAQ section.

Can I disable Cloudimage with a single click?

Yes you can enable and disable Cloudimage on your Shopify store with a single click. Navigate to Online store > Themes > Customize theme. In the sidebar, under general settings open Cloudimage.io and enable/disable it.

Can Cloudimage automatically detect the right image dimension and load it?

No Cloudimage only changes the base URL of your images because there is no way the server would have knowledge of your website layout. However, just by loading images through Cloudimage URL-endpoint, your images are automatically optimised for format and quality.

How do I make sure my integration is working?

Once you are done editing these files, save these files. Now refresh the webpage for your Shopify store and check the image URLs. They should now load from URLs beginning with https://{token}.cloudimg.io/v7. You can use the Chrome Developer Tools to check that all the images are being loaded via Cloudimage.io and that all images are loading correctly. If you find that images on a particular page or section are still being served from Shopify, then find out the responsible theme file and edit it as well.

The react-cloudimage-responsive library is a React component that allows you to easily add responsive images to your web application using the Cloudimage service. With this package, you can load and display optimized images that are automatically resized based on the device screen size and pixel density.

It is a simple and easy-to-use package that can help you improve the performance and user experience of your web application by optimizing it.

Installation

Prerequisites

You can create an account on the Cloudimage registration page.

Install the component

You can install react-cloudimage-responsive using npm or yarn:

npm install react-cloudimage-responsive

or

yarn add react-cloudimage-responsive

Usage

To use react-cloudimage-responsive, you need to provide it with a Cloudimage URL and some additional parameters. Here's an example:

import React from 'react';
import CloudimageResponsive from 'react-cloudimage-responsive';

const MyComponent = () => {
  const cloudimageConfig = {
    token: 'your-token',
    baseURL: 'https://your-subdomain.cloudimg.io/v7/',
    params: {
      resize: {
        width: 500,
        height: 500,
        type: 'fit',
      },
      quality: 90,
      format: 'webp',
    },
  };

  return (
    <CloudimageResponsive
      alt="My Image"
      image="https://example.com/my-image.jpg"
      cloudimageConfig={cloudimageConfig}
    />
  );
};

In this example, we're passing three props to the "CloudimageResponsive" component:

• alt: The alternate text to display for the image. This is required for accessibility reasons.

• image: The URL of the original image to be optimized and resized by Cloudimage.

• cloudimageConfig: An object that contains the Cloudimage configuration parameters. This includes your Cloudimage API token, the base URL of your Cloudimage service, and the resizing, quality, and format parameters for the image.

Configuration options

Here are the configuration parameters you can use in the "cloudimageConfig" object:

token

Type: String | Default: "demo" | required

Your Cloudimage customer token. Subscribe for a Cloudimage account to get one. The subscription takes less than a minute and is totally free.

customDomain

Type: String | Default: "cloudimage.io" | optional

If you use a custom CNAME for your cloudimage integration, you can set it here.

baseURL

Type: String | Default: "/" | optional

Your image folder on server, this alows to shorten your origin image URLs.

apiVersion

Type: String |Default: 'v7' | optional

Allow to use a specific version of API.

• set a specific version of API

const cloudimageConfig = {
  token: 'demo',
  baseURL: 'https://cdn.scaleflex.it/demo/',
  apiVersion: 'v7' // optional
};

• disable API version

const cloudimageConfig = {
  token: 'demo',
  baseURL: 'https://cdn.scaleflex.it/demo/',
  apiVersion: null // optional
};

Note: this will disregard your token above as this should be built into the CNAME entry.

doNotReplaceURL

Type: bool | Default: false

If set to true the plugin will only add query params to the given source of image.

lazyLoading

Type: Bool | Default: true | optional

Only images close to the client's viewport will be loaded, hence accelerating the page loading time. The plugin uses react-lazyload library to achieve it.

lazyLoadOffset

Type: Number/Array(Number) | Default: 100

Say if you want to preload a component even if it's 100px below the viewport (user have to scroll 100px more to see this component), you can set offset props to 100. On the other hand, if you want to delay loading a component even if it's top edge has already appeared at viewport, set offset to negative number.

Library supports horizontal lazy load out of the box. So when you provide this prop with number like 100 it will automatically set left edge offset to 100 and top edge to 100;

If you provide this prop with array like [100, 200], it will set left edge offset to 100 and top offset to 200.

params

Type: String | Default: 'org_if_sml=1' | optional

Applies default Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation... Multiple params can be applied, separated by "&" e.g. wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1

params: 'org_if_sml=1'

alternative syntax: type: Object

params: {
    org_if_sml: 1,
    grey: 1,
    ...
}

placeholderBackground

Type: String | Default: '#f4f4f4' | optional

Placeholder coloured background while the image is loading or use it to set your custom placeholder image or gif

For example:

placeholderBackground: "url('https:/
https://cdn.scaleflex.it/filerobot/red-loader.gif
') 50% 50% no-repeat"

lowQualityPreview

Type: Object

lowQualityPreview.minImgWidth number (default: 400) - minimum width of an image to load a low-quality preview image

lowQualityPreview: {
  minImgWidth = 400
}

presets

Type: Object

Default:

const cloudimageConfig = {
  token: 'demo',
  baseUrl: 'https://cdn.scaleflex.it/demo/',
  ...
  presets: {
      xs: '(max-width: 575px)', // up to 575    PHONE
      sm: '(min-width: 576px)', // 576 - 767    PHABLET
      md: '(min-width: 768px)', // 768 - 991    TABLET
      lg: '(min-width: 992px)', // 992 - 1199   SMALL_LAPTOP_SCREEN
      xl: '(min-width: 1200px)' // from 1200    USUALSCREEN
  }
};

Breakpoints shortcuts to use in image size property, can be overridden.

limitFactor

Type: Number | Default: 100 | optional

Rounds up the size of an image to the nearest limitFactor value.

For example:

• For an image with width 358px and limitFactor equal to 100, the plugin will round up to 400px.

• For an image with width 358px and limitFactor equal to 5, the plugin will round up to 360px.

devicePixelRatioList

Type: [Number,...] | Default: [1, 1.5, 2] | optional

List of supported device pixel ratios. If there is no need to support retina devices, you should set an empty array devicePixelRatioList: [].

delay

Type: Number | optional

Delay for processing an image after rendering component.

NOTE: Normally, the parameter is not needed but in some cases with integrating third-party libraries, it can fix wrong calculation of image container.

ImageSizeAttributes

Type: String | possible values: 'use', 'ignore', 'take-ratio' | Default: 'use'

If width and height attributes are set:

use - width & height attributes values will be used to calculate image size (according to user's DPR) and ratio.

take-ratio - width & height attributes values will be used only to calculate ratio.

ignore - width & height attributes will be ignored.

If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)

Note: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute

Properties

Here are the properties you can use with the "CloudimageResponsive" component:

• alt: The alternate text to display for the image. This is required for accessibility reasons.

• image: The URL of the original image to be optimized and resized by Cloudimage.

• cloudimageConfig: An object that contains the Cloudimage configuration parameters.

• className: An optional class name to apply to the image container.

• style: An optional object that contains CSS styles to apply to the image container.

The Ruby wrapper allows you to seamlessly interface with the Cloudimage API.

Installation

Add this line to your application's Gemfile:

gem 'cloudimage'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install cloudimage

Usage

The only requirement to get started is your customer token. You can find it within your Admin interface.

In order to interact with Cloudimage, we'll first initialize a client service object:

client = Cloudimage::Client.new(token: 'mysecrettoken')

The Cloudimage client accepts the following options:

The calling path on the client object returns an instance of Cloudimage::URI. It accepts the path to the image as a string and we we will use it to build Cloudimage URLs.

uri = client.path('/assets/image.png')

Here are some common approaches for constructing Cloudimage URLs using this gem:

Hash of params

Pass a hash to to_url. Every key becomes a param in the final Cloudimage URL so this gives you the freedom to pass arbitrary params if need be.

uri.to_url(w: 200, h: 400, sharp: 1, gravity: 'west', ci_info: 1)
# => "https://mysecrettoken.cloudimg.io/assets/image.png?ci_info=1&gravity=west&h=400&sharp=1&w=200"

Chainable helpers

Every param supported by Cloudimage can be used as a helper method.

uri.w(200).h(400).gravity('west').to_url
# => "https://mysecrettoken.cloudimg.io/assets/image.png?gravity=west&h=400&w=200"

While every key passed into the to_url method gets appended to the URL, chainable helper methods will throw a NoMethodError when using an unsupported method.

uri.height(200).to_url
# NoMethodError (undefined method `height' for #<Cloudimage::URI:0x00007fae461c42a0>)

This is useful for catching typos and identifying deprecated methods in case Cloudimage's API changes.

Method aliases

The gem comes with a handful of useful aliases. Consult the Cloudimage::Params module for their full list.

uri.debug.prevent_enlargement.to_url
# => "https://mysecrettoken.cloudimg.io/assets/image.png?ci_info=1&org_if_sml=1"

From the example above you can see that parameters that only serve as a flag don't need to accept arguments and will be translated into param=1 within the final URL.