FROM CACHE - jp_header

Narrativeテーマの表示される画像をPC/SPで別々にする方法

Matsumura
新規メンバー
4 0 0

掲題の件、Narrativeのテーマのスライドショーおいて、PCとSPで表示される画像を別々に設定にしたいです。

 

過去の似たような質問に対して、技術的に専門知識がないと難しいと回答がありましたが、以下の記事を発見して試してみました。

https://qiita.com/br-to/items/ed3253bcae8db0fad398

しかし、Sectionsに作成した「image.liquid」にコードをコピペして貼ったところ「Error: Invalid JSON in tag 'schema'」というメッセージが表示されました。

貼ったコードは以下の通りです。

 

 

<picture>
  <source  class="feature-row__image-wrapper " media="(min-width: 768px)" srcset="{{ section.settings.image_pc | img_url: 'large' }}"> // 幅768px以上はsourceタグの画像を表示
  <img  class="feature-row__image-wrapper" src="{{ section.settings.image_sp | img_url: 'large'}}"/> // 幅768px未満はimgタグの画像を表示
</picture>

{% schema %}
  {
    "name": "画像切り替え",
    "settings": [
    {
          "type": "image_picker",
          "id": "image_pc",
          "label": "画像(PC)" //pc画像用のセクション定義
        }, 
        {
          "type": "image_picker",
          "id": "image_sp",
          "label": "画像(SP)" //sp画像用のセクション定義
        }
   ]
  }
{% endschema %}

①そもそもURLのやり方で画像の切り替えが可能なのか

②可能であればなぜエラーメッセージが出るのか

 

どなたかお分かりになる方はいらっしゃいますでしょうか?宜しくお願い致します。

0件の返信0