「スライダーショー」のセクションの、画像alt 出力について【テーマ：Dawn】

[mw_7]

【質問内容】

スライダーショーの画像alt を 出力している箇所が見つからず、どのコードによって、alt が出力されているのでしょうか？

＜該当箇所＞

テーマ：Dawn

ファイル：section / slideshow.liquid（130行目〜154行目）

コード確認時期：2024年5月19日

＜確認したこと＞

・以下コードは、スライドショーを作っているコードですが、その中に「alt」の表記を探したのですがありませんでした。

・ソースコードでは、alt の内容が出力されていることを確認しました。

        <div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
          {%- if block.settings.image -%}
            {%- liquid
              assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
              if section.settings.image_behavior == 'ambient'
                assign sizes = '120vw'
                assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
              else
                assign sizes = '100vw'
                assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
              endif
            -%}
            {{
              block.settings.image
              | image_url: width: 3840
              | image_tag:
                loading: 'lazy',
                height: height,
                sizes: sizes,
                widths: widths
            }}
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>

上記のコードの中で、以下の部分が「alt」を出していそうだと思ったのですが、やはりalt が見当たりませんでした。

            {{
              block.settings.image
              | image_url: width: 3840
              | image_tag:
                loading: 'lazy',
                height: height,
                sizes: sizes,
                widths: widths
            }}

＜出力されている alt = ""植物と棚＞

お手数お掛けしますが、ご回答いただけますと幸いです。

何卒よろしくお願い致します。

[Jizo_Inagaki]

下記ドキュメントの記述の通りかなと思います。

https://shopify.dev/docs/api/liquid/filters/image_tag#image_tag-alt

>By default, the alt attribute of the <img> tag is set to the media alt text, or the resource title for article, collection, line item, product, and variant images. However, you can override this default, or set the value if there's no default.

[mw_7]

Jizo_Inagaki さん

ご回答いただきありがとうございます！

>下記ドキュメントの記述の通りかなと思います。

https://shopify.dev/docs/api/liquid/filters/image_tag#image_tag-alt

ドキュメント、拝見させていただきました。

日本語訳の通りになりますが、

・<img>タグが出力されると、alt も一緒に出力される。

・そこに画像のaltテキストが入る。

・または記事、コレクション、ラインアイテム、商品、バリアント画像のリソースタイトルがaltに入る。

という理解でよろしかったでしょうか？

[Jizo_Inagaki · Accepted solution]

概ね合っているのではと思いますが、実際の動作をご自身で確認されることをお勧めします。

[mw_7]

Jizo_Inagakiさん

実際の動作を確認したところ合っておりました！

ご回答いただきありがとうございました。