前作Shopify Liquid言語 CSS上でLiquidを使う方法の続き？
というか、画像を読み込むときのフィルタ、asset_urlフィルタについて
imgタグ→asset_url
画像をassets/から読み込む。
読み込む画像ファイルはassets直下にないといけない。フォルダとかもつくっちゃだめ！！
assetsフォルダの中が大変なことになってるけど仕方ないらしい！
<img src= "url" alt="">
<img src="{{ "url" | asset_url }}" alt="">
|asset_url はliquidのurlフィルターの一つ。フィルターによって出力結果を変えることができる。
asset_url
Returns the URL of a file in the "assets" folder of a theme.(Google翻訳)テーマの「assets」フォルダー内のファイルのURLを返します。
Shopify公式- filters/url-filters
ちなみに
urlフィルターの機能は他にも似たようなのがたくさんある。global_asset_url、file_url、img_urlとか。下のlink_toもurlフィルターの一種。
特に、上記のコードは画像のurlがほしかったので、「asset_urlとasset_img_urlとどっち使うんだ？
」と悩んだ。ので、
それについて少しだけメモ。
asset_img_url
Returns the asset URL of an image in the "assets" folder of a theme.
accepts an image size parameter .
こっちはassetsフォルダ内の画像ファイルのurlを返す。
あと、画像のサイズのパラメータを受け取ることができる。
（今回は、画像のサイズは別で指定していたので、問題なさそうなのでasset_urlにした。ホントはだめかも
）
逆に画像ではない場所で、asset_img_urlを使ったらどうなるか？
assetsフォルダ内の、元々はasset_urlフィルタで呼んでいたcssに対して試してみた。
すると、見事にcssが崩れ、ソースを表示すると<link href...>の形をとっていなかったので、
画像じゃないとこにasset_img_urlを使うのはだめ！学んだ
link_to
aタグ的な役割だけど、、、
クラスつけたりとかHTMLを構えないらしい。
外側にタグつけてそこにスタイルを適用して対応した。
<a href="リンク先url">text</a>
↓
{{ 'text' | link_to:"リンク先url"}}