Images not rendering when entering them to img_url as string.

Shopify Partner
8 0 0

Been trying to figure this out, on and off, for a few days...

 

If I print out:

 

{{ image.src }}

I get the following...

 

products/1902CDC012606_MY_IMAGE--IMG_1200--MyProduct-69960124.jpg

 

And if I drop image.src into an image filter I'm able to view the image.

 

{{ image.src | img_url }}
However if I do this, I get an empty image.
 
{%- assign myImage = 'products/1902CDC012606_MY_IMAGE--IMG_1200--MyProduct-69960124.jpg' -%}
{{ myImage | img_url }}
Obviously, this isn't what I am trying to do, but I am trying to do something that requires me saving these product images to a json_string in a metafield and then pull them out to display them.  However, all I am getting are empty images.
 
Feels like Shopify is doing something behind liquid to render these images.
 
Any idea on how to get these to render?
0 Likes
Shopify Partner
1343 22 204

Hey,

 

Have a look at the Images Global Object: https://help.shopify.com/en/themes/liquid/objects#images

{% assign image = images['my-image.jpg'] %}
<img src="{{ image }}" alt="{{ image.alt }}">

 

I believe that the code provided by Shopify is a bit off,  this works for me:

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

 

Will work for all images except those stored in the Assets folder.

 

Hope it helps

https://sections.design tips, tricks & Shopify sections
0 Likes
Shopify Partner
8 0 0

Thank you for the reply!

 

Didn't seem to work.  The image I am trying to pull is actually a product image.  Are those included in the global Object?

0 Likes
Shopify Partner
1343 22 204

Hi,

Sorry, jumped right into this.

 

Indeed the provided code will get only images in the file folder.

Those can be images directly uploaded, theme and sections images...

Unfortunately no product images.

 

Do you have access the the product handle?

If so you could try this:

 

{% assign prod = all_products['some-product-handle] %}
{% assign img = prod.images[3] %}

You will need both the product handle and an image index, e.g: 3

Note that all_products will work for up to 20 products, there are limitations.

 

Maybe this approach will work for you.

Thanks

 

 

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