FROM CACHE - jp_header
解決済

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

mw_7
Shopify Partner
9 1 0

【質問内容】

スライダーショーの画像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 = ""植物と棚>

 

スクリーンショット 2024-05-19 22.34.51.png

 

スクリーンショット 2024-05-19 22.38.59.png

 

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

 

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

1 件の受理された解決策
Jizo_Inagaki
Shopify Partner
1046 393 706

成功

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

4件の返信4

Jizo_Inagaki
Shopify Partner
1046 393 706

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

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.

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
mw_7
Shopify Partner
9 1 0

Jizo_Inagaki さん

 

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

 

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

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

 

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

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

 

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

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

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

 

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

Jizo_Inagaki
Shopify Partner
1046 393 706

成功

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
mw_7
Shopify Partner
9 1 0

Jizo_Inagakiさん

 

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

 

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