Liquid snippet for assigning a secure Imgix URL given an existing image URL. For use with Imgix Web Proxy sources.

example-usage.liquid

{%- assign shopify_image_url = product.images.first | product_img_url: '1200x' -%}
{%- include 'imgix-img' img_url: shopify_image_url, params: "h=630&w=1200&fit=fill&fill-color=white", is_secure: true -%}

<meta property="og:image" content="{{ imgixImagePath }}">

<img src="{{ imgixImagePath }}" />

imgix-image-url.liquid

{%- assign imgix_token = 'xxxxxxxxxxxxxxxx' -%}
{%- if is_secure -%}
  {%- assign protocol = 'https:' -%}
{%- else -%}
  {%- assign protocol = 'http:' -%}
{%- endif -%}

{%- assign image_path = img_url | prepend: protocol -%}
{%- if params -%}
  {%- assign queryParams = params | prepend: "?" -%}
{%- else -%}
  {%- assign queryParams = "" -%}
{%- endif -%}

{%- assign encodedPath = image_path | url_encode | prepend: "/" -%}
{%- assign signatureBase = encodedPath | prepend: imgix_token | append: queryParams -%}
{%- assign signature = signatureBase | md5 -%}

{%- assign secureQueryParam =  signature | prepend: 's=' -%}

{%- if queryParams == "" -%}
  {%- capture signedParams -%}?s={{signature}}{%- endcapture -%}
{%- else -%}
  {%- capture signedParams -%}{{queryParams}}&s={{signature}}{%- endcapture -%}
{%- endif -%}

{%- assign imgixImagePath = encodedPath | prepend: '//your-domain.imgix.net' | append: signedParams | prepend: protocol -%}