Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This snippet takes HTML content from the Shopify editor and parses out the first image in all sizes.
{% comment %}
This snippet takes HTML content from the Shopify editor and parses out the first image in all sizes.
Usage:
{% include 'get-first-image' with page.content %}
Return:
{{ FirstImagePico }}
{{ FirstImageIcon }}
{{ FirstImageThumb }}
{{ FirstImageSmall }}
{{ FirstImageCompact }}
{{ FirstImageMedium }}
{{ FirstImageLarge }}
{{ FirstImageGrande }}
{{ FirstImageRaw }} // This string is the raw image without sizing (original size)
Required:
Image must be JPG
{% endcomment %}
{% if get-first-image.size > 0 %}
{% assign content = get-first-image %}
{% capture FirstImageRaw %}{{ content | remove: '<img src=' | remove: '&nbsp;' | remove: '<p>' | remove: '/>' | remove: '</p>' | remove: '<br' | remove: 'https:' | remove: '_pico' | remove: '_icon' | remove: '_thumb' | remove: '_small' | remove: '_compact' | remove: '_medium' | remove: '_large' | remove: '_grande' | remove: '_1024x1024' | remove: '_2048x2048' | truncatewords: 1, '' | remove: '"' | strip_html | remove: ' ' }}{% endcapture %}
{% capture truncateImage %}{{ FirstImageRaw | truncate: 17, '' }}{% endcapture %}
{% if truncateImage != '//cdn.shopify.com' %}
{% capture FirstImagePico %}{{ 'no-image-compact_pico.gif' | asset_url }}{% endcapture %}{% else %}{% capture parsed_image_pico %}{{ FirstImageRaw | replace: '.jpg', '_pico.jpg' | replace: '.JPG', '_pico.JPG' }}{% endcapture %}
{% capture FirstImageIcon %}{{ 'no-image-compact_icon.gif' | asset_url }}{% endcapture %}{% else %}{% capture parsed_image_icon %}{{ FirstImageRaw | replace: '.jpg', '_icon.jpg' | replace: '.JPG', '_icon.JPG' }}{% endcapture %}
{% capture FirstImageThumb %}{{ 'no-image-compact_thumb.gif' | asset_url }}{% endcapture %}{% else %}{% capture parsed_image_thumb %}{{ FirstImageRaw | replace: '.jpg', '_thumb.jpg' | replace: '.JPG', '_thumb.JPG' }}{% endcapture %}
{% capture FirstImageSmall %}{{ 'no-image-compact_small.gif' | asset_url }}{% endcapture %}{% else %}{% capture parsed_image_small %}{{ FirstImageRaw | replace: '.jpg', '_small.jpg' | replace: '.JPG', '_small.JPG' }}{% endcapture %}
{% capture FirstImageCompact %}{{ 'no-image-compact_compact.gif' | asset_url }}{% endcapture %}{% else %}{% capture parsed_image_compact %}{{ FirstImageRaw | replace: '.jpg', '_compact.jpg' | replace: '.JPG', '_compact.JPG' }}{% endcapture %}
{% capture FirstImageMedium %}{{ 'no-image-compact_medium.gif' | asset_url }}{% endcapture %}{% else %}{% capture parsed_image_medium %}{{ FirstImageRaw | replace: '.jpg', '_medium.jpg' | replace: '.JPG', '_medium.JPG' }}{% endcapture %}
{% capture FirstImageLarge %}{{ 'no-image-compact_large.gif' | asset_url }}{% endcapture %}{% else %}{% capture parsed_image_large %}{{ FirstImageRaw | replace: '.jpg', '_large.jpg' | replace: '.JPG', '_large.JPG' }}{% endcapture %}
{% capture FirstImageGrande %}{{ 'no-image-compact_grande.gif' | asset_url }}{% endcapture %}{% else %}{% capture parsed_image_grande %}{{ FirstImageRaw | replace: '.jpg', '_grande.jpg' | replace: '.JPG', '_grande.JPG' }}{% endcapture %}
{% endif %}
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.