# Advanced implementation

## 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/SIB4Tdq8xLyM2MsUTteB/image.png" alt=""><figcaption></figcaption></figure>

## Step 1. Install the Cloudimage module <a href="#od_664e879b" id="od_664e879b"></a>

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.

```none
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:

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

## Step 2. Activate the Cloudimage module <a href="#od_bf057e76" id="od_bf057e76"></a>

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

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

## Step 3. Configure the module <a href="#od_2c1e93b0" id="od_2c1e93b0"></a>

| 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) <a href="#od_870ebf0c" id="od_870ebf0c"></a>

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](https://www.cloudimage.io/en/contact-us) in order to get the custom JS function to address issues with your specific template.

| 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) <a href="#od_4b61b656" id="od_4b61b656"></a>

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](https://github.com/scaleflex/magento-cloudimage-responsive#3-manual-integration-in-magento-templates-magento-server-access-required) section in the Cloudimage plugin Github page.