独自セクション 画像サイズを画面いっぱいにしたい

[nrk]

最近syopifyのテーマ開発の勉強を始めたものです！

トップページにキービジュアルの画像をはめ込むセクションを作って、pcの時とspの時で別の表示画像を切り替えれるようにしたいです。

pictureタグを使って画像切り替えを行おうと思っているのですが、img_urlで画面いっぱいの表示を指定する時はどうすればいいでしょうか？

<picture>

<source class="feature-row__image-wrapper " media="(min-width: 768px)" srcset="{{ section.settings.image_pc | img_url:''}}">

<img class="feature-row__image-wrapper" src="{{ section.settings.image_sp | img_url: '' }}"/>

</picture>

[Qcoltd · Accepted solution]

img_url は image_url に変更されたようですね。

https://shopify.dev/api/liquid/filters/deprecated-filters#img_url

では、image_urlを、

Shopify自身がどのように使用しているかを、

dawn 5.0のコードから確認しますと下記のようです。

https://github.com/Shopify/dawn/blob/main/sections/image-banner.liquid#L48

      {{ section.settings.image | image_url: width: 1500 | image_tag:
        loading: 'lazy',
        width: section.settings.image.width,
        height: image_height,
        class: image_class,
        sizes: sizes,
        widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
        alt: section.settings.image.alt | escape
      }}

また、

image_url の公式なドキュメントは下記です。

https://shopify.dev/api/liquid/filters/media-filters#image_url

クライアント(ブラウザ)からサーバ(Shopify)にページのリクエストがあり、

サーバサイドで、liquidが解釈されてHTMLがレンダリングされる際に、

サーバサイド(Shopify)側では、

ページをリクエストしたクライアント(ブラウザ)の横幅は分からないと思われます。

そうしますと、

サーバサイド(liquid)では、"ブラウザの最大幅"を指定をすることはできなさそうです。

Dawn 5.0ではどうしているかというと、

widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',

というようにしています。

この記述は下記のように展開されますので、

https://shopify.dev/api/liquid/filters/html-filters#widths

3000pxや3840pxのような大きな画像をsrcsetに追加するようにしているようですね。

何か最適な方法があればShopifyがDawnに実装していると思いますので、

そうしていないということは、

これがストレートな解決方法なのだと思われます。

ご期待に添えるような回答か怪しいですが、

ご参考まで。

(キュー田辺)

[nrk]

返信くださりありがとうございます！

自動でブラウザの横幅は取れないんですね、、

シンプルにdivで囲ってcss記入するので狙いたいことはできました！

ご教授いただきありがとうございました。