[Shopify] liquidでimg_urlタグの画像サイズを調整する方法

こんにちは、ECペンギンです！

ECサイトを運営していく上で、画像の管理ってめちゃくちゃ大事ですよね。しかし、画像を挿入しても中々上手く調整できない時ってありませんか？？

もっと画像を小さくしたい！あぁ、それじゃ枠におさまってない！など、結構ストレスを抱えている人も多いのではないでしょうか。

今回はそんなストレスフルな？ Shopify上の画像サイズの調整方法および、カスタマイズ方法について書いていきます！

Shopifyのimgタグとは

最初にimgタグの概要を説明します。すでにご存知の方は読み飛ばしてくださいいい。

こんな感じのやつです。

     
{{ product.featured_image | product_img_url: 'medium' }}

まず使い所は、liquidファイルの中です。liquidファイルの中で画像を挿入したい際に使います。

ちなみに

{{ 'shopify-logo.png' | asset_img_url: '300x300' }}
    

このコードは、、

     
     
//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_300x300.png?42
    
    

こうなります。（Shopify 公式docs）

使用方法としては、
【前半】に適用する画像を記述し、
【後半】にimg_urlのサイズを記述していく。
という流れです。

{{ product.featured_image | product_img_url: ‘medium’ }}

{{ product.featured_image | product_img_url: ‘large’ }}

{{ product.featured_image | product_img_url: ‘grande’ }}

しかし、このサイズmediumとかlargeとかgrande（スタバかよ）って実際どれくらいのサイズなのか？？というのが疑問でしたので今回まとめることに致しました。

img_urlのサイズまとめ

いよいよ本題。img_urlのサイズ一覧です。

つまり

{{ product.featured_image | product_img_url: ‘large’ }}

だと480px × 480pxの画像が生成されるわけです。

img_urlの画像サイズ調整方法

次にshopifyのimg_urlで任意の画像サイズに変更する方法です。

上記のサイズ一覧では、対応できない。ぴったり幅213px、高さ123pxにしたい！って時ありますよね。

そんな時は任意のサイズにカスタマイズしてしまいましょう。

画像サイズの調整方法はこちら。

例えば、、

{{ ‘widthandheight.jpg’ | asset_img_url: ‘213×123’ }}

にすると幅213px、高さ123pxになります。

{{ ‘widthandheight.jpg’ | asset_img_url: ‘213x’ }}

幅のみを213pxに指定すれば、高さは自動算出。

逆に高さのみを指定すれば高さ123pxで、幅は自動になります。

{{ ‘widthandheight.jpg’ | asset_img_url: ‘x123’ }}

これめちゃくちゃ便利じゃないですか？さすが、shopify？liquid？

最後に画像調整のちょっとした便利技

最後にもしかしたら使うかもしれない、liquid img tagのちょっとした小技です。

cropで画像を寄せる

入れたいところにちゃんと画像がfitしない場合ってありますよね。

寄りたいところ、そこじゃないっっっっ！ってなったことって絶対あると思うんです。そんな時は、cropで中央寄せ、上寄せ etc できます。CSSで言うところのbackground-positionみたいな感じですかね。

使い方はこちら。

{{ product.featured_image | img_url: '450x450', crop: 'center' }}

コンマの後に、crop+ ‘寄せたい方法’ を記述するだけです。

使えるcrop方法は

• top
• center
• bottom
• left
• right

の5つです。

scaleで画像を拡大させる

最後に、画像自体のサイズを拡大する方法です。単純に450px×450pxの画像を2倍に拡大すると900px×900pxの画像になります。それが、liquidを使えば簡単にできるのです。（そもそも900px×900pxで最初から指定しまえば済むじゃない。と言ってしまったらおしまいですが。。笑）

使用方法は

{ product.featured_image | img_url: '450x450', crop: 'center', scale: 2 }}

最後に scale: 2 と追記するのみです。

ちなみにこちらのscaleは100倍とかできなくて

• 2
• 3

の2倍、3倍しか使えませんのでご注意ください。

shopifyで画像サイズを調整する方法まとめ

いかがだったでしょうか。

おそらくこの記事まで来ていただいたということは、何かしらshopify上の画像調整で何か問題があったのだと思います。その問題がこの記事で解決すれば幸いです。もし解決しなかった場合はコメント等でご相談ください。

解決できるかは分かりませんが、一緒に考えてみましょう笑