FROM CACHE - jp_header

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

解決済
nrk
Shopify Partner
3 0 0

最近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>
1 件の受理された解決策

ベストソリューション
Qcoltd
Shopify Partner
127 51 49

成功

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に実装していると思いますので、

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

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

 

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

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2
Qcoltd
Shopify Partner
127 51 49

成功

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に実装していると思いますので、

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

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

 

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

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
https://techlab.q-co.jp/
nrk
Shopify Partner
3 0 0

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

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

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

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