Boundlessのテーマを使用しております。
PCとSPで異なる画像を作成し、スライドショーにそれぞれ登録したいと思っております。
当方liquid初心者のためどのデータにどのようなコードを入れればよいか教えてほしいです。
お分かりになる方いらっしゃいましたらお願いいたします。
ざっくりとしたイメージ画像を貼りますが、あくまでイメージです。
スライドショー登録画面でPCとSPそれぞれを登録できればどんな操作感でも構いません。
よろしくお願いします。
Topic summary
Boundlessテーマのスライドショーで、PCとSPで異なる画像を表示したいという要望。Liquid初心者向けに、同一スライド内で2枚（PC/SP）を選択し、CSSで出し分ける実装案が提示された。
提案の要点:
- slideshow.liquidでSP用の画像URLを変数img_url_sp（block.settings.hero_slide_sp）として追加（例: 92行目付近）。
- 既存のimgタグにpc-onlyクラスを付与し、同タグを複製してsp-onlyクラスに変更。複製側はdata-srcをimg_url_spへ。
- CSSのメディアクエリ（約750pxをブレイクポイント）でpc-only/sp-onlyの表示を切替。
- schema内にimage_picker（id: hero_slide_sp、ラベル「SP画像」）を追加し、管理画面からSP用画像を選択可能に。
最新の進捗: 提案どおりの実装でSP画像の設定に成功したとの報告。問題は解決済み。
補足: 実装にはコードスニペットとスクリーンショット（スキーマ追加位置や編集箇所）が重要。
新たに「画像スライド」を追加するのではなく、
「画像スライド」内でPC,SPの画像を選択できるようにするのはいかがでしょうか？
方法としましては、一例ですが、上の添付のようにカスタマイズ画面から画像を2枚(PC表示用とSP表示用)指定できるようにし、cssでブレイクポイントを設定し、PC画像とSP画像の表示を出し分ける方法があります。
具体的には「slideshow.liquid」に以下のコードを追加することで実装可能です。
①92行目の{% assign img_url・・・ の下に下記コードを追加
{% assign img_url_sp = block.settings.hero_slide_sp | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
②93行目のimgタグに任意のクラス名を追加
(ここでは「pc-only」としています。pcとspで画像を出し分ける時に使用)
③上記imgタグを複製して下の行に追加し、「pc-only」を異なるクラス名に変更する
(ここでは「sp-only」としています)
data-src=“{{ img_url }}”の部分をdata-src=”{{ img_url_sp }}”に変更する
(①で代入したSP用画像のurlを指定)
①~③を追加した時のコード
④ページ上の任意の箇所に以下cssを指定(ブレイクポイントは任意の箇所で)
@media screen and (min-width: 750px) {
.slick-slide img.sp-only {
display: none;
}
}
@media screen and (max-width: 749px) {
.slick-slide img.pc-only {
display: none;
}
}
⑤スキーマタグ({% schema %} ~ {% endschema %})内に下記コードを追加
(このコードを追加することで、カスタマイズ画面からSP用の画像を選択できるようになります。追加箇所は添付画像を参照してください)
{
"type": "image_picker",
"id": "hero_slide_sp",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "SP Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "SP画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
2 Likes
返信が遅くなり申し訳ありません。
SP画像設定できました！
ご丁寧な説明とコードありがとうございます。