FROM CACHE - jp_header

Debutのスライドショーの画像に直接リンクをつけたい

解決済
SLDO
観光客
6 0 2

Debutの標準装備のスライダーを、画像を直接クリックしてリンクに飛ばせるようにしたいです。

デフォルトだとボタンを設置しないとリンクに飛ばせない仕組みになっているので、非常に困っています。

セクションのliquidにどのような記述をすればブロックとして追加できますか?

1 件の受理された解決策

ベストソリューション
鎌田威
遊覧客
36 15 20

成功

管理画面にログインして、「アクション」→「コードの編集」と進み、Sectionsフォルダ内のslideshow.liquidファイルを選択してください。

 

  "zh-TW": "圖片"
 }
},
{
"type": "select",

上記のコードを探して、次のように変更します。

 

  "zh-TW": "圖片"
 }
},
{
 "type": "url",
 "id": "image_url",
 "label": "URLを入力"
},
{
"type": "select",

 

次に、下記のコードを探します。

<div
  {% unless block_image.alt == blank %}
  role="img"
  aria-label="{{ block_image.alt | escape }}"
  data-alt="{{ block_image.alt | escape }}"
  {% endunless %}
  class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
  data-bg="{{ block_image | img_url: '300x300' }}"
  data-bgset="{% include 'bgset', image: block_image %}"
  data-sizes="auto"
  data-parent-fit="contain"
  style="background-position: {{ block.settings.alignment }};"
  data-image-loading-animation>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>

 

上記のコードを、次のように書き換えたら「保存」をクリックします。

 <a href="{{ block.settings.image_url }}">
  <div
      {% unless block_image.alt == blank %}
      role="img"
      aria-label="{{ block_image.alt | escape }}"
      data-alt="{{ block_image.alt | escape }}"
      {% endunless %}
      class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
      data-bg="{{ block_image | img_url: '300x300' }}"
      data-bgset="{% include 'bgset', image: block_image %}"
      data-sizes="auto"
      data-parent-fit="contain"
      style="background-position: {{ block.settings.alignment }};"
      data-image-loading-animation>
    {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
  </div>
</a>

 

これで「画像スライド」の設定項目にURLの入力欄が追加されていると思います。

 

※コード編集の経験がない場合は、専門の業者に依頼されることをお勧めします。

 

 

元の投稿で解決策を見る

2件の返信2
鎌田威
遊覧客
36 15 20

成功

管理画面にログインして、「アクション」→「コードの編集」と進み、Sectionsフォルダ内のslideshow.liquidファイルを選択してください。

 

  "zh-TW": "圖片"
 }
},
{
"type": "select",

上記のコードを探して、次のように変更します。

 

  "zh-TW": "圖片"
 }
},
{
 "type": "url",
 "id": "image_url",
 "label": "URLを入力"
},
{
"type": "select",

 

次に、下記のコードを探します。

<div
  {% unless block_image.alt == blank %}
  role="img"
  aria-label="{{ block_image.alt | escape }}"
  data-alt="{{ block_image.alt | escape }}"
  {% endunless %}
  class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
  data-bg="{{ block_image | img_url: '300x300' }}"
  data-bgset="{% include 'bgset', image: block_image %}"
  data-sizes="auto"
  data-parent-fit="contain"
  style="background-position: {{ block.settings.alignment }};"
  data-image-loading-animation>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>

 

上記のコードを、次のように書き換えたら「保存」をクリックします。

 <a href="{{ block.settings.image_url }}">
  <div
      {% unless block_image.alt == blank %}
      role="img"
      aria-label="{{ block_image.alt | escape }}"
      data-alt="{{ block_image.alt | escape }}"
      {% endunless %}
      class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
      data-bg="{{ block_image | img_url: '300x300' }}"
      data-bgset="{% include 'bgset', image: block_image %}"
      data-sizes="auto"
      data-parent-fit="contain"
      style="background-position: {{ block.settings.alignment }};"
      data-image-loading-animation>
    {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
  </div>
</a>

 

これで「画像スライド」の設定項目にURLの入力欄が追加されていると思います。

 

※コード編集の経験がない場合は、専門の業者に依頼されることをお勧めします。

 

 

COLA-KUN
Shopify Partner
18 0 2

質問失礼いたします。

テーマDawnでも同様の編集は可能でしょうか?

ご教授いただけますと幸いです。