Add Mobile Image to Image Section

Solved
Highlighted
Excursionist
23 0 2

Hi guys,

 

I've been trying some codes to get a separate mobile image for my website but nothing has worked so far. Hoping to get some help on this! It's ideally for all the image sections on the homepage. (so not the ones that have text :) )

It's for https://macamilk.com/ / passw: taclao

 

And is it possible to do the same for a big sized monitor?

 

Thanks so much!

 

 

0 Likes
Highlighted
Shopify Expert
1381 111 197

hi,@@

hope you doing good

yes this can bi achieve with the help of custom code create different setting from mobile and different setting from desktop.

if you face any issue to create a setting

feel free to reach out

0 Likes
Highlighted
Excursionist
23 0 2

@Qualitycheck  Hi yep I know it can be achieved, I've tried it out following some steps on other people's questions but I would just need the proper code to do it on my theme :)

0 Likes
Highlighted
Pathfinder
102 11 30

Hi Evain,

How are the images added at the moment? If it is done by CSS then you can use media queries. If not, you will have to write customized code to enable multiple image upload. 

For example something like this

<picture>
     <source media="(min-width: 600px)" srcset="{{ block.settings.image | img_url: '1920x' }}">
         {% if block.settings.mobile_image %}
             <source srcset="{{ block.settings.mobile_image | img_url: '600x' }}">
         {% endif %}
         <img src="{{ block.settings.image | img_url: '1920x' }}" alt=""/>
</picture>

So the right image will be shown for the screen size. You can enable this via schemas. 

And yes you can add another image to a larger screen too. 

1 Like
Highlighted
Excursionist
23 0 2

hi @jayanetty  thanks! Yes preferably I want to to add the images in the editor. (it's currently already possible for the slideshow section, just not for the other sections).

 

Do i paste this code into that particulare image section liquid? And do I need to add anything to the scss liquid too?

 

Thanks so much!

0 Likes
Highlighted
Pathfinder
102 11 30

Hi Evain, 

You can add that code to the slideshow.liquid (the file that includes the slideshow code). After adding you will have to add the specific blocks under the schema. This will allow you to upload the images from the editor. I hope you know coding, else please do let your developer do it. A single mistake could break the site. 

Please let me know if you want assistance :) 

1 Like
Highlighted
Excursionist
23 0 2

hi @jayanetty  Thanks!  I've been able to get the upload feature in the editor and have tried using your code below, but haven't had any luck yet. Where exactly does it need to be placed? I've added the full code of the image.liquid at the bottom of this post :)

 

Could u point me in the right direction? Thanks so much!

 

 

 

<picture>
     <source media="(min-width: 600px)" srcset="{{ block.settings.image | img_url: '1920x' }}">
         {% if block.settings.mobile_image %}
             <source srcset="{{ block.settings.mobile_image | img_url: '600x' }}">
         {% endif %}
         <img src="{{ block.settings.image | img_url: '1920x' }}" alt=""/>
</picture>

 

 

 

Screenshot 2020-03-23 at 17.22.20.png

 

image.liquid

{% if section.settings.image != blank %}
  <style>
    {% capture selector %}.image-section--{{ section.id }} .img{% endcapture %}
    {% if section.settings.parallax %}{% assign scale = 2 %}{% else %}{% assign scale = 1 %}{% endif %}
    {% include 'responsive-background-image' with section.settings.image, selector: selector, scale: scale %}

    .image-section--{{ section.id }} .img {
      background-position: {{ section.settings.alignment }};
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
      position: absolute;
    }

    {% if section.settings.parallax %}
    @media screen and (max-width: 768px) {
      .image-section--{{ section.id }} .img {
        min-height: 100%;
      }
    }
    {% endif %}
    
     <source media="(min-width: 600px)" srcset="{{ block.settings.image | img_url: '1920x' }}">
         {% if block.settings.mobile_image %}
             <source srcset="{{ block.settings.mobile_image | img_url: '600x' }}">
         {% endif %}
         <img src="{{ block.settings.image | img_url: '1920x' }}" alt=""/>

  </style>
{% endif %}

{% if section.settings.text-over-image-width == 'full-width' %}
<div class="container-fluid homepage-slider-container">
{% else %}
<div class="container">
{% endif %}
  

<div class="row">
  <div class="page-width col-md-12">
  		<div class="index-section parallax-wrapper">
  		  <div class="image-section image-section--{{ section.id }} image-section--{{ section.settings.hero_size }}{% if section.settings.parallax %} image-section-parallax parallax{% endif %} wow fadeIn">
  		    {% if section.settings.image == blank %}
  		      <div class="placeholder-background img">
  			      {{ 'lifestyle-1' | placeholder_svg_tag: 'icon icon--placeholder' }}
  		      </div>
          {% else %}
            <div class="img"></div>
  		    {% endif %}
  		  </div>
  		</div>
  	</div>
  </div>
</div>

{% schema %}
{
    "name": {
        "en": "Image",
        "de": "Bild",
        "es": "Imagen",
        "fr": "Image",
        "pt-PT": "Imagem"
    },
    "class": "homepage-section--image",
    "settings": [
        {
          "type": "image_picker",
                    "id": "image",
                    "label": {
                        "en": "Image",
                        "de": "Bild",
                        "es": "Imagen",
                        "fr": "Image",
                        "pt-PT": "Imagem"
                    },
                    "info": {
                        "en": "2000 x 900px recommended",
                        "de": "2000 x 900 px empfohlen",
                        "es": "Recomendado 2000 x 900 px",
                        "fr": "2000 x 900 px recommandé",
                        "pt-PT": "2000 x 900px, recomendado"
                    }
                },
                {
                    "type": "image_picker",
                    "id": "mobile_image",
                    "label": {
                        "en": "Mobile Image (Optional)",
                        "de": "Mobiles Bild (optional)",
                        "es": "Imagen móvil (opcional)",
                        "fr": "Image mobile (en option)",
                        "pt-PT": "Imagem Móvel (Opcional)"
                    },
                    "info": {
                        "en": "1400 x 1400px recommended",
                        "de": "1400 x 1400 px empfohlen",
                        "es": "Recomendado 1400 x 1400 px",
                        "fr": "1400 x 1400 px recommandé",
                        "pt-PT": "1400 x 1400px, recomendado"
                    }
        },
        {
            "type": "checkbox",
            "id": "parallax",
            "label": {
                "en": "Enable parallax effect",
                "de": "Parallaxeneffekt aktivieren",
                "es": "Habilitar efecto de paralaje",
                "fr": "Activer l'effet parallaxe",
                "pt-PT": "Ativar efeito de paralaxe"
            },
            "default": true,
            "info": {
                "en": "Landscape images will default to a set alignment to best fit screen",
                "de": "Bilder im Querformat werden standardmäßig auf beste Anpassung an den Bildschirm ausgerichtet",
                "es": "Las imágenes en apaisado se cambiarán por defecto a una alineación fija para ajustarse mejor a la pantalla",
                "fr": "Les images du paysage seront alignées par défaut sur l'écran qui leur convient le mieux",
                "pt-PT": "As imagens paisagísticas terão um alinhamento predefinido que melhor se adeque ao ecrã"
            }
        },
        {
            "type": "select",
            "id": "alignment",
            "label": {
                "en": "Image alignment",
                "de": "Bildausrichtung",
                "es": "Alineación de la imagen",
                "fr": "Alignement de l'image",
                "pt-PT": "Alinhamento da imagem"
            },
            "default": "center",
            "options": [
                {
                    "value": "top",
                    "label": {
                        "en": "Top",
                        "de": "Oben",
                        "es": "Arriba",
                        "fr": "En haut",
                        "pt-PT": "Parte superior"
                    }
                },
                {
                    "value": "center",
                    "label": {
                        "en": "Middle",
                        "de": "Mitte",
                        "es": "Medio",
                        "fr": "Au milieu",
                        "pt-PT": "Centro"
                    }
                },
                {
                    "value": "bottom",
                    "label": {
                        "en": "Bottom",
                        "de": "Unten",
                        "es": "Abajo",
                        "fr": "En bas",
                        "pt-PT": "Parte inferior"
                    }
                }
            ]
        },
        {
            "type": "select",
            "id": "hero_size",
            "label": {
                "en": "Section height",
                "de": "Abschnitthöhe",
                "es": "Altura de la sección",
                "fr": "Hauteur de section",
                "pt-PT": "Altura da secção"
            },
            "default": "medium",
            "options": [
                {
                    "label": {
                        "en": "Extra Small",
                        "de": "Extra klein",
                        "es": "Muy pequeño",
                        "fr": "Extra petite",
                        "pt-PT": "Extra Pequeno"
                    },
                    "value": "x-small"
                },
                {
                    "label": {
                        "en": "Small",
                        "de": "Klein",
                        "es": "Pequeño",
                        "fr": "Petite",
                        "pt-PT": "Pequeno"
                    },
                    "value": "small"
                },
                {
                    "label": {
                        "en": "Medium",
                        "de": "Mittel",
                        "es": "Mediano",
                        "fr": "Moyenne",
                        "pt-PT": "Médio"
                    },
                    "value": "medium"
                },
                {
                    "label": {
                        "en": "Large",
                        "de": "Groß",
                        "es": "Grande",
                        "fr": "Grande",
                        "pt-PT": "Grande"
                    },
                    "value": "large"
                },
                {
                    "label": {
                        "en": "Extra Large",
                        "de": "Extra groß",
                        "es": "Muy grande",
                        "fr": "Extra grande",
                        "pt-PT": "Extra Grande"
                    },
                    "value": "x-large"
                }
            ]
        },
        {
            "type": "select",
            "id": "text-over-image-width",
            "label": {
                "en": "Section width",
                "de": "Abschnittbreite",
                "es": "Ancho de la sección",
                "fr": "Largeur de section",
                "pt-PT": "Largura da secção"
            },
            "default": "full-width",
            "options": [
                {
                    "label": {
                        "en": "Fixed",
                        "de": "Festgestellt",
                        "es": "Fijo",
                        "fr": "Fixe",
                        "pt-PT": "Fixo"
                    },
                    "value": "fixed"
                },
                {
                    "label": {
                        "en": "Full width",
                        "de": "Volle Breite",
                        "es": "Ancho completo",
                        "fr": "Pleine largeur",
                        "pt-PT": "Largura total"
                    },
                    "value": "full-width"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": {
                "en": "Image",
                "de": "Bild",
                "es": "Imagen",
                "fr": "Image",
                "pt-PT": "Imagem"
            },
            "category": {
                "en": "Image",
                "de": "Bild",
                "es": "Imagen",
                "fr": "Image",
                "pt-PT": "Imagem"
            }
        }
    ]
}
{% endschema %}
0 Likes
Highlighted
Pathfinder
102 11 30

Hello Evainfra,


Replace this,

<div class="row">
  <div class="page-width col-md-12">
  		<div class="index-section parallax-wrapper">
  		  <div class="image-section image-section--{{ section.id }} image-section--{{ section.settings.hero_size }}{% if section.settings.parallax %} image-section-parallax parallax{% endif %} wow fadeIn">
  		    {% if section.settings.image == blank %}
  		      <div class="placeholder-background img">
  			      {{ 'lifestyle-1' | placeholder_svg_tag: 'icon icon--placeholder' }}
  		      </div>
          {% else %}
            <div class="img"></div>
  		    {% endif %}
  		  </div>
  		</div>
  	</div>
  </div>
</div>

With this 

<div class="row">
  <div class="page-width col-md-12">
  		<div class="index-section parallax-wrapper">
  		  <div class="image-section image-section--{{ section.id }} image-section--{{ section.settings.hero_size }}{% if section.settings.parallax %} image-section-parallax parallax{% endif %} wow fadeIn">
  		    {% if section.settings.image == blank %}
  		      <div class="placeholder-background img">
  			      {{ 'lifestyle-1' | placeholder_svg_tag: 'icon icon--placeholder' }}
  		      </div>
          {% else %}
            <div class="img">
<picture> <source media="(min-width: 600px)" srcset="{{ block.settings.image | img_url: '1920x' }}"> {% if block.settings.mobile_image %} <source srcset="{{ block.settings.mobile_image | img_url: '600x' }}"> {% endif %} <img src="{{ block.settings.image | img_url: '1920x' }}" alt=""/> </picture>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>


So what we are doing here is, 
IF settings.image is blank, Then show a placeholder image 

ELSE we show our images. (settings.images and settings.image_mobile)

Please do check if the closing tags are correct. 

If this does not work, please give me developer access, I can do this for you :)
 

1 Like
Highlighted
Pathfinder
102 11 30

Hi Evain,

Please do accept the solution if I helped. Thanks 

1 Like
Highlighted
Excursionist
23 0 2

hi @jayanetty 

Sorry, I just saw both your replies! I've had a go and the sections have turned white on both mobile and desktop now, see below. Did I miss something?



 

Screenshot 2020-03-25 at 09.50.26.pngScreenshot 2020-03-25 at 09.50.35.png

0 Likes