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

Solved
DSLR
Shopify Partner
29 0 4

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)

Accepted Solutions
Dave_Pelletier
Shopify Staff
Shopify Staff
27 3 3

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

 

View solution in original post

Replies 12 (12)
Dave_Pelletier
Shopify Staff
Shopify Staff
27 3 3

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
Shopify Partner
29 0 4

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
Shopify Staff
27 3 3

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

 

DSLR
Shopify Partner
29 0 4

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
Shopify Staff
27 3 3
valschr
New Member
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, 

DonaldW
New Member
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
New Member
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

audreysurfin
Shopify Partner
3 0 2

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

navarra-lab
Shopify Partner
3 0 0

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!
 

audreysurfin
Shopify Partner
3 0 2

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 🙂