Shopifyのメタフィールドのfileタイプでサイズ指定した画像を用いる

正規の方法があるものの、サイズの調整を行おうとすると方法が見つからず独自実装になったので、試した方法などをメモとして。

実現したいこと

• Shopifyのメタフィールドでfileタイプ(file_reference)を選び画像を設定する
• 画像を任意のサイズで出力する

「特定の種類のファイルを受け入れる」を選択していない場合は、画像以外も以下のような各種ファイルがアップロードできるため、
運用で対応するか、出力時にtypeによる判定を入れる必要がありそうです。

• Uploading and managing files · Shopify Help Center

• JS
• CSS
• CSV
• PDF

メタフィールド

• Metafield content types and values · Shopify Help Center

サンプルコード

ファイルには以下2種類があるため、それぞれで記載します。

• 「1つのファイル」
• 「ファイルのリスト」

なお、「ファイルのリスト」を選んだ場合、複数の画像を登録することが可能ですが、記事公開時点でドキュメント内に説明はなさそうでした。

1つのファイル

• Display the Files with the file name and its url by using metafields – Shopify Community

上記を参考に以下のようなコードを作成して対応できました。

{% assign file_name = product.metafields.hoge.fuga.value.src | split: '/' | last %}
<img src="{{ file_name | file_img_url: "150x" }}">

確認や試作した範囲では、サイズ指定を行うためにはサンプルコードのように加工を行いファイル名を取得して用いる必要があります。
またはパス内の拡張子の前にサイズ指定のワード(_150xなど)を追加することも検討できます。

その他の出力方法

画像を設定したという前提で以下記載します。

ただし確認した範囲では、いずれの方法でもfile_img_url: "150x"のような出力サイズ指定を行う方法はないようでした。

metafield_tag

• Metafield filters
• Metafield filters file_reference
• Metafield filters　file_reference　images

{{ product.metafields.hoge.fuga | metafield_tag }}
<img src="https://cdn.shopify.com/[cdn-url-path]/[file-name]" class="metafield-file_reference">

metafield_tagを使用するだけで、imgタグとして出力できます。

metafield_text

• Metafield filters

<img
  src="{{ product.metafields.hoge.fuga | metafield_text | prepend: '//' }}"
  width="{{ product.metafields.hoge.fuga.value.width }}"
  height="{{ product.metafields.hoge.fuga.value.height }}"
>

metafield_textを使うことで登録した画像のサイズでパスが出力されます。
ただしそのままではURLとして使えない状態のため、サンプルではprependで//を追加しています。
widthやheightの出力も可能です。

出力内容から考えると、metafield_textを画像出力に用いるのは想定されていない使い方かもしれません。

file_url

<img
  src="{{ product.metafields.hoge.fuga | file_url }}"
  width="{{ product.metafields.hoge.fuga.value.width }}"
  height="{{ product.metafields.hoge.fuga.value.height }}"
>

file_urlを使うことでも登録した画像のサイズでパスが出力されます。
widthやheightの出力も可能です。

metafield_textとの違いは以下の通りです。

• 先頭に//がついている
• パラメータの値が違う(通しているフィルターが違うからと思われるが、正確な理由や法則などは不明)

ファイルのリスト

試作したところ以下で出力は可能でした。

{% for file in product.metafields.hoge.fuga.value %}
  {% assign file_name = file | split: '/' | last %}
  <img src="{{ file_name | file_img_url: "150x" }}">
{% endfor %}

ファイルのリストの問題点

• Shopifyのメタフィールドのリスト – WEBUTUBUTU

実用面でそれほど障害にならないレベルだと思いますが、現時点では多少問題があるようなので詳細は上記別記事を参照ください。

altの設定方法

1. メタフィールドで画像を登録後、該当のメタフィールドをクリックすると少し拡大された状態で表示される
2. 画像のサムネイルをクリックする(マウスオーバーで目のアイコンが表示される)
3. 画像下部の「代替テキスト」にaltを入力する

少々わかりにくいのですが、上記手順で設定可能です。

動的リソースに設定した場合

セクションやブロックの"type":"image_picker"で設定した時と同様に扱えます。

参考

• The metafield object
• The generic_file object
• The media object

結び

OS2.0で追加変更されたメタフィールドは扱いやすくなっており、今回も原寸で出力する場合であれば便利です。

しかし把握できた範囲では、特定のサイズで出力したい場合に実現する方法が用意されておらず、その点では不便な印象です。