📘 公式リファレンス🔧 リファレンス/フィルター初級
product_img_url フィルター(商品画像の CDN URL 取得)
商品の画像オブジェクトを Shopify CDN の URL に変換するフィルター。featured_image または images 配列内の任意の画像に対応し、サイズ指定で返すことができる。
用途
商品カードやギャラリーで商品画像を表示するとき、Liquid テンプレート内で画像 URL を動的に生成する。
設置場所
商品画像を表示したい箇所で `{{ product.featured_image | product_img_url }}` の形で使う。`{{ product.images[0] | product_img_url: 'large' }}` のようにサイズパラメータを指定することもできる。
注意点
このフィルターは廃止予定(deprecated)のため、新規実装は `image_url` フィルターへの置き換えが推奨される。デフォルトでは small サイズ(100 x 100 px)を返すが、'large' など他のサイズを明示的に指定して返すことができる。
仕様
50 行 / json{
"category": "media",
"deprecated": true,
"deprecation_reason": "The `product_img_url` filter has been replaced by [`image_url`](/docs/api/liquid/filters/image_url).",
"description": "This can be the product's `featured_image` or any image from the `images` array.",
"parameters": [
{
"description": "The desired image size.",
"name": "size",
"positional": true,
"required": false,
"types": [
"string"
]
}
],
"return_type": [
{
"type": "string",
"name": "",
"description": "",
"array_value": ""
}
],
"examples": [
{
"name": "",
"description": "",
"syntax": "",
"path": "/products/health-potion",
"raw_liquid": "{{ product.featured_image | product_img_url }}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
},
{
"name": "The size parameter",
"description": "By default, the `product_img_url` filter returns the `small` version of the image (100 x 100 px). However, you can specify a [size](/docs/api/liquid/filters/img_url#img_url-size).\n",
"syntax": "image | product_img_url: string",
"path": "/products/health-potion",
"raw_liquid": "{{ product.images[0] | product_img_url: 'large' }}",
"parameter": true,
"display_type": "text",
"show_data_tab": true
}
],
"summary": "Returns the [CDN URL](/themes/best-practices/performance/platform#shopify-cdn) for a [product image](/docs/api/liquid/objects/product).",
"syntax": "variable | product_img_url",
"name": "product_img_url"
}出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-liquid-docs
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
📘 公式リファレンス🔧 リファレンス/フィルター初級
avatar フィルター(顧客アバター画像HTML生成)
顧客アバターが存在する場合、それを表示する HTML タグを生成するフィルター。customer オブジェクトに対して使用する。
📁 theme-liquid-docs·MIT·19 行
📘 公式リファレンス🔧 リファレンス/フィルター初級
default_errors フィルター(フォーム送信エラーを日本語化)
form.errors の各エラーコードに対応する既定のエラーメッセージを自動生成するフィルター。フォーム送信時の入力値不正や必須項目空白などのエラーを言語別に出力する。
📁 theme-liquid-docs·MIT·19 行
📘 公式リファレンス🔧 リファレンス/フィルター初級
date フィルター(日付を指定形式でフォーマット)
日付値を指定されたフォーマット文字列に従って整形する。フォーマット文字列が空の場合は元の値がそのまま返される。入力が日付に変換できない場合も元の値が返される。
📁 theme-liquid-docs·MIT·19 行
📘 公式リファレンス🔧 リファレンス/フィルター初級
payment_terms フィルター(Shop Pay分割払いバナーを生成)
product フォームまたは cart フォームに対して使用し、Shop Pay の分割払いオプションを表示するための HTML を生成するフィルター。顧客が購入時に分割払いプランを選択できるようにする。
📁 theme-liquid-docs·MIT·19 行
📘 公式リファレンス🔧 リファレンス/フィルター初級
abs フィルター(数値の絶対値を取得)
負の数を正の数に変換する。数値の絶対値(ゼロからの距離)を返すフィルター。
📁 theme-liquid-docs·MIT·30 行
📘 公式リファレンス🔧 リファレンス/フィルター初級
append フィルター(文字列の末尾に追加)
文字列の末尾に別の文字列を連結するフィルター。URL パスの結合やテキストの接尾辞追加に使う。
📁 theme-liquid-docs·MIT·30 行