BoundlessのスライドショーをPC/SPで異なる画像を登録

[morooka]

Boundlessのテーマを使用しております。

PCとSPで異なる画像を作成し、スライドショーにそれぞれ登録したいと思っております。

当方liquid初心者のためどのデータにどのようなコードを入れればよいか教えてほしいです。

お分かりになる方いらっしゃいましたらお願いいたします。

ざっくりとしたイメージ画像を貼りますが、あくまでイメージです。

スライドショー登録画面でPCとSPそれぞれを登録できればどんな操作感でも構いません。

よろしくお願いします。

[株式会社フルバランス · Accepted solution]

新たに「画像スライド」を追加するのではなく、
「画像スライド」内でPC,SPの画像を選択できるようにするのはいかがでしょうか？

方法としましては、一例ですが、上の添付のようにカスタマイズ画面から画像を2枚(PC表示用とSP表示用)指定できるようにし、cssでブレイクポイントを設定し、PC画像とSP画像の表示を出し分ける方法があります。

具体的には「slideshow.liquid」に以下のコードを追加することで実装可能です。

①92行目の{% assign img_url・・・　の下に下記コードを追加

{% assign img_url_sp = block.settings.hero_slide_sp | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

②93行目のimgタグに任意のクラス名を追加

(ここでは「pc-only」としています。pcとspで画像を出し分ける時に使用)

<img class="hero__image hero__image--{{ block.id }} lazyload{% unless forloop.first == true %} lazypreload{% endunless %} pc-only"
              {%- if forloop.first == true -%}
                src="{{ block.settings.hero_slide | img_url: '300x' }}"
              {%- endif -%}
              data-src="{{ img_url }}"
              data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
              data-aspectratio="{{ block.settings.hero_slide.aspect_ratio }}"
              data-sizes="auto"
              data-parent-fit="cover"
              alt="{{ block.settings.hero_slide.alt | escape }}"
              style="object-position: {{ block.settings.image_position }}">

③上記imgタグを複製して下の行に追加し、「pc-only」を異なるクラス名に変更する

(ここでは「sp-only」としています)

data-src="{{ img_url }}”の部分をdata-src="{{ img_url_sp }}”に変更する

(①で代入したSP用画像のurlを指定)

<img class="hero__image hero__image--{{ block.id }} lazyload{% unless forloop.first == true %} lazypreload{% endunless %} sp-only"
              {%- if forloop.first == true -%}
                src="{{ block.settings.hero_slide | img_url: '300x' }}"
              {%- endif -%}
              data-src="{{ img_url_sp }}"
              data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
              data-aspectratio="{{ block.settings.hero_slide.aspect_ratio }}"
              data-sizes="auto"
              data-parent-fit="cover"
              alt="{{ block.settings.hero_slide.alt | escape }}"
              style="object-position: {{ block.settings.image_position }}">

①~③を追加した時のコード

④ページ上の任意の箇所に以下cssを指定(ブレイクポイントは任意の箇所で)

@media screen and (min-width: 750px) {
  .slick-slide img.sp-only {
    display: none;
  }
}
@media screen and (max-width: 749px) {
  .slick-slide img.pc-only {
    display: none;
  }
} 

⑤スキーマタグ({% schema %} ~ {% endschema %})内に下記コードを追加

(このコードを追加することで、カスタマイズ画面からSP用の画像を選択できるようになります。追加箇所は添付画像を参照してください)

　　　　　　　　　　　　　　{
          "type": "image_picker",
          "id": "hero_slide_sp",
          "label": {
            "cs": "Obrázek",
            "da": "Billede",
            "de": "Foto",
            "en": "SP Image",
            "es": "Imagen",
            "fi": "Kuva",
            "fr": "Image",
            "it": "Immagine",
            "ja": "SP画像",
            "ko": "이미지",
            "nb": "Bilde",
            "nl": "Afbeelding",
            "pl": "Obraz",
            "pt-BR": "Imagem",
            "pt-PT": "Imagem",
            "sv": "Bild",
            "th": "รูปภาพ",
            "tr": "Görsel",
            "vi": "Hình ảnh",
            "zh-CN": "图片",
            "zh-TW": "圖片"
          }
        },

 

[morooka]

返信が遅くなり申し訳ありません。

SP画像設定できました！

ご丁寧な説明とコードありがとうございます。