This snippet takes HTML content from the Shopify editor and parses out the first image in all sizes.

get-first-image.liquid

{% 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 %}