# メタオブジェクトに登録されたファイルの出力について

**URL:** <https://community.shopify.com/t/topic/273451>\
**Category:** 技術的なQ＆A\
**Created:** [December 1, 2023, 8:09am UTC](https://community.shopify.com/t/topic/273451 "2023-12-01T08:09:14Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

メタオブジェクトに登録されたファイルを.liquid内で画像表示する方法についての質問です。

**問題点:**
- メタオブジェクトから取得される値が「gid://shopify/MediaImage/〇〇〇〇」形式で、ファイル名ではないため画像出力方法が不明
- 商品情報の場合はIDからループで取得できるが、画像の場合の方法が見つからない

**提案された解決策:**

1. **従来の方法** - `product.metafields`からJSONフィルタで出力し加工する方法（現在は対応状況不明）

2. **リスト形式の場合** - メタオブジェクト内のリスト形式フィールドを二重ループで走査する方法。`shop.metaobjects`から値を取得し、`card-product`などでレンダリング

3. **最適解** - `file_img_url`フィルタを使用し、メタオブジェクトの値を`hogefuga/files/hoge.jpg`形式で出力

4. **最新の推奨方法** - `metafield_tag`フィルタを使用:
```
{{ product.metafields.custom.image | metafield_tag }}
```
これにより簡単にimgタグへ変換可能

参考リンクや具体的なコード例が複数提供されています。

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/b/b/7bbfe07c91e3f502d9c876612b0b445245662ef9.png) [@system](https://community.shopify.com/u/system)\
**Post date:** [December 1, 2023, 8:09am UTC](https://community.shopify.com/t/topic/273451/1 "2023-12-01T08:09:14Z")

</div>

![clcl_0-1701417262524.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/2/22fe70f57b927534a2067cf7fdd4d7b0e0bcf697.png)

初投稿の質問になります。

◇質問

メタオブジェクトに登録されたファイルを、画像として.liquid内で表示させたいと考えております。

ですが「[“gid://shopify/MediaImage/〇〇〇〇〇〇〇〇”,“gid://shopify/MediaImage/〇〇〇〇〇〇〇〇”]」

のようにファイルネームではなくgidで出力されるようで、

gidから画像を出力する方法を探したのですが見つけることができませんでした。

商品情報の場合、idからループで取得する方法があるみたいですが

```auto
assign products_obj = collections.all.products | where: 'id', product_id

```

ファイルのメディアの場合どのような記述になるかわからず苦戦しております。

上記になります、回答を頂けると幸いです。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [December 5, 2023, 5:39am UTC](https://community.shopify.com/t/topic/273451/2 "2023-12-05T05:39:55Z")

</div>

[https://webutubutu.com/webdesign/10953](https://webutubutu.com/webdesign/10953)

上記は私のブログ記事ですが、当時は以下のようなコードで出力可能だったはずです。

```markup
{% for file in product.metafields.hoge.fuga.value %}
  {% assign file_name = file | split: '/' | last %}
  
{% endfor %}

```

今現在試したわけではないので、うまくいかない場合はループ内で値をjsonフィルターなどで出力して加工方法を探れば対応可能だと思います。

---

<div class="post-metadata">

**Author:** ![nanaironanaoto](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/nanaironanaoto/32/22745_2.png) [@nanaironanaoto](https://community.shopify.com/u/nanaironanaoto)\
**Post date:** [July 19, 2024, 5:36am UTC](https://community.shopify.com/t/topic/273451/3 "2024-07-19T05:36:33Z")

</div>

添付の画像をみたところ、メタオブジェクトの中のフィールドがリスト形式のようですので、

メタオブジェクトの中を走査するループの中で、

さらにリスト形式のフィールドを走査するループを組まなければきれいにいきません。

以下は、「メタオブジェクト内で登録した、リスト形式のproductオブジェクト」を出力するためのliquidです。ご参考になりますでしょうか。

| メタオブジェクトネーム | item\_ranking |
| --- | --- |
| 商品(リスト)ネーム | item |

```markup
{%- for object in shop.metaobjects.item_ranking.values -%}
  {%- assign product = object.item.value -%}
  {% for product in product %}
    - {% render 'card-product',
          card_product: product,
          media_aspect_ratio: section.settings.image_ratio,
          image_shape: section.settings.image_shape,
          show_secondary_image: section.settings.show_secondary_image,
          show_vendor: section.settings.show_vendor,
          show_rating: section.settings.show_rating,
          show_quick_add: section.settings.enable_quick_add,
          section_id: section.id
        %}
    

  {%- endfor -%}
{%- endfor -%}

```

これを参考にすると、画像は以下のように出力可能だと思います。

```markup
{%- assign object_image = '' -%}
{%- for object in shop.metaobjects.メタオブジェクトのネーム.values -%}
 {%- assign icon= object.icon.value -%}
 {% for object_image in icon %}
  {{ object_image | image_url: width: 2000 | image_tag }}
 {%- endfor -%}
{%- endfor -%}

```

メタオブジェクトの出力方法について、文献が少ないように思います。

不明点あれば、Shopify構築のプリズムワークスにご相談ください！

[https://prythmworks.tokyo](https://prythmworks.tokyo)

---

<div class="post-metadata">

**Author:** ![bluetree](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/bluetree/32/163780_2.png) [@bluetree](https://community.shopify.com/u/bluetree)\
**Post date:** [December 18, 2024, 8:09am UTC](https://community.shopify.com/t/topic/273451/4 "2024-12-18T08:09:59Z")

</div>

@Jizo_Inagaki

[https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types](https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types)

ですね。メタオブジェクトのvalueで **files/hobgehoge.jpg** とか出るのでfile\_img\_urlフィルターで出すのが今の最適解っぽいです

---

<div class="post-metadata">

**Author:** ![bluetree](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/bluetree/32/163780_2.png) [@bluetree](https://community.shopify.com/u/bluetree)\
**Post date:** [December 18, 2024, 8:23am UTC](https://community.shopify.com/t/topic/273451/5 "2024-12-18T08:23:13Z")

</div>

[https://shopify.dev/docs/api/liquid/filters/metafield\_tag](https://shopify.dev/docs/api/liquid/filters/metafield_tag)

metafield\_tagフィルターで簡単に変換できる事がわかりました 🐦

以下でimgタグに変換できるかと思います。

```markup
{{ product.metafields.custom.image | metafield_tag }}

```