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

[SLDO]

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

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

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

[株式会社ナレッジサービス · Accepted solution]

管理画面にログインして、「アクション」→「コードの編集」と進み、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]

質問失礼いたします。

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

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