質問を見ていただきありがとうございます。
テーマ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の状態をどこかにコピーペーストして保存しておき、
問題があれば元に戻せるようにされると良いです。
ご参考まで。
(キュー田辺)
1 Like
返信いただき、ありがとうございます。
検証してみたところ、SPの画像を登録する項目は表示できました。
しかし、スライドの高さを「最初の画像に対応」にすると、画像のように高さが変になってしまいました。
どの部分を修正すれば良いか教えていただけますでしょうか。
お手数をおかけしますが、よろしくお願いいたします。