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

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:


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 - - and I can get it work with blocks, I just can't get it to work when I'm looking at something in Files.

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:



{% 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' tips, tricks & Shopify sections