Liquid、JavaScriptなどに関する質問
最近syopifyのテーマ開発の勉強を始めたものです!
トップページにキービジュアルの画像をはめ込むセクションを作って、pcの時とspの時で別の表示画像を切り替えれるようにしたいです。
pictureタグを使って画像切り替えを行おうと思っているのですが、img_urlで画面いっぱいの表示を指定する時はどうすればいいでしょうか?
解決済! ベストソリューションを見る。
成功
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に実装していると思いますので、
そうしていないということは、
これがストレートな解決方法なのだと思われます。
ご期待に添えるような回答か怪しいですが、
ご参考まで。
(キュー田辺)
成功
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に実装していると思いますので、
そうしていないということは、
これがストレートな解決方法なのだと思われます。
ご期待に添えるような回答か怪しいですが、
ご参考まで。
(キュー田辺)
返信くださりありがとうございます!
自動でブラウザの横幅は取れないんですね、、
シンプルにdivで囲ってcss記入するので狙いたいことはできました!
ご教授いただきありがとうございました。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024