craftのスライドショーでPC/spの画像の切り替えをしたい

[うつろい工房]

質問を見ていただきありがとうございます。

テーマcraftのスライドショーでPCとモバイルの画像を切り替えする方法を探して、

以下の質問を参考にしようとしたのですが、コードが違っていてどこを修正したらいいかわかりませんでした。

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/boundless%E3%81%AE%E3%82%B9%...

craftのスライドショーで同じ事は出来るでしょうか？

もし出来ない場合、他に方法があれば、教えていただけるとありがたいです。

[Qcoltd]

十分な検証をしていませんので、あくまでご参考まで。

考え方は、

参考として貼っていただいた投稿と同じです。

(1) まず、SP用画像を登録できるようにします。 セクションのslideshow.liquidの下記の記述を下記のように変更します。(300行目から400行目の間くらいにあるはずです。)

      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow.blocks.slide.settings.image.label"
        },

↓

      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow.blocks.slide.settings.image.label"
        },
        {
          "type": "image_picker",
          "id": "sp_image",
          "label": "SP用画像"
        },

(2) 次に、登録したSP用画像を表示できるようにします。セクションのslideshow.liquidの下記の記述を下記のように変更します。(100行目から200行目の間くらいにあるはずです。)

            {%- liquid
              assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
              if section.settings.image_behavior == 'ambient'
                assign sizes = '120vw'
                assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
              else
                assign sizes = '100vw'
                assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
              endif
            -%}
            {{
              block.settings.image
              | image_url: width: 3840
              | image_tag:
                loading: 'lazy',
                height: height,
                sizes: sizes,
                widths: widths
            }}

↓

            {%- liquid
              assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
              if section.settings.image_behavior == 'ambient'
                assign sizes = '120vw'
                assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
              else
                assign sizes = '100vw'
                assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
              endif
            -%}
            {{
              block.settings.image
              | image_url: width: 3840
              | image_tag:
                loading: 'lazy',
                height: height,
                sizes: sizes,
                widths: widths,
                class: 'pc'
            }}
            {%- if block.settings.sp_image -%}
              {%- liquid
                assign height = block.settings.sp_image.width | divided_by: block.settings.sp_image.aspect_ratio | round
              -%}
              {{
                block.settings.sp_image
                | image_url: width: 1000
                | image_tag:
                  loading: 'lazy',
                  height: height,
                  sizes: sizes,
                  widths: widths,
                  class: 'sp'
              }}
           {%- endif -%}

(3) そして、CSSで750px以上であればPC用画像を、749px以下であればSP画像を表示するようにします。セクションのslideshow.liquidの冒頭の下記の記述を、下記のように修正します。

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}

↓

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}

{%- style -%}
  @media screen and (max-width: 749px) {
    .slideshow__media .pc {
      display: none !important;
    }
    .slideshow__media .sp {
      display: block !important;
    }
  }

  @media screen and (min-width: 750px) {
    .slideshow__media .pc {
      display: block !important;
    }
    .slideshow__media .sp {
      display: none !important;
    }
  }
{%- endstyle -%}

(4) テーマのカスタマイズから、スライドショーにSP用画像を設定して完了です。

スライドショーの各種設定の影響などを

全く考慮していませんので、

設定の仕方によっては表示が壊れる可能性がありますし、

そもそも、

CSSで出し分けるのではなくsrcsetなどを使うべきなようにも思いますが、

そこまではしておりません。

上記を実施する前に、

元々のliquidの状態をどこかにコピーペーストして保存しておき、

問題があれば元に戻せるようにされると良いです。

ご参考まで。

(キュー田辺)

[うつろい工房]

Qcoltd様

返信いただき、ありがとうございます。

検証してみたところ、SPの画像を登録する項目は表示できました。

しかし、スライドの高さを「最初の画像に対応」にすると、画像のように高さが変になってしまいました。

どの部分を修正すれば良いか教えていただけますでしょうか。

お手数をおかけしますが、よろしくお願いいたします。