LogoLogo
BlogHelp CenterPrivacyLoginRegister
  • Let's optimize your images
  • Transformations
    • Input formats
    • Image operations
      • Width and height
      • Prevent enlargement
      • Crop
        • Automatic gravity crop
        • Positionable crop
        • Focal point crop
        • Face crop
        • Face hide
        • Aspect ratio crop
      • Fit
      • Cropfit
      • Bound
      • Boundmin
      • Cover
      • Device pixel ratio
      • Flip
      • Rotate
      • Trim
      • Rounded corners
      • Background removal
    • Image filters
      • Adjustment
        • Brightness
        • Contrast
        • Saturate
      • Color manipulation
        • Color overlay
        • Grayscale
        • Duotone
        • Sepia
        • Invert
      • Blur
      • Pixelate
      • Sharpen
      • Face blur
    • Image watermarking
      • Static watermark
      • Dynamic watermark
      • Text watermark
        • Text watermark fonts
    • Image compression
      • Image formats
      • Optipress
      • SVG compression
      • Color management
    • Static content
      • PDF to image
      • JS/CSS optimization
    • Video operations
  • Setup
    • Shortening URLs
      • Origin URL prefix
      • Aliases
      • Presets
      • Rules
    • Connecting storage bucket
      • Amazon S3
      • Google Cloud Storage
      • Microsoft Azure Blob
      • Basic authentication HTTP
    • Security
      • Token security
        • Domain whitelisting
        • URL signature
        • URL sealing
      • Account security
      • Origin security
  • Implementation
    • URL API implementation
    • Responsive images JS plugin
    • CMS plugins
      • Spryker
      • Drupal
      • Kontent.ai
      • Contentful
      • Adobe Commerce (Magento)
        • Basic implementation
        • Advanced implementation
      • Opencart
      • Prestashop
        • Prestashop tutorial
      • Shopware
      • Sylius
      • Wordpress
      • Shopify tutorial
        • Shopify integration
        • Theme files
        • FAQ
      • Commercetools tutorial
      • Ruby wrapper
    • Migrating from another image CDN
  • Caching and acceleration
    • CDN basics
    • Caching interval
    • Invalidation API
    • Warmup API
  • Analytics
    • Dashboards
      • Overview
      • Volumetry
      • Optimization
      • Delivery
      • Top-Ranking
      • RUM
      • Logs API
  • Cloudimage_v6 EOL
Powered by GitBook
LogoLogo

Resources

  • Help center
  • Contact support
  • Developers
  • cloudimage.io

Solutions

  • Media optimization
  • DAM
  • Performance report

Company

  • Blog
  • Service status
  • About us

Legal stuff

  • Terms & conditions
  • Privacy center
  • DMCA

Copyright © 2023 Scaleflex

On this page
  • Prerequisites
  • Step 1. Install the Cloudimage module
  • Step 2. Activate the Cloudimage module
  • Step 3. Configure the module
  • Advanced settings (optional)
  • Custom themes (optional)

Was this helpful?

Export as PDF
  1. Implementation
  2. CMS plugins
  3. Adobe Commerce (Magento)

Advanced implementation

Cloudimage Content Transformation & Acceleration in Magento

PreviousBasic implementationNextOpencart

Last updated 7 months ago

Was this helpful?

Prerequisites

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

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

option
description

Use origin URL

If enabled, the module will only add query parameters to the image source URL without prefixing it with {token}.cloudimg.io. This is required if you use a dedicated subdomain for delivering your images (media) in Magento. You will need to enable a custom CNAME in Cloudimage.

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 loading times and user experience.

Advanced settings (optional)

option
description

Inject Custom JS function

If enabled, you will be able to customize the JS function used to get the DOM information dynamically.

Custom JS function

The JS function to customize Cloudimage library.

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.

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 in order to get the custom JS function to address issues with your specific template.

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

contact us
Manual integration in Magento templates
Cloudimage registration page