Solved

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

DSLR
Shopify Partner
29 0 8

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

 

Thanks in advance !

 

Accepted Solution (1)
Dave_Pelletier
Shopify Staff (Retired)
27 3 5

This is an 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
    }
  }
}

 

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 16 (16)

Dave_Pelletier
Shopify Staff (Retired)
27 3 5

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.

To learn more visit the Shopify Help Center or the Community Blog.

DSLR
Shopify Partner
29 0 8

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
Shopify Staff (Retired)
27 3 5

This is an 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
    }
  }
}

 

To learn more visit the Shopify Help Center or the Community Blog.

DSLR
Shopify Partner
29 0 8

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
Shopify Staff (Retired)
27 3 5

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

 

To learn more visit the Shopify Help Center or the Community Blog.

valschr
Visitor
1 0 1

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
Shopify Partner
3 0 1

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
Tourist
7 0 3

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
Shopify Partner
14 0 3

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

jDunham
Shopify Partner
2 0 2

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
Shopify Partner
14 0 3

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
Visitor
1 0 1

Hi!

I have the same issue on the storefront api.

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

Thanks

Mahesh95
Shopify Partner
1 0 0

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.

44221133

audrey_boskant
Shopify Partner
5 0 3

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. 

Audrey Coveliers
www.studioboskant.com
aqueeb
New Member
6 0 0

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
Shopify Partner
5 0 3

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 🙂

Audrey Coveliers
www.studioboskant.com