目次
assetsファイル内に保存した画像ファイルはassetimgurlタグを使用して、以下のように呼び出すことができます。
上記の場合はassetsファイルに入っている《main-img.png》の画像をwidth:250px × height:250pxで表示することができます。
画像サイズの指定
先ほどのコード内の'250x250'部分を変更することで、様々なサイズを指定することも可能です。
指定用のコードは以下の通りです。
横幅と高さを両方指定
< img src="{{ 'main-img.png' | asset_img_url: '250x250' }}" alt="">
width×heightで画像のサイズを指定することが出来ます。
横幅のみを指定
widthのみを指定することができます。
上記の場合、heightはautoとなり画像比率に合わせて自動で高さが算出されます。
高さのみを指定
< img src="{{ 'main-img.png' | asset_img_url: 'x250' }}" alt="">
heightのみを指定することができます。
上記の場合、widthはautoとなり画像比率に合わせて自動で横幅が算出されます。
規定の画像サイズを指定
Liquidでは、いくつかの規定サイズが用意されています。
サイズを統一したい画像などは規定サイズを使用すると便利です。
pico 16px × 16px
< img src="{{ 'main-img.png' | asset_img_url: 'pico' }}" alt="">
icon 32px × 32px
< img src="{{ 'main-img.png' | asset_img_url: 'icon' }}" alt="">
thumb 50px × 50px
< img src="{{ 'main-img.png' | asset_img_url: 'thumb' }}" alt="">
small 100px × 100px
< img src="{{ 'main-img.png' | asset_img_url: 'small' }}" alt="">
compact 160px × 160px
< img src="{{ 'main-img.png' | asset_img_url: 'compact' }}" alt="">
medium 240px × 240px
< img src="{{ 'main-img.png' | asset_img_url: 'medium' }}" alt="">
large 480px × 480px
< img src="{{ 'main-img.png' | asset_img_url: 'large' }}" alt="">
grande 600px × 600px
< img src="{{ 'main-img.png' | asset_img_url: 'grande' }}" alt="">
original 1024px × 1024px
< img src="{{ 'main-img.png' | asset_img_url: 'original' }}" alt="">
master 実サイズ
< img src="{{ 'main-img.png' | asset_img_url: 'master' }}" alt="" >
※assetsファイルに保存したそのままのサイズで表示されます。
まとめ
またド忘れした際に訪れていただけますと嬉しいです。
