FROM CACHE - jp_header
解決済

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

sana_marblanc
観光客
4 0 1

 

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 -%}

1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
1006 380 697

成功

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

 

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

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

 

参考:

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

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2

Jizo_Inagaki
Shopify Partner
1006 380 697

成功

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

 

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

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

 

参考:

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

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
sana_marblanc
観光客
4 0 1

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