Cloudimage - Documentation

Edit theme files

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.

Backup your theme files. Before making changes in these files, it is recommended that you download and save them securely to be able to restore them later in case of error.

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

Example 1 ( 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:

{% 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">

FAQs related to the integration