Scheduled collection banners using Metafield images/files: img_url and image_url issues

Technical Q&A
1

We have a live site and a dev site with a copy of all the files from the live site.

Both sites have banner options set up in metafields. I’ve set up some additional metafields so the client can set date and time and add new banners that are scheduled to show and end at set times.

I have it working, but for some reason there are differences.

On the dev site I had to use img_url, which also gave me the option to set sizes and crop:

{% assign start = collection.metafields.my_fields.banner_schedule_start | date: '%s' %}
  {% assign end = collection.metafields.my_fields.banner_schedule_end | date: '%s' %}
  {% assign now = "now" | date: '%s' %}
  {% assign bannerdesktop_schedule = collection.metafields.my_fields.banner_image_to_schedule %}
  {% assign bannermobile_schedule = collection.metafields.my_fields.mobile_banner_schedule %}
  {% assign bannerdesktop = collection.metafields.collection.banner %}
  {% assign bannermobile = collection.metafields.collection.mobile_banner %}
  {% if now > start and now < end and bannerdesktop_schedule != blank %}
    
    
  {% else %}
    
    
  {% endif %}

this output as expected:

But on the live site, img_url doesn’t work, I had to use image_url and the set sizes and crop don’t work:

{% assign start = collection.metafields.collections.banner_schedule_start | date: '%s' %}
  {% assign end = collection.metafields.collections.banner_schedule_end | date: '%s' %}
  {% assign now = "now" | date: '%s' %}
  {% assign bannerdesktop_schedule = collection.metafields.collections.desktop_banner_schedule %}
  {% assign bannermobile_schedule = collection.metafields.collections.mobile_banner_schedule %}
  {% assign bannerdesktop = collection.metafields.collection.banner %}
  {% assign bannermobile = collection.metafields.collection.mobile_banner %}
  {% if now > start and now < end and bannerdesktop_schedule != blank %}
    
    
  {% else %}
    
    
  {% endif %}

output shows as:


![SALE-Banner-Desktop.jpg?v=1649414957|1920x248](upload://9rhFwFbSjG8TWftFRJxe6zJOeof.jpeg)

Anyone got any ideas on why this issue shows/doesn’t work?

Also how can I get the alt tag from the images/files?

2

image_url has different parameters, check https://shopify.dev/api/liquid/filters/url-filters#image_url

Is there a difference in how your metafields are defined in those two shops?

If this is a Shopify-native definition, you may need to add .value to your metafield references. https://shopify.dev/api/liquid/objects/metafield

1 Like
3

Thanks for the reply Tim.

I’ve noticed the metafield on the live site is set up using an app, not the standard metafields. When I try using the parameters for image_url, such as:

I get an error saying:

Liquid error (sections/collection-template-boost-pfs-filter.liquid line 48): invalid url input

I’ve also noticed that when running this on the dev site:

{{ collection.metafields.collection.banner.type}}

It returns as expected value of file_reference, but the same code doesn’t return anything on the live site!

Can you help with that?