悩む人
動的に画像を複数枚追加するにはどう書けばいいのかな?
その疑問に答えます。
shopifyではliquid(リキット)とschema(スキーマ)を組み合わせて実現させます。
詳しく見ていきましょう!!
まず全体像を把握
<section class="hero hero-home no-padding">
<!-- Hero Slider-->
<div class="owl-carousel owl-theme hero-slider">
{% for block in section.blocks %}
<div style="background-image: url({{block.settings.slide_image | img_url: 'master'}});" class="item d-flex align-items-center has-pattern">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>Hub</h1>
<ul class="lead">
<li><strong>Bootstrap 4 E-commerce</strong> template</li>
<li><strong>24</strong> pages, <strong>6</strong> colour variants</li>
<li><strong>SCSS</strong> sources </li>
<li>frequent & <strong>free updates</strong></li>
</ul><a href="#" class="btn btn-template wide shop-now">Shop Now<i class="icon-bag"> </i></a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% schema %}
{
"blocks":[
{
"type": "text",
"name": "Slider",
"settings": [
{
"id":"slide_image",
"type":"image_picker",
"label":"Slider Image"
}
]
}
]
}
{% endschema %}
上記が、動的に画像を選択できるコードの全体像です。
以下に注目します。
{% schema %}
{
"blocks":[
{
"type": "text",
"name": "Slider",
"settings": [
{
"id":"slide_image",
"type":"image_picker",
"label":"Slider Image"
}
]
}
]
}
{% endschema %}
この記述で、カスタマイズ項目を作り出しています。
管理者がポチポチと設定するメニュー項目のことです。↓

次は、以下に注目します。
{% for block in section.blocks %}
<div style="background-image: url({{block.settings.slide_image | img_url: 'master'}});" class="item d-flex align-items-center has-pattern">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>Hub</h1>
<ul class="lead">
<li><strong>Bootstrap 4 E-commerce</strong> template</li>
<li><strong>24</strong> pages, <strong>6</strong> colour variants</li>
<li><strong>SCSS</strong> sources </li>
<li>frequent & <strong>free updates</strong></li>
</ul><a href="#" class="btn btn-template wide shop-now">Shop Now<i class="icon-bag"> </i></a>
</div>
</div>
</div>
</div>
{% endfor %}
{% for block in section.blocks %}
{% endfor %}
の繰り返し処理の間に
div style="background-image: url({{block.settings.slide_image | img_url: 'master'}});" class="item d-flex align-items-center has-pattern">
があると思います。
ここに、管理者が選択した画像が動的に入ってきます。
特に重要な記述は以下です。
{{block.settings.slide_image | img_url: 'master'}}
これはliquidの出力表記で、今回の場合画像を出力しています。
まとめ
複数の画像を動的に出力する方法をご紹介しました。
何かわからないなと思ったら下のツイッターからお問合せください!