Liquid Snippets by ALSEL
📘 公式リファレンス🔧 リファレンス/フィルター初級

img_url フィルター(画像CDN URLを取得)

商品、コレクション、記事などのオブジェクトに紐付いた画像のCDN URLを取得するフィルター。サイズ、トリミング位置、ピクセル密度、ファイル形式をカスタマイズできる。

用途
商品画像や記事サムネイルをHTML内に表示するとき、異なるサイズやデバイスに応じた画像URLを生成する。レスポンシブデザインやRetina ディスプレイ対応時に活用。
設置場所
Liquid テンプレート内で `{{ product.image | img_url: '480x480' }}` のように、product、collection、article など対応オブジェクトの直後に `| img_url` と記述して使用。
注意点
このフィルターは廃止予定(deprecated)のため、新規実装では `image_url` フィルターへの移行を推奨。既存コードでサイズ指定時は最大 5760×5760 px までの指定が可能だが、実務では 480×480 や 1024×1024 など名前付きサイズ(pico、icon、thumb、small、compact、medium、large、grande、original)を使うのが現実的。format パラメータで png から jpg/pjpg への変換はできるが、jpg から png への変換はできず、Shopify が自動的に WebP や AVIF などの最適形式を選択するため、多くの場合は format 指定なしで問題ない。
タグ:imagecdndeprecatedresponsiveretina

仕様

107 行 / json
{
  "category": "media",
  "deprecated": true,
  "deprecation_reason": "The `img_url` filter has been replaced by [`image_url`](/docs/api/liquid/filters/image_url).",
  "description": "You can use the `img_url` filter on the following objects:\n\n- [`article`](/docs/api/liquid/objects/article)\n- [`collection`](/docs/api/liquid/objects/collection)\n- [`image`](/docs/api/liquid/objects/image)\n- [`line_item`](/docs/api/liquid/objects/line_item)\n- [`product`](/docs/api/liquid/objects/product)\n- [`variant`](/docs/api/liquid/objects/variant)",
  "parameters": [
    {
      "description": "The desired image size.",
      "name": "size",
      "positional": true,
      "required": false,
      "types": [
        "string"
      ]
    },
    {
      "description": "The part of the image to show if the specified image has an aspect ratio that differs from the original.",
      "name": "crop",
      "positional": false,
      "required": false,
      "types": [
        "string"
      ]
    },
    {
      "description": "The desired pixel density.",
      "name": "scale",
      "positional": false,
      "required": false,
      "types": [
        "number"
      ]
    },
    {
      "description": "The desired image format.",
      "name": "format",
      "positional": false,
      "required": false,
      "types": [
        "string"
      ]
    }
  ],
  "return_type": [
    {
      "type": "string",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | img_url }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "size",
      "description": "The size parameter allows you to specify the dimensions of the image up to a maximum of 5760 x 5760 px. You can specify only the width, only the height, or both, and you can also use the following named sizes:\n\n| Name | Dimensions |\n| --- | --- |\n| `pico` | `16x16 px` |\n| `icon` | `32x32 px` |\n| `thumb` | `50x50 px` |\n| `small` | `100x100 px` |\n| `compact` | `160x160 px` |\n| `medium` | `240x240 px` |\n| `large` |`480x480 px` |\n| `grande` | `600x600 px` |\n| `original`<br>`master` | `1024x1024 px` |\n",
      "syntax": "variable | img_url: string",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | img_url: '480x' }}\n\n{{ product | img_url: 'x480' }}\n\n{{ product | img_url: '480x480' }}\n\n{{ product | img_url: 'large' }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "crop",
      "description": "The `crop` parameter allows you to specify which part of the image to show if the specified dimensions result in an aspect ratio that differs from the original. You can use the following values:\n\n- `top`\n- `center`\n- `bottom`\n- `left`\n- `right`\n\nThe default value is `center`.\n",
      "syntax": "variable | img_url: crop: string",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | img_url: crop: 'bottom' }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "format",
      "description": "Specify which file format to use for the image. The valid formats are `pjpg` and `jpg`.\n\nIt's not practical to convert a lossy image format, like `jpg`, to a lossless image format, like `png`, so this filter does\nonly the following conversions:\n\n- `png` to `jpg`\n- `png` to `pjpg`\n- `jpg` to `pjpg`\n\n> Note:\n> Shopify automatically detects which image formats are supported by the client (e.g. `WebP`, `AVIF`, etc.) and\n> selects a file format for optimal quality and file size. When a format is specified, Shopify takes into account\n> the features (e.g. progressive, alpha channel) of the specified file format when making the final automatic format selection.\n> To learn more, visit https://cdn.shopify.com/.\n",
      "syntax": "variable | img_url: format: string",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | img_url: format: 'pjpg' }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "scale",
      "description": "Specify the pixel density of the image. The valid densities are 2 and 3.",
      "syntax": "variable | img_url: scale: number",
      "path": "/products/health-potion",
      "raw_liquid": "{{ product | img_url: scale: 2 }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Returns the [CDN URL](/themes/best-practices/performance/platform#shopify-cdn) for an image.",
  "syntax": "variable | img_url",
  "name": "img_url"
}

出典・ライセンス

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