Integração com Shopify

Entenda como integrar com a Shopify e veja um exemplo de uso.

Transformações inclusas:

Blur
Compress
Convert
Crop
Radius
Resize
Rotate

Configurações do Tema

Faça login na sua conta Shopify.
Navegue até Loja Online > Temas > Clique nos três pontos > Editar código.
Vá até a seção de configuração e edite o arquivo settings_schema.json. No arquivo settings_schema.json, você encontrará uma série de configurações.
No final deste arquivo, logo após o último caractere }, adicione uma vírgula, assim }, e inclua o seguinte código:

{
  "name": "Voidr Images",
  "settings": [
    {
      "type": "paragraph",
      "content": "For more information see the [docs](https://voidr-images.readme.io/reference/intro)"
    },
    {
      "type": "checkbox",
      "id": "voidr_enable",
      "label": "Enable Voidr Images",
      "info": "Toggle the Voidr Images feature"
    },
    {
      "type": "text",
      "id": "voidr_project",
      "label": "Voidr Project Name",
      "default": "my-project-name",
      "info": "Project name that you created on your Voidr Dashboard"
    }
  ]
}

Depois disso, na seção de trechos snippets, crie um arquivo chamado voidr.liquid e adicione o seguinte código:

{% capture image_url %}
    {% if settings.voidr_enable %}
      {% assign voidr_api_url = "https://img.voidr.co" %}
      {% assign src_without_domain = src | split: '//' %}
      {% assign base_url = voidr_api_url | append: '/' | append: settings.voidr_project %}
      {% assign params = '' %}

      {% if compress %}
        {% assign params = params | append: 'compress:' | append: compress %}

        {% assign params = params | append: '/' %}
      {% endif %}

      {% if convert %}
        {% assign params = params | append: 'convert:' | append: convert %}

        {% assign params = params | append: '/' %}
      {% endif %}

      {% if radius %}
        {% assign params = params | append: 'radius:' | append: radius %}

        {% assign params = params | append: '/' %}
      {% endif %}

      {% if blur %}
        {% assign params = params | append: 'blur:' | append: blur %}

        {% assign params = params | append: '/' %}
      {% endif %}

      {% if rotate %}
        {% assign params = params | append: 'rotate:' | append: rotate %}

        {% assign params = params | append: '/' %}
      {% endif %}

      {% if resize %}
        {% assign params = params | append: 'resize:' | append: resize %}

        {% if resizefit %}
          {% assign params = params | append: ',fit:' | append: resizefit %}
        {% endif %}

        {% assign params = params | append: '/' %}
      {% endif %}

      {% if crop %}
        {% assign params = params | append: 'crop:' | append: crop %}
        {% if cropopts %}
          {% assign params = params | append: ',position:' | append: cropopts %}
        {% endif %}

        {% assign params = params | append: '/' %}
      {% endif %}

      {% if params != '' %}
        {{ base_url }}/{{ params }}fetch/https://{{ src_without_domain }}
      {% else %}
        {{ base_url }}/fetch/https://{{ src_without_domain }}
      {% endif %}
    {% else %}
      {{ src }}
    {% endif %}
{% endcapture -%}
{{- image_url | strip }}

Vá para as configurações do seu tema em personalização e ative o Voidr Images helper.

Transformações

Blur

{% assign  product_url = image | img_url: 'master' %}

{%- capture voidr_image_url %}{% render 'voidr', src: product_url, blur: '20'  -%}{%- endcapture -%}

<img
  class="header__logo-image"
  src="{{ voidr_image_url | strip }}"
/>

Compress

{% assign  product_url = image | img_url: 'master' %}

{%- capture voidr_image_url %}{% render 'voidr', src: product_url, compress: '20'  -%}{%- endcapture -%}

<img
  class="header__logo-image"
  src="{{ voidr_image_url | strip }}"
/>

Convert

{% assign  product_url = image | img_url: 'master' %}

{%- capture voidr_image_url %}{% render 'voidr', src: product_url, convert: 'webp'  -%}{%- endcapture -%}

<img
  class="header__logo-image"
  src="{{ voidr_image_url | strip }}"
/>

Crop
cropopts é um parâmetro opcional

{% assign  product_url = image | img_url: 'master' %}

{%- capture voidr_image_url %}{% render 'voidr', src: product_url, crop: '20x20', cropopts: 'south'  -%}{%- endcapture -%}

<img
  class="header__logo-image"
  src="{{ voidr_image_url | strip }}"
/>

Radius

{% assign  product_url = image | img_url: 'master' %}

{%- capture voidr_image_url %}{% render 'voidr', src: product_url, radius: '50'  -%}{%- endcapture -%}

<img
  class="header__logo-image"
  src="{{ voidr_image_url | strip }}"
/>

Resize

resizefit é um parâmetro opcional

{% assign  product_url = image | img_url: 'master' %}

{%- capture voidr_image_url %}{% render 'voidr', src: product_url, resize: '20x20', resizefit: 'cover'  -%}{%- endcapture -%}

<img
  class="header__logo-image"
  src="{{ voidr_image_url | strip }}"
/>

Rotate

{% assign  product_url = image | img_url: 'master' %}

{%- capture voidr_image_url %}{% render 'voidr', src: product_url, rotate: '90'  -%}{%- endcapture -%}

<img
  class="header__logo-image"
  src="{{ voidr_image_url | strip }}"
/>

Exemplo de uso
Agora, para cada imagem em sua loja, adicione o seguinte código aos arquivos do seu tema:

{% assign  product_url = section.settings.logo | img_url: 'master' %}

{%- capture voidr_image_url %}{% render 'voidr', src: product_url, compress: '20' -%}{%- endcapture -%}

<img
  class="header__logo-image"
  src="{{ voidr_image_url | strip }}"
  width="{{ section.settings.logo.width }}"
  height="{{ section.settings.logo.height }}"
  alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
/>