FROM CACHE - jp_header
解決済

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

morooka
観光客
6 0 1

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

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

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

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

 

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

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

よろしくお願いします。PC_SP別画像登録イメージ画像.png

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1513 544 681

成功

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

スクリーンショット 0004-04-07 17.27.41.png


方法としましては、一例ですが、上の添付のようにカスタマイズ画面から画像を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 }}">

 

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

スクリーンショット 0004-04-07 17.25.40.png

 

ページ上の任意の箇所に以下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": "圖片"
          }
        },

 

 スクリーンショット 0004-04-07 17.26.40.png

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1513 544 681

成功

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

スクリーンショット 0004-04-07 17.27.41.png


方法としましては、一例ですが、上の添付のようにカスタマイズ画面から画像を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 }}">

 

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

スクリーンショット 0004-04-07 17.25.40.png

 

ページ上の任意の箇所に以下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": "圖片"
          }
        },

 

 スクリーンショット 0004-04-07 17.26.40.png

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
morooka
観光客
6 0 1

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

SP画像設定できました!

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