A roundabout way of re-building image URLs in Shopify without the `img_url` helper. Supports size declarations, but not cropping settings.

image-resizer.liquid

{% comment %}
  Set up `transform` string for inclusion in a URL:
{% endcomment %}

{% if size %}
  {% assign transform = size | prepend: '_' %}
{% else %}
  {% assign transform = '' %}
{% endif %}

{% comment %}
  Split the fully qualified path:
{% endcomment %}

{% assign imgUrlSegments = img | replace: 'https://', '' | split: '/' %}

{% comment %}
  Re-assemble the canonical path:
{% endcomment %}

{% assign imgUrlCriticalPathSize = imgUrlSegments.size | minus: 2 %}
{% assign imgUrlCriticalPath = '' %}

{% for segment in imgUrlSegments %}
  {% if forloop.index0 <= imgUrlCriticalPathSize %}
    {% assign imgUrlCriticalPath = imgUrlCriticalPath | append: segment | append: '/' %}
  {% endif %}
{% endfor %}

{% comment %}
  Grab the resource name, splitting off any query params:
{% endcomment %}

{% assign imgResourceParts = imgUrlSegments.last | split: '?' %}

{% comment %}
  Capture the filename and query string:
{% endcomment %}

{% assign imgResourceName = imgResourceParts[0] %}
{% assign imgResourceQueryString = imgResourceParts[1] %}

{% comment %}
  Split the filename into parts:
{% endcomment %}

{% assign imgFileParts = imgResourceName | split: '.' %}

{% comment %}
  Grab the extension and name, being sensitive about possible dots in the filename itself:
{% endcomment %}

{% assign imgFileNameSize = imgFileParts.size | minus: 2 %}

{% comment %}
  Re-assemble filename from usable parts:
{% endcomment %}

{% assign imgFileName = '' %}

{% for part in imgFileParts %}
  {% if forloop.index0 <= imgFileNameSize %}
    {% assign imgFileName = imgFileName | append: part %}
  {% endif %}
{% endfor %}

{% assign imgFileExtension = imgFileParts | last %}

{% assign imgVariantFileName =
  imgFileName
  | append: transform
  | append: '.'
  | append: imgFileExtension
  | append: '?'
  | append: imgResourceQueryString %}

{% comment %}
  Build absolute URL to transformed image:
{% endcomment %}

{% assign imgVariantUrl = 'https://' | append: imgUrlCriticalPath | append: imgVariantFileName %}

<figure class="basic-image">
  <img class="basic-image__image" src="{{ imgVariantUrl }}">
</figure>

product.liquid

{% include 'basic-image', img: product.metafields.global.MyImageField, size: 'medium' %}
{% include 'basic-image', img: product.metafields.global.MyImageField, size: '420x' %}
{% include 'basic-image', img: product.metafields.global.MyImageField, size: '1200x800' %}

This is useful if you no longer have a reference to the original Image object—as is the case when uploading images to a meta-field management app.

Unfortunately, Shopify won't re-wrap those URLs to help with transforms, so it's up to us to hack this back together.