Metafield Image - Get URL not GID externally

Technical Q&A
1

Hello,

I have an image metafield on products that outputs a GID when accessed externally via API, but I need it to be a URL.

Is there an easy way to do this (we have a lot of products so hopefully this would not be a product-by-product fix).

Thanks!

2

Thanks for your response. Is there documented way to do this for our many products?

We are happy to utilise Flow or Mechanic or another solution, but Iā€™d love to hear if anyone can point me in the right direction.

3

@no_robotocha @Sophiaatouch2

GID (Google Drive File ID)

A shopify GID is a Global Identifier , it is not about google-drive.

@no_robotocha See this?

https://community.shopify.com/c/graphql-basics-and/how-to-get-media-src-by-using-metafield-file-type-in-graphql-or/td-p/1326275

Generally CDN url was normally only generated for the frontend channels, so if the above does not work then to get those CDN urls basically need to either setup a special page using liquid on the frontend to spit out the GID & URL values (remembering things like pagination), or scrape the frontend. Thereā€™s an example in the mechanic slack channel but itā€™s about incoming_inventory not image urls.

Spitball , thereā€™s also just testing if thereā€™s an undocumented { url } as if you were working with a product image https://community.shopify.com/c/hydrogen-headless-and-storefront/graphql-product-image-url/td-p/1431636

Also post to the https://community.shopify.com/c/metafields-and-custom-data forum. And if nothing comes up after careful testing submit a feature request to shopify partner support either for this feature or better documentation.

Tangentially related:

https://community.shopify.com/c/graphql-basics-and/product-image-upload-using-graphql-without-url/m-p/53376

1 Like
4

Hi @PaulNewton

Thank you so much for this in-depth feedback - very helpful and Iā€™m a lot more confident of a solution. Iā€™ll let you know how it goes.

5

Hi @no_robotocha did you find a solution to this?

6

I found a couple, depending on the situation - whatā€™s your situation and Iā€™ll see if I can help?

7

Thanks for replying so quickly!

The initial images load correctly within my liquid:

{{ image | image_url: width: 200, height: 200 | image_tag: alt: ā€œGallery Imageā€, class: ā€˜gallery-imgā€™, srcset: nil }}

Now, Iā€™m trying to swap images with an onclick event. I can retrieve the ā€œgid://shopify/MediaImage/36560205775154ā€, but then when I swap in javascript using the galleryImage.src= gid://shopify/MediaImage/36560205775154, my image cannot be found.

8

Okay Iā€™m not exactly sure in your case, but the answer is probably how youā€™re requesting the image if youā€™re making an API request (as per this) or if using liquid something like

{{ tile.metafields.custom.product_alt_image | image_url: width: 360 }}

Then if neither of those are helpful, perhaps use javascript to replace ā€œgid://shopify/MediaImage/ā€ with the CDN URL that you find when you go to Content > Files and copy an image link as this seems to be the same URL for all your images.

Hope this helps!

2 Likes