asset_url、img_url、file_urlの違い

Shopifyの良いところはLiquidのurlフィルターが豊富な点が挙げられます。フィルターによって出力結果を変えることができ、とても便利です。

今回はurlフィルターで似ているもの違いを紹介します。

asset_url

Shopifyオブジェクトに紐付いていない画像を追加したいときに使用するフィルターです。実際に追加する場所は、

管理画面＞オンラインストア＞テーマ＞アクション＞コードの編集＞assetディレクト

です。

asset_urlはこのディレクトリ内を参照でき、画像だけでなく、css、pdf、javascriptファイルにも使用することができます。

コーディング

    {{ 'styles.css' | asset_url | stylesheet_tag }}

出力結果

link href="//cdn.shopify.com/s/files/1/0635/2987/7728/t/1/assets/styles.css&v=4785513365591119845" rel="stylesheet" type="text/css" media="all" /

asset_img_urlというのもあります。 これを使うと、サイズやトリミングが指定できます。

{{ 'logo.png' | asset_img_url: '300x', crop: 'center' }}

img_url

img_urlフィルターは、Shopifyオブジェクトの画像出力用で、オブジェクトに関連付けてある画像を出力できます。

具体的には、

• product
• collection
• article

コード

{{ product | img_url: '720x720', scale: 2 , format: 'jpg' }}

file_url

管理者が簡単に画像をアップロードしたい場合にこのフィルターを使用します。 ストア＞設定＞ファイルで、ファイルアップロードしたものを習得できます。asset_urlと同じく、画像データに限らず他のデータも出力することができます。

{{ 'document.pdf' | file_url }}

file_urlにも画像専用のフィルターが用意されており、サイズ、トリミングの指定が可能です

    {{ 'about.png' | file_img_url: '512x512' }}

以上が3つの違いの紹介でした。