Boundlessのテーマを使用しております。
PCとSPで異なる画像を作成し、スライドショーにそれぞれ登録したいと思っております。
当方liquid初心者のためどのデータにどのようなコードを入れればよいか教えてほしいです。
お分かりになる方いらっしゃいましたらお願いいたします。
ざっくりとしたイメージ画像を貼りますが、あくまでイメージです。
スライドショー登録画面でPCと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画像設定できました！
ご丁寧な説明とコードありがとうございます。