How to lazy load and resize a single image from file directory?

[Arthur_I_A]

Hi

I want to lazyload some images that are stored in the File Directory of the Shopify file admin.

This conventional system works but requires me to upload multiple sized versions of the same image.

<img
alt="Mist covered mountains"
data-sizes="auto"
data-src="{{ 'misty_mountains-200.jpg' | file_url }}"
data-srcset="
{{ 'misty_mountains-200.jpg' | file_url }} 200w,
{{ 'misty_mountains-500.jpg' | file_url }} 500w,
{{ 'misty_mountains-1000.jpg' | file_url }} 1000w,
{{ 'misty_mountains-1500.jpg' | file_url }} 1500w,
{{ 'misty_mountains-2000.jpg' | file_url }} 2000w,
{{ 'misty_mountains-2500.jpg' | file_url }} 2500w"
class="lazyload" />

Question: is there a way to get Shopify to lazyload and resize a single copy of a high res image from the File Directory?  E.g. Upload a large image and let Shopify resize for 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048 pixels depending on screen width.

I've had success doing this when calling up images contained in the theme editor etc.

https://www.shopify.co.uk/partners/blog/using-responsive-images

However, I can't seem to get it to work from the File Directory and I can't find any documentation confirming it is possible.

Many thanks

[filisantillan · Accepted solution]

Instead of using the file_url filter you could use the file_img_url filter which treats the file as an image, this means you could use size parameters among other filters for images.

file_img_url: https://shopify.dev/api/liquid/filters/url-filters#file_img_url

filters for images: https://shopify.dev/api/liquid/filters/url-filters#image_url

[Arthur_I_A]

Nice one Fili

Works a treat!

For anyone interested, see the working code below.

There may be a shorter way of writing the data-srcset section but I couldn't find it

<img class="lazyload"
src="{{ 'misty_mountains-2500.jpg' | file_img_url: '200x200' }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-sizes="auto"
data-srcset="
{{ 'misty_mountains-2500.jpg' | file_img_url: '540x' }} 540w
{{ 'misty_mountains-2500.jpg' | file_img_url: '720x' }} 720w,
{{ 'misty_mountains-2500.jpg' | file_img_url: '900x' }} 900w,
{{ 'misty_mountains-2500.jpg' | file_img_url: '1080x' }} 1080w,
{{ 'misty_mountains-2500.jpg' | file_img_url: '1296x' }} 1296w,
{{ 'misty_mountains-2500.jpg' | file_img_url: '1728x' }} 1728w,
{{ 'misty_mountains-2500.jpg' | file_img_url: '1944x' }} 1944w,
{{ 'misty_mountains-2500.jpg' | file_img_url: '2048x' }} 2048w"
alt="Mist covered mountains"
style="display:block; width:100%">