カスタマイズページ上で画像をモバイルとWEBで分ける方法

[sana_marblanc]

prestigeのテーマを使用しています。

「rich-text」というセクション内にimageブロックがあるのですが、現状カスタマイズページでは1つの画像のみ設定できる仕様です。これを、モバイルとWEBそれぞれ選択できるように変更したいです。

他のセクションを参考に以下のコードを組んでみたのですが上手く反映されません。
（カスタマイズページには変更が反映されていますが、写真を選択してもページに表示されません）

スキーマも"image"と"mobile-image"で分けて作成していますが、他にも設定が必要でしょうか。

{%- when 'image' -%}
  {%- if section.settings.image != blank -%}
  <picture>
    {%- if section.settings.mobile_image != blank -%}
    <source
    media="(max-width: 699px)"
    srcset="{{ section.settings.mobile_image | image_url: width: '400x' }} 400w, {{ section.settings.mobile_image | image_url: width: '600x' }} 600w, {{ section.settings.mobile_image | image_url: width: '800x' }} 800w, {{ section.settings.mobile_image | image_url: width: '1000x' }} 1000w"
    width="{{ section.settings.mobile_image.width }}"
    height="{{ section.settings.mobile_image.height }}"
    >
    {%- endif -%}

    {{- section.settings.image | image_url: width: section.settings.image.width | image_tag: sizes: '100vw', widths: '200,300,400,500,600,700,800,900,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200' -}}
    </picture>
{%- endif -%}

[Jizo_Inagaki · Accepted solution]

状況の詳細が不明なのと軽く見た程度の推測に基づきますのであっているかわかりませんが、 schema の id を mobile-image で設定したのであれば section.settings.mobile_image ではなく section.settings.mobile-image になります(アンダーバーとハイフンの違い)。

原因が上記ではない場合は以下をお勧めします。

• 各部の値が意図通りに出力されているか確認する
• pictureタグの仕様について学ぶ

参考:

https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture

以上ですがよくわからない場合はエキスパートやパートナーに依頼することをお勧めします。

[sana_marblanc]

承認が遅くなり申し訳ございません。ご回答いただきありがとうございました！