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

[DSLR]

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 .

Thanks in advance !

[Dave_Pelletier]

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.

[DSLR]

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.

[Dave_Pelletier · Accepted solution]

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
    }
  }
}

[DSLR]

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 ?

[Dave_Pelletier]

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

[valschr]

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, 

[navarra-lab]

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!
 

[Charlie-SLA]

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!

[joshcorbett]

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

[jDunham]

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
              }
            }
          }
        }
      }
    }
  }
}

[joshcorbett]

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 🙂

Thanks

[DonaldW]

Hi!

I have the same issue on the storefront api.

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

Thanks

[Mahesh95]

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.

4213

[audrey_boskant]

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 🙂

<img src="{{ product.metafields.my_fields.name_of_your_field | file_url }}">

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

[aqueeb]

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: 

<div class="contents">
{{ product.metafields.my_fields.pageref }}
</div>

Output I am getting is this:

gid://shopify/OnlineStorePage/91550220472

I want the html page as the output

[audrey_boskant]

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 🙂