Using liquid url/img filters with items stored in 'files'

Highlighted
Tourist
12 1 2

I'm using a metafields app to add a featured image to a page. The field is populated with a URL, something in the files folder, so something like: https://cdn.shopify.com/s/files/1/2345/6789/files/my-page-header-image.jpg?01234

 

So, the simple version of my code works. Like this:

{% assign pageheaderimage = page.metafields.sf_page_info.header_image %}
{{ page.title }}

 

But what I want to do is run that image though my responsive image script...

 

If I use {{ pageheaderimage | file_url }} or {{ pageheaderimage | file_img_url:"800x" }} - I get the no-image.

 

So, starting from a variable that's an image url, how do I make it so that i can apply img filters to it?

 

My end goal is code that looks more like this:

{% assign pageheaderimage = page.metafields.sf_page_info.header_image %}
{% include 'responsive-image' with image: pageheaderimage, lazy-load: true %}

and so on...

 

I'm working off of this page - https://www.shopify.com/partners/blog/using-responsive-images - and I can get it work with blocks, I just can't get it to work when I'm looking at something in Files.

0 Likes
Shopify Partner
1366 24 244

If that image is uploaded to your files folder, you could store its name and use the global images object:

https://help.shopify.com/en/themes/liquid/objects#images

 

 

{% assign pageheaderimage = page.metafields.sf_page_info.header_image %}

{% assign image = images[pageheaderimage] %}
<img src="{{ image | img_url: '1024x' }}" alt="{{ image.alt }}">

 

 

where pageheaderimage will return "my-page-header-image.jpg" and size given is '1024x'

https://sections.design tips, tricks & Shopify sections
3 Likes