画像下にキャプションを追加する方法

[NANOKA]

商品詳細ページにおいて、画像の下に代替テキストをソースにしたキャプションを表示させたいです。サムネイルで画像を切り替えたらキャプションも切り替わるようにしたいのですが、コードの書き換えが必要でしょうか。

イメージサイト：ZOZO TOWN

[Takase_R]

はじめまして、Takaseと申します。

画像下にキャプションを追加する方法ですが、コードを追加することで実現可能です。

※テーマはDawn・バージョンはv11.0.0での実現方法になります。その他テーマで実現させたい場合は記載する方法を応用する必要がある可能性が高いです。

具体的な方法としては、

コードを編集 > セクション > main-product.liquid 内にある

  {%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }
  {%- endstyle -%}

という箇所のコードに追記して

  {%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }

    .product__media-item.grid__item.slider__slide::after{
        display:block;
        text-align: center;
        margin: 10px auto;
        font-size: 14px;
        color: #000;
    }
    .product__media-item.grid__item.slider__slide.is-active::after{
        display:block;
    }
    {% for media in product.media %}
      .product__media-list li:nth-child({{ forloop.index }}).product__media-item.grid__item.slider__slide::after{
        content: "{{ media.preview_image.alt }}";
      }
    {% endfor %}
  {%- endstyle -%}

というコードにすることで、画像下に画像altのキャプションを表示させることが可能です。

やっていることしては、下記の通りになります。

・疑似要素でキャプションを入れる場所を用意

・liquidのfor文で各画像に対応するaltをcontentの中に格納する

[NANOKA]

ありがとうございます。

ちなみにテーマはImpulseのバージョン5.5.0でした。

[Takase_R]

返信ありがとうございます。

Impulseは有料テーマであるため、具体的なファイル名やコード修正内容をお伝えするのが難しいです。

ですが実装の考え方としては、先日回答した方法の応用で問題ないとは思います。

ご自身でコーディングを行うのが難しい場合は、無料で…というのは難しいですが

プライベートメッセージなどでやりとりさせていただいた上で、コラボレーターアクセスをいただければ、具体的な修正内容をお伝えすることや代わりに対応させていただくことは可能です。

ご参考までに。

[もり]

Takase_R様
こちらの返信、大変参考になりました。
私も同じように実装してみたところ、おそらくバリエーションの画像が一番上に表示されている場合に、前の画像に次の画像のキャプションが表示されてしまう現象が起こっています。
こちらを解消する方法はありますでしょうか？

[Takase_R]

もり様

ご参考になったようで何よりです。

申し訳ないのですが、頂いた情報だけだと確実な解消方法については何とも言えないです。

forloop.index の記述を forloop.index0 に変えることでもしかすると解決するかもしれないです。