dawnのコレクションリストに背景画像を作り、PC用とスマホ用に切り替えるようにしたい。

[Knysk08]

dawnのコレクションリストに背景画像を作り、PC用とスマホ用に背景画像を切り替えるようにしたいのですが、

どのような施策をすれば良いのでしょうか。

自分が思ったのが、schemaでPCとスマホ用を作成し、

{

"type": "image_picker",

"id": "img-background",

"label": "t:sections.collection-list.settings.img-background.label"

},

{

"type": "image_picker",

"id": "img-background_sp",

"label": "t:sections.collection-list.settings.img-background_sp.label"

},

↓一番外枠に画像を読み込むように考えたのですが、

<div class="collection-list__image collection-list__image__sub color-{{ section.settings.color_scheme }} gradient " style="background-image: url('{{ section.settings.img-background | img_url: 'master' }}');" >

PC用の背景画像は読み込むようにできたものの、

スマホ用をどのようにして読み込むようにするのかがわからなくて

このようなやり方ではなく、違うやり方があるのでしょうが・・・

調べてもどのようにすれば良いのかわからなくて、わかる方教えていただけると幸いです。

あまり詳しくないので説明が上手くできていないかもですが、よろしくお願いいたします。

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

質問拝見しました。

スキーマで二つの画像を選べるようにしているところまでは問題ございません！

あとはスマホのサイズの時に画像を切り替えるようにしてあげればいいので以下手順でおすすめします。

 HTMLに両方の画像を適用

HTMLにPC用とスマホ用の画像を分けて適用します。

ここではデフォルトでPC用の画像を表示し、スマホサイズでスマホ用の画像を適用するCSSを使います。

<div class="collection-list__image color-{{ section.settings.color_scheme }} gradient"
style="background-image: url('{{ section.settings.img_background | img_url: 'master' }}');"
data-bg-sp="{{ section.settings.img_background_sp | img_url: 'master' }}">
</div>

 

CSSでメディアクエリを使ってスマホ用の画像を切り替える

CSSでメディアクエリを使用して、スマホサイズ時にdata-bg-sp属性を利用して背景画像を変更します。

css

.collection-list__image {
  background-size: cover;
  background-position: center;
}

@media screen and (max-width: 768px) {
  .collection-list__image {
    background-image: url(var(--bg-sp));
  }
}

JavaScriptでスマホ用背景画像を動的に読み込む

Liquidの出力はCSSに直接変数を渡せないため、JavaScriptを使ってスマホ用背景画像を動的に読み込みます。

javascript

document.addEventListener('DOMContentLoaded', function () {
  const bgElements = document.querySelectorAll('.collection-list__image');
  bgElements.forEach(el => {
    const bgSp = el.getAttribute('data-bg-sp');
    if (window.matchMedia('(max-width: 768px)').matches && bgSp) {
      el.style.setProperty('background-image', `url(${bgSp})`);
    }
  });
});

上記のコード、css、JavaScriptで画像の切り替えが可能かと思いますので参考にしていただけますと幸いです、

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

[Knysk08]

株式会社フルバランス様。

返信ありがとうございます！！

アドバイス頂いた内容にご質問がございます。

javascriptの文章はどのあたり記載すればいいのでしょうか??

コレクションリスト内にjavascriptを載せる？のでしょうか？

詳しくない者なので初歩的な質問で申し訳ございませんが教えてください。

よろしくお願いいたします。

[Knysk08]

株式会社フルバランス様。

度々の質問失礼いたします。

自分がやってみたことなのですが、

まずjavascriptを読み込む為にassetsに専用ファイルを作り(background-image.jsを作り)、

そしてコレクションリストの上のところにjavascriptを読み込むようにして

<script src="{{ 'background-image.js' | asset_url }}" defer="defer"></script>

読み込むようにするかと思い、トライしてみたのですが

画像がスマホサイズすると背景画像がNO IMAGEと表示されます。

スマホ画像を表示する為に使用するurl(var(--bg-sp));に対して何か施策が必要なのでしょうか？

それとも自分が行ったやり方ではなくjavascriptiを読み込むようにするのでしょうか？？

度々の質問となり、お手数をおかけしますが教えて下さい！！

よろしくお願い致します。

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

これを表示しているセクションファイル内に<script>タグで囲って記述で問題ございません。

そうすれば別でjsのファイルを作るなどせずに対応できるかと思います。

<script>
先ほどのjsコード
</script>

ご確認よろしくお願いいたします。