Shopifyの画像出力に関して:メモ

全体像が見えず理解しきれていないのでメモとして。

[追記:2023.1.25]
全体的にアップデート。

参考ページ

• How to Manipulate Images with the img_url Filter — Learning Liquid
• How to Customize the HTML img Element in Shopify Themes
• HTML filters
• URL filters

様々なオブジェクトから画像を出力する

• hoge.jpgという画像を各部にアップロードしている前提
• img_tagフィルターを追加してimgタグを出力させる
• フィルターだけでも表示できるが、パラメータをつけることで出力する情報を増やすことができる

image_tagを用いた出力

cropしない場合は、widthsパラメータが使えるimage_tagの利用が便利です。

• Liquid filters: image_tag

基本的には以下の順序を経てタグが出力されます。

1. オブジェクトを記載する
2. image_urlフィルターを記載してURLを取得する
   (widthやcropなどのパラメータで加工後のURLを得られる)
3. image_tagフィルターを記載してタグを出力する
   (タグに指定可能な複数の属性をパラメータで追加可能)

{{ product | image_url: width: 600 | image_tag: widths: '200, 300, 400' }}
上記のようにwidthsを記載すれば、以下のようにsrcset属性を含んだimgタグが出力されます。
<img
 src="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&width=600"
 alt="Health potion"
 srcset="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&width=200 200w,
  //cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&width=300 300w,
  //cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&width=400 400w"
 width="600"
 height="400"
>

alt属性やloading属性なども設定可能なので、手動で色々書く手間が省けます。

ただし、widthsを指定した場合はcropが機能しなくなります。

様々なオブジェクトから画像を出力する

管理画面の商品管理の各商品詳細からアップロードした画像
{{ product | image_url: width: 200 | image_tag }}

管理画面の商品管理の各商品詳細からアップロードした画像
バリエーションと画像が紐づいている必要がある
for で product.variants を for文で回すループの中などで使用可
{{ variant | image_url: width: 200 | image_tag }}

line_item はショッピングカートに関連するオブジェクト。商品画像を出力する。
以下の場合であれば、line_item.image と line_item は同義。
{{ line_item | image_url: width: 200 | image_tag }}

コレクションの画像を出力する。
以下の場合であれば、collection は collection.image と同義。
{{ collection | image_url: width: 200 | image_tag }}

image_tagにwidthsをつけてcropした画像を表示する

blockのimage_pickerで画像を設定した前提で記載します。
{%- liquid
  assign my_image = block.settings.image
  assign my_image_url = my_image | image_url: width: 1500, height: 1500, crop: 'center'
-%}
{{ my_image_url | image_tag: widths: '180, 360, 540, 720, 900, 1080, 1296' }}

イレギュラーな書き方なのでお勧めしませんが、先にcropした画像のurlを取得して用いることで、widthsを設定した状態でcropした画像を表示できました。

パスを出力する

• Liquid filters: image_url
• Liquid filters: asset_img_url
• Liquid filters: file_img_url

商品画像
{{ product | image_url: width: 200 }}
{{ product | image_url: width: 200, height: 200, crop: 'center' }}

管理画面のFileからアップロードした画像
ワードで大きさが指定できる
{{ 'foo.png' | file_img_url: '125x' }}
{{ 'foo.png' | file_img_url: 'large' }}

テーマファイル内のassetsディレクトリにアップロードした画像
ワードで大きさが指定できる
{{ 'foo.png' | asset_img_url: '128x128' }}
{{ 'foo.png' | asset_img_url: 'large' }}

image_urlによるサイズ指定

• Liquid filters: image_url

 
以下のようにproductオブジェトを用いて表示可能
{{ product | image_url: width: 450 }}
 
横を125pxで固定し、縦は自動。
{{ product | image_url: width: 125 }}
 
縦を500pxで固定し、横は自動。
{{ product | image_url: height: 500 }}
 
元のサイズで表示。
専用の指定方法は用意されていない模様ですが、画像用オブジェクトのwidthを用いて代用可能です。
{{ product | image_url: product.featured_image.width }}

• image_urlフィルターにwidthやheightパラメータを付与することで、任意のサイズに加工された画像を出力
• widthとheightは"150×150"のような形式ではなく、width: 150, height: 150のようにクォート無しでwidthとheightを分けて書く
• widthにワードでの指定はできず、数値指定のみ有効
• cropやformatの指定が可能

ファイルでアップロードした画像の使用方法の検討

Shopifyでは、管理画面の「ファイル」から画像がアップロードできます。この場合に画像を出力する方法は以下の2つです。

• 「ファイル」の画面に表示されている、各画像のURLをコピーして用いる
• file_img_urlフィルターを使う前提で画像名を用いる

どちらを使っても最終的な出力値はCDNのURLとなるのでどちらでも問題は出ないはずです。
ただしフィルターの存在などを考えますと、以下の理由によりfile_img_urlフィルターを用いる方法の方が良いのかなと考えています。

• サイズとトリミングの指定ができるため

アップロード時の注意点

• 日本語のファイル名で画像をアップロードすると英数の文字列に変換されたファイル名で登録される

変換方法が乱数なのか何らかのルールがあるのか確認できませんでしたが、管理画面からアップロードする際に日本語ファイル名は変換されます。そもそも日本語ファイル名自体が悪手なので、日本語の使用はまったくお勧めできません。

画像タイプのメタフィールド

• Metafield filters
• HTML filters (image_tag)

{{ product.metafields.hoge.fuga | metafield_tag }}

画像のメタフィールド場合は、上記のようにmetafield_tagを使えば以下のような出力結果が得られます。

<img src="https://cdn.shopify.com/[cdn-url-path]/[file-name]" alt="Image alt text" class="metafield-file_reference">

上記に加えてloading="lazy"がつく状態を確認したのですが、ドキュメント無いにはその件は書かれていないようでした。

ただ、srcsetやサイズ指定などいろいろ設定して出力したい場合には、結局以下のようにテキストと似た形式の記述にした方が良さそうです。

{{ product.metafields.hoge.fuga.value | image_url: width: 500 | image_tag: alt: 'My Image', class: 'css-class-1', loading: 'lazy' }}
↓上記で以下のような出力になる
<img src="//cdn.shopify.com/s/files/1/00/00/000/files/piyo.jpg?v=000&width=500" alt="My Image" srcset="//cdn.shopify.com/s/files/1/00/00/000//files/piyo.jpg?v=000&width=352 352w" width="500" height="625" class="css-class-1" loading="lazy">

結び

まだいろいろ調査中です。