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

shopify img_url size

 

こんにちは、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のサイズ一覧です。

 

名前 実際のサイズ(px)
pico 16 × 16
icon 32 × 32
thumb 50 × 50
small 100 × 100
compact 160 × 160
medium 240 × 240
large 480 × 480
grande 600 × 600
original 1024 × 1024

 

つまり

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

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

 

img_urlの画像サイズ調整方法

 

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

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

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

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

記述方法 内容
width × height 幅、高さ共に指定
width × 幅のみ指定で、高さは自動
× height 高さのみ指定で、高さは自動

 

例えば、、

{{ ‘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上の画像調整で何か問題があったのだと思います。その問題がこの記事で解決すれば幸いです。もし解決しなかった場合はコメント等でご相談ください。

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