Different images for mobile than desktop web

Solved
ShopOwner28
Tourist
5 0 5

Also, is there a way to make the image clickable with a hyperlink?

Ninthony
Shopify Partner
2154 320 859

On page 7 I provided the code with the option to add a link in:

https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/m-p/8144...

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
TagLock
New Member
1 0 1

Hey Ninthony - can this be modified to create desktop and mobile settings for a slideshow? (i.e., the different specific images within a slideshow section). The image we'd like to use for our first slide needs to be modified into two separate image files to fit the desktop and mobile dimensions. Let me know

Ninthony
Shopify Partner
2154 320 859

You can definitely use this same kind of approach but initialize a slider, I've done it for a few clients. If you know how to set up a slider, it should be fairly easy to adapt the code to fit your needs.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Wish_Me_Luck
Tourist
6 1 3

Hi Ninthony, I have tried to implement this code in my slideshow liquid, the images for desktop and mobile both seem to appear on the screen but for some reason none of the blocks are being displayed despite having their state being set to none. please tell me where i have gone wrong

 

Wish_Me_Luck_0-1628947535629.png

 

Thank you.

Wish_Me_Luck
Tourist
6 1 3

I mean both are showing in the browser but the code indicates when the user is on a desktop screen only one image should be showing not 2. 

Wish_Me_Luck
Tourist
6 1 3

I acheived using different images for the slideshow in the narrative theme. code below

{%- else -%}
              {%- assign img_url2 = block.settings.image_slide_mobile | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            
              
 
              <style>
                .slideshow__image--{{ block.id }} {
                  object-position: {{ block.settings.alignment }};
                  font-family: "object-fit: cover; object-position: {{ block.settings.alignment }};";
                }
                
                .slideshow__image_desktop--{{ block.id }} {
                display: block;
                }
 
                .slideshow__image_mobile--{{ block.id }}{
                  display: none;
                }
                
                
                @media screen and (max-width:600px) {
                  
                  .slideshow__image_desktop--{{ block.id }}{
                  display:none !important;
                  }
                  .slideshow__image_mobile--{{ block.id }}{
                      display: block !important;
                  }
                }
              </style>
 
              
              <img class="slideshow__image slideshow__image_desktop--{{ block.id }} lazyload"
                  src="{{ img_url.image | img_url: '300x' }}"
                  data-src="{{ img_url }}"
                  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                  data-sizes="auto"
                  data-parent-fit="cover"
                  alt="{{ block.settings.image.alt | escape }}">
            
            
             <img class="slideshow__image slideshow__image_mobile--{{ block.id }} lazyload"
                  src="{{ img_url2.image | img_url: '300x' }}"
                  data-src="{{ img_url2 }}"
                  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                  data-sizes="auto"
                  data-parent-fit="cover"
                  alt="{{ block.settings.image.alt | escape }}">
 
hope this helps someone.
0 Likes
InesBourgeois
Excursionist
34 1 12

Hello! Sorry for hoping in the discussion but I wanted to do the same thing! 

I tried this solution and it worked perfectly for desktop: it shows the image I want for desktop. However, when I go on mobile it shows both pictures one after the other (the one I want for mobile but also the one I want for desktop). Is that related to the size of the images? If so, which one should I resize?

 

Thanks a lot!!!

Ines

Ninthony
Shopify Partner
2154 320 859

No it's related to the class names and the CSS. Can  you post your store url so I can take a look?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D