Liquid Snippets by ALSEL
📘 公式リファレンス📦 リファレンス/オブジェクト中級

focal_point オブジェクト

画像のフォーカルポイント(焦点位置)を管理するオブジェクト。テーマがトリミング時にもフォーカルポイントが画面内に収まるよう指定できる。

用途
商品画像やヒーロー画像を異なるアスペクト比でクロップしても、被写体の重要な部分が常に見えるようにするとき。image_tag フィルタと組み合わせて CSS の object-position で自動適用する。
設置場所
Liquid 内で `{{ image_presentation.focal_point }}` または `{{ image_presentation.focal_point.x }}` / `{{ image_presentation.focal_point.y }}` の形で参照する。通常は image_tag フィルタの引数として渡し、自動的に object-position CSS を適用される。
注意点
フォーカルポイントが未設定の場合、x と y は両方とも 50(画像中央)をデフォルト値として返す。この座標は画像幅・高さに対するパーセント値(0~100)として扱われるため、CSS の object-position に直接渡す際は「X% Y%」の文字列フォーマットに変換する必要がある。image_tag フィルタを使うと自動的に適切な形式に変換されるため、その使用が推奨される。
タグ:imagefocal-pointresponsive-imagecropobject-position

仕様

69 行 / json
{
  "access": {
    "global": false,
    "parents": [
      {
        "object": "image_presentation",
        "property": "focal_point"
      }
    ],
    "template": []
  },
  "deprecated": false,
  "deprecation_reason": "",
  "description": "The focal point will remain visible when the image is cropped by the\ntheme. [Learn more about supporting focal points in your theme](https://shopify.dev/themes/architecture/settings/input-settings#image-focal-points).\n\n> Tip:\n> Use the [`image_tag`](/docs/api/liquid/filters/image_tag) filter to automatically apply focal point settings to an\n> image on the storefront. This applies the focal point using the `object-position` CSS property.",
  "properties": [
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The horizontal position of the focal point, as a percent of the image width. Returns `50` if no focal point is set.",
      "name": "x"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The vertical position of the focal point, as a percent of the image height. Returns `50` if no focal point is set.",
      "name": "y"
    }
  ],
  "summary": "The focal point for an image.",
  "name": "focal_point",
  "examples": [
    {
      "name": "Referencing the `focal_point` object directly",
      "description": "When a `focal_point` object is referenced directly, the coordinates are returned as a string, in the format `X% Y%`.\n",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ images['potions-header.png'].presentation.focal_point }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "json_data": {
    "path": "",
    "handle": "",
    "data_from_file": ""
  },
  "return_type": []
}

出典・ライセンス

License:
MIT

このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

関連項目

📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_header オブジェクト

Shopify が必要とするスクリプト(分析・チェックアウト・言語設定など)をすべて動的に出力するオブジェクト。theme.liquid の <head> タグ内に埋め込む必須要素。

📁 theme-liquid-docs·MIT·20
📘 公式リファレンス📦 リファレンス/オブジェクト中級

metaobjects オブジェクト

ストア全体のメタオブジェクト定義にアクセスするグローバルオブジェクト。個別のメタオブジェクトはタイプとハンドルで参照でき、メタオブジェクト定義のエントリをループで反復処理できる。

📁 theme-liquid-docs·MIT·20
📘 公式リファレンス📦 リファレンス/オブジェクト初級

additional_checkout_buttons オブジェクト

PayPal Express Checkout など、オフサイト決済に対応した外部決済プロバイダーがストアに設定されているかを真偽値で返す。`content_for_additional_checkout_buttons` と組み合わせて、該当するチェックアウトボタンを条件付きで表示する。

📁 theme-liquid-docs·MIT·27
📘 公式リファレンス📦 リファレンス/オブジェクト初級

canonical_url オブジェクト

現在のページの正規 URL を取得するオブジェクト。Google などの検索エンジンに対してどのページ版が正規であるかを指定するために使用する。

📁 theme-liquid-docs·MIT·27
📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_index オブジェクト

ホームページに表示するセクションの内容を動的に返すオブジェクト。Liquid インデックステンプレートで必ず使用する。

📁 theme-liquid-docs·MIT·27
📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_additional_checkout_buttons オブジェクト

PayPal、Apple Pay、Google Pay など複数の決済プロバイダが有効になっているとき、その決済ボタンを HTML として出力するオブジェクト。`additional_checkout_buttons` で有無を判定したうえで、このオブジェクトで実際のボタンを表示する。

📁 theme-liquid-docs·MIT·27