How to get media src by using metafield file type in Graphql or API's?

Retired Boards Appdev Graphql Basics And Troubleshooting
1

Hello ,

I am trying to get the image source by using metafields value but it will be given me "gid://shopify/MediaImage/24161764376760" that type media Image id,

With the help of this in which query I have to use to get media src .

metafields_img.png
metafields_img.png904Ă—552 35.4 KB

Thanks in advance !

2

Hi!

Starting next Friday (Oct 1) with the release of the 2021-10 API version you’ll be able to query a new reference field on the Metafield object. You can see it in the dev docs for the 2021-10 version here:

https://shopify.dev/api/admin-graphql/2021-10/objects/Metafield

https://shopify.dev/api/admin-graphql/2021-10/unions/MetafieldReference

You can also try it out by using the 2021-10 release candidate version before it launches on Oct 1.

3

Thank you @Dave_Pelletier for your response,

I have checked dev docs but i am not found any query about the media image to get source . I know with the help of liquid object we will achieve image src. But i want to get the image src by using any Api’s or Graphql for metafields.

4

This query works for me on the 2021-10 version of the GraphQL Admin API. Is this what you’re looking for?

{
  product(id: "gid://shopify/Product/YOUR_PRODUCT_ID") {
    metafield(namespace: "my_fields", key: "image") {
      reference {
        ... on MediaImage {
          image {
            originalSrc
          }
        }
      }
    }
  }
}

Response:

{
  "data": {
    "product": {
      "metafield": {
        "reference": {
          "image": {
            "originalSrc": "https://cdn.shopify.com/s/files/1/1026/6195/files/mobile-receipt-shopify.png?v=1613088523"
          }
        }
      }
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 4,
      "actualQueryCost": 4
    }
  }
}
5

Thanks , that’s great !!

That’s query help me a lot ,

Can you please share me metafields docs url with the help of I will be use other metafields type data ?

6

Here’s the best starting point for Metafields docs: https://shopify.dev/apps/metafields

Here is the list of types: https://shopify.dev/apps/metafields/definitions/types

7

Thanks for the very helpful info.

Will this also be available for the storefront API? I’m currently looking for a way to get this to work with a headless Gastby setup.

thanks,

8

Hi!

I have the same issue on the storefront api.

Is it possible to get the reference using the storefront api?

Thanks

9

You can just try changing the content type from files to single-line text and try to convert image to base64 and copy them to metafield value.

4
4777Ă—430 13.9 KB

2
2853Ă—286 34.7 KB

1
11197Ă—697 35.6 KB

3
31067Ă—292 16.2 KB

10

For those like myself who works with new 2.0 theme but doesn’t work with API, headless, Graphql etc; but which landed on this forum, here is the line to get your Image file URL from metafield file reference :slightly_smiling_face:

I don’t know yet if we can also manage image source size like this.

11

Hi. Thanks a lot. I have been looking for this for a long time. Adding " | file_url " really helped.
Can you also share what needs to be done to access metafield whose content type is page.

I am using this:

{{ product.metafields.my_fields.pageref }}

Output I am getting is this:

gid://shopify/OnlineStorePage/91550220472

I want the html page as the output

12

Hey @Dave_Pelletier ,

is there any way to achieve similiar thing with `list.file_refrence’ metafield type?
I would like to be able to resolve a whole list of files at once to get contents for a slider.

Maybe the answer is obvious, but as a noob in gQL I can’t find it.
Any help much appreciated!

13

Hi Aqueeb,

Sorry for the late answer!
Regarding the metafields with content type as page, here is what I use:

{% assign CHOOSEANAME = product.metafields.my_fields.NAMEOFYOURFIELD.value %}

then

{{CHOOSEANAME.title }}
{{CHOOSEANAME.content }}

Hope it helps :slightly_smiling_face:

14

Hi Dave (or anyone),

Can you please advise how would you change the code if the image metafield is associated with an ORDER (not products) ?

Thanks!

15

Would love to know how this translates to the list.file_reference type, as it returns null

16

Its very similar but just need to use references instead of reference

{
  product(id: "gid://shopify/Product/YOUR_PRODUCT_ID") {
    metafield(namespace: "my_fields", key: "image") {
      references(first: 10) {
        edges {
          node {
            ... on MediaImage {
              image {
                originalSrc
              }
            }
          }
        }
      }
    }
  }
}
17

I did eventually find this solution, however at the time using references returned null until one day suddenly it started returning the correct data, my guess is an api-level error, but it’s working fine now :slightly_smiling_face:

Thanks