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

日本語 ディスカッション 技術的なQ＆A

Topic 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タグへ変換可能

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

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

clcl_0-1701417262524.png
clcl_0-1701417262524.png1937×445 48.9 KB

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

◇質問

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

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

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

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

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

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

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

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

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

2

https://webutubutu.com/webdesign/10953

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

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

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

1 Like
3

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

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

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

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

メタオブジェクトネーム item_ranking
商品(リスト)ネーム item 
{%- 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 -%}

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

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

4

@Jizo_Inagaki

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

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

5

https://shopify.dev/docs/api/liquid/filters/metafield_tag

metafield_tagフィルターで簡単に変換できる事がわかりました :bird:

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

{{ product.metafields.custom.image | metafield_tag }}
1 Like