Solved

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

Arthur_I_A
Tourist
5 0 1

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

 

 

 

 

 

Accepted Solution (1)

filisantillan
Shopify Partner
12 3 5

This is an 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.

 

View solution in original post

Replies 2 (2)

filisantillan
Shopify Partner
12 3 5

This is an 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.

 
Arthur_I_A
Tourist
5 0 1

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%">