shopify-responsive-content.liquid

{% comment %}
Snippet 'responsive-content'
This snippet takes rich text content (ie product.description, article.content etc) and, where possible, adds responsive image markup
Requires snippet 'responsive-image' to be defined (https://gist.github.com/wmulligan87/d2065346592eb3929147dbeca342f64c)

Usage:
{% include 'responsive-content' with article.content %}

{% endcomment %}

{% assign original_content = responsive-content %}

{% comment %} Store the img tags in a string {% endcomment %}
{% assign img_tags = '' %}
{% assign imgs_split = original_content | split:'<img' %}
{% for img_rough in imgs_split %}
{% if img_rough contains 'src="'%}
{% comment %} Store the img tag, but without <img and "> {% endcomment %}
{% assign img_tag = img_rough | split: '">' | first %}
{% if img_tag contains 'src="'%}
{%- assign t = img_tag | prepend: '<img' | append: '">||' | strip -%}
{% assign img_tags = img_tags | append: t %}
{% endif %}
{% endif %}
{% endfor %}

{% comment %} Make img tags into an array {% endcomment %}
{% assign img_tags_array = img_tags | split: '||' %}

{% comment %} Make the responsive image tags {% endcomment %}
{% assign imgs_responsive = '' %}
{% for i_tag in img_tags_array %}
{% if i_tag contains 'src="'%}

{% comment %} Isolate the src {% endcomment %}
{% assign src = i_tag | split:' src="' | last | split:'"' | first %}

{% comment %} Only make shopify hosted images responsive {% endcomment %}
{% if src contains 'cdn.shopify.com' %}
{% comment %} Clean up sizes, so the user can't use whatever size in the CMS {% endcomment %}
{% assign img_sizes = "_pico,_icon,_thumb,_small,_compact,_medium,_large,_grande,_1024x1024,_2048x2048" | split: "," %}
{% comment %} Assume image is using Original size and won't match img_sizes {% endcomment %}
{% assign src_cleaned = src %}
{% comment %} Loop through img_sizes, if it match, remove the size extention {% endcomment %}
{% for size in img_sizes %}
{% if src contains size %}
{% assign src_cleaned = src | replace: size, '' %}
{% endif %}
{% endfor %}
{% comment %} Extract img name {% endcomment %}
{% assign img_path = src_cleaned | split: "/" %}
{% assign img_name = img_path | last | split: "?" %}
{% assign my_img = img_name | first %}
{% comment %} Responsive Image {% endcomment %}
{% capture img_resp %}
{% include 'responsive-image' with my_img, type: 'file', alt: '' %}
{% endcapture %}
{% comment %} Store it into a string but use || instead of , as responsive image markup uses a lot of , {% endcomment %}
{% assign imgs_responsive = imgs_responsive | append: img_resp | append: '||' %}
{% else %}
{% comment %} Other images will keep the same img tag {% endcomment %}
{% assign imgs_responsive = imgs_responsive | append: i_tag | append: '||' %}
{% endif %}
{% endif %}
{% endfor %}

{% comment %} Make responsive images into an array {% endcomment %}
{%assign imgs_responsive_array = imgs_responsive | split: '||' %}

{% comment %} Replace image tag with responsive image tag {% endcomment %}
{% assign responsive_content = original_content %}
{% for i_tag in img_tags_array %}
{% assign responsive_content = responsive_content | replace: i_tag, imgs_responsive_array[forloop.index0] %}
{% endfor %}
  
{{ responsive_content }}