Liquid、JavaScriptなどに関する質問
質問を見ていただきありがとうございます。
テーマcraftのスライドショーでPCとモバイルの画像を切り替えする方法を探して、
以下の質問を参考にしようとしたのですが、コードが違っていてどこを修正したらいいかわかりませんでした。
craftのスライドショーで同じ事は出来るでしょうか?
もし出来ない場合、他に方法があれば、教えていただけるとありがたいです。
十分な検証をしていませんので、あくまでご参考まで。
考え方は、
参考として貼っていただいた投稿と同じです。
(1) まず、SP用画像を登録できるようにします。 セクションのslideshow.liquidの下記の記述を下記のように変更します。(300行目から400行目の間くらいにあるはずです。)
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
↓
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
{
"type": "image_picker",
"id": "sp_image",
"label": "SP用画像"
},
(2) 次に、登録したSP用画像を表示できるようにします。セクションのslideshow.liquidの下記の記述を下記のように変更します。(100行目から200行目の間くらいにあるはずです。)
{%- 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
}}
↓
{%- 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,
class: 'pc'
}}
{%- if block.settings.sp_image -%}
{%- liquid
assign height = block.settings.sp_image.width | divided_by: block.settings.sp_image.aspect_ratio | round
-%}
{{
block.settings.sp_image
| image_url: width: 1000
| image_tag:
loading: 'lazy',
height: height,
sizes: sizes,
widths: widths,
class: 'sp'
}}
{%- endif -%}
(3) そして、CSSで750px以上であればPC用画像を、749px以下であればSP画像を表示するようにします。セクションのslideshow.liquidの冒頭の下記の記述を、下記のように修正します。
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
↓
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{%- style -%}
@media screen and (max-width: 749px) {
.slideshow__media .pc {
display: none !important;
}
.slideshow__media .sp {
display: block !important;
}
}
@media screen and (min-width: 750px) {
.slideshow__media .pc {
display: block !important;
}
.slideshow__media .sp {
display: none !important;
}
}
{%- endstyle -%}
(4) テーマのカスタマイズから、スライドショーにSP用画像を設定して完了です。
スライドショーの各種設定の影響などを
全く考慮していませんので、
設定の仕方によっては表示が壊れる可能性がありますし、
そもそも、
CSSで出し分けるのではなくsrcsetなどを使うべきなようにも思いますが、
そこまではしておりません。
上記を実施する前に、
元々のliquidの状態をどこかにコピーペーストして保存しておき、
問題があれば元に戻せるようにされると良いです。
ご参考まで。
(キュー田辺)
返信いただき、ありがとうございます。
検証してみたところ、SPの画像を登録する項目は表示できました。
しかし、スライドの高さを「最初の画像に対応」にすると、画像のように高さが変になってしまいました。
どの部分を修正すれば良いか教えていただけますでしょうか。
お手数をおかけしますが、よろしくお願いいたします。
Shopifyペイメント決済サービスを利用していて、ストアの管理画面の通知セクションに突然「Shopifyペイメントの使用を継続するために必要な情報」というバナーメッセージが表示さ...
By Mirai Dec 3, 2023すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023