画像を表示させる

公開
画像を表示させる


Shopifyでの画像の表示方法を解説します。

表示のさせ方は色々ありますが構築にあたって画像の表示は絶対使うのでぜひ覚えてください！

私がよく使う画像を表示するコード

<img class="c_image" src="{{ section.settings.image | image_url: width: 800 }}" alt="{{section.settings.image.alt}}" style="vertical-align: bottom;">
view raw image-display-method-1 hosted with ❤ by GitHub

スキーマ（"type": "image_picker”）で画像を読み込んでそれを表示させています。

image_tagフィルターを使っても読み込めますが直感的にimgタグで囲ってあげた方が分かりやすいのでimgタグで出力してます。

 

上記のコードはスニペットに登録してるのですぐに出せるようにしてます。

コードの解説

パスの読み込み（src=""）

src="{{ section.settings.image | image_url: width: 800 }}"
view raw image-display-method-2 hosted with ❤ by GitHub
※section.settings.imageはスキーマのimage_pickerを読み込んでいます

画像のパスはimage_urlを使って読み込みます

また、widthかhightを指定してあげないとエラーが返されるので注意です（img_tagフィルターを使った場合のみエラーを確認、imgタグで囲む場合はエラーは出ずに出力されますがつけておきましょう）

widthかhightを指定しないとエラーが出る

widthかhightを指定しないとエラーが出る

画像サイズの指定方法はいくつかあります

{{ section.settings.image | image_url: width: 200 }}
{{ section.settings.image | image_url: height: 200 }}
{{ section.settings.image | image_url: width: 200 , height: 200 }}
view raw image-display-method-3 hosted with ❤ by GitHub
  1. 幅のみ指定（最大5760pxまで指定可能、高さは画像の寸法に基づいて自動的に計算）
  2. 高さのみ指定（最大5760pxまで指定可能、幅は画像の寸法に基づいて自動的に計算）
  3. 両方指定

オルト属性（alt=""）

alt="{{section.settings.image.alt}}”
view raw image-display-method-4 hosted with ❤ by GitHub

スキーマで画像を読み込んでいればaltプロパティで画像の代替えテキストが読み込めます。

画像の代替えテキストはここで設定できます！！

画像の代替テキストはここ

alt属性（オルト属性）とは
Webブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するために使われるものです

画像の下の余白をなくす（style="vertical-align: bottom;"）

画像下の謎の余白

Dawnだと画像の下にmarginやpaddingで消せない余白(赤枠）ができてしまうのでvertical-align: bottom;をつけておきましょう。これで謎の余白が消えます！

<!-- URLで直接 -->
<img src="https://cdn.shopify.com/s/files/hogehoge/files/doughnut.jpg?v=123456789" width="200px" height="200px" alt="" class="class1 class2">
<!-- image_url -->
{{ section.settings.image | image_url: width: 200 , height: 200 | image_tag: alt: section.settings.image.alt, class: 'class1 class2'}}
<!-- img_url -->
{{ section.settings.image | img_url: "200x" | img_tag: section.settings.image.alt, 'class1 class2' }}
<!-- file_url -->
<img src="{{'doughnut.jpg' | file_url }}" alt="" class="class1 class2">
<!-- file_img_url -->
<img src="{{'doughnut.jpg' | file_img_url: '200x200' }}" alt="" class="class1 class2">
<!-- asset_url -->
<img src="{{'doughnut.jpg' | asset_url }}" alt="" class="class1 class2">
<!-- asset_img_url -->
<img src="{{'doughnut.jpg' | asset_img_url : '200x200' }}" alt="" class="class1 class2">
view raw image-display-method-5 hosted with ❤ by GitHub
※img_urlは非推奨です(テーマによっては使われてたりします） ※file_urlやasset_urlはサイズが指定できないので使うことはないです

まとめ

他にも色々な設定ができるので公式ドキュメントぜひを見てみてください！

블로그로 돌아가기