スマホverで見た際に画像が切れる

[ya_evo]

PCで設定した画像をスマホで見ても切れないようにしたいのですが

なにか方法はないでしょうか

セクションのpromotion gridにて画像を入れリンク先を入れる設定をしており

PCはきれいなのですがスマホはサイズが合わないので切れない方法、もしくは

PCとスマホで別の画像を入れる方法 等ございましたらご教示お願いいたします

テーマはImpulseを使用しております

左PC 右スマホ

[Qcoltd]

@ya_evo 様

以下、Impulse バージョン7.4.0での検証となります。

「promotion grid」を使用してバナー設置をしているとのことですが、

コードを確認してみたところ、スマホ表示の際に画像の見切れを調整することは難しそうでした。

promotion gridよりも、新しいセクションを作成してバナーを設置する方が

簡単に解決できそうでしたので、そちらをご紹介します。

---

以下の前提でセクションを作成しています。

• Desktop, mobileともに、画像は横100%表示
• 画像にリンクをつけることができる
• mobile用の画像を設定することができる
• 上記3点以外のカスタマイズは不可

手順1）

管理画面から「コードを編集」を選択

手順2）

左のサイドバーから「sections」を選択

手順3）

「新しいセクションを追加する」をクリックし、新規ページを作成する

・「liquid」を選択

・ファイル名は任意で構いません（例：full-image.liquid）

手順4）

ファイルの中身を以下に差し替える

{%- liquid
  assign has_mobile_image = false
  if section.settings.image_mobile != blank
    assign has_mobile_image = true
  endif
-%}

  {%- if section.settings.link != blank -%}
    
  {%- endif -%}
  
    {%- if section.settings.image != blank -%}

        {% if has_mobile_image %}
          {% assign desktop_classes = 'small--hide' %}
        {% else %}
          {% assign desktop_classes = '' %}
        {% endif %}
      {%- render 'image-element',
        img: section.settings.image,
        img_width: 2400,
        classes: desktop_classes,
      -%}
      
      {% if section.settings.image_mobile != blank %}
        {% assign mobile_classes = 'medium-up--hide' %}
        {%- render 'image-element',
          img: section.settings.image_mobile,
          img_height: auto,
          classes: mobile_classes,
        -%}
      {%- endif -%}
      
    {%- endif -%}
  {%- if section.settings.link != blank -%}
    
  {%- endif -%}

{% schema %}
  {
    "name": "Full Image",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "image(desktop)"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "image(mobile)"
      },
     {
        "type": "url",
        "id": "link",
        "label": "画像リンク"
      },
    ],
    "presets": [
      {
        "name": "Full Image"
      }
    ],
  }
{% endschema %}

手順5）

管理画面から先ほど作成したセクションを、表示箇所に追加する

・「Full Image」

手順6）

画像の選択やリンクの追加など必要情報を入力する

以上で、リンク付きの画像をDesktop, mobileともに見切れなしで表示させることができます。

※ 用途とあっていないセクションでしたら申し訳ありません。

ご参考まで。

（キュー長岡）