Created
May 8, 2020 05:23
-
-
Save willbuilds/1368b434a880b2517fc2152989fbd2df to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% 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 }} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment