Different images for mobile than desktop web

Solved
Highlighted
New Member
1 0 0

Hello

Can this code option matches with all theme such as blockshop ?

 

thanks

0 Likes
Highlighted
New Member
1 0 0

hi i am trying your solution about the two different images for the header for mobile and desktop version. but i have always JSON error.. can you help me to solve it.

i used your code:  

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},

 

0 Likes
Highlighted
New Member
2 0 0

Hi, 

Csn someone please help me as I am trying to design my page and its taking me forever. The image sizes are not accepted from my camera so I have to keep attempting to resize them in photoshop. Then when I preview the webpage its in different places on the mobile and desktop views. I have not designed a website from CSS or javascript in four almost five years when I was in college so I do not remember much. Please can someone help me I just want to get my website up and running and for it to look professional. Thank you

0 Likes
Highlighted

@Ninthony ,

Thank you so much for this piece of code! I followed it to a T and it worked beautifully! That never happens when I try to implement a change that involves code.

I tried the code you gave first then ran into the issue of not being able to add a link to my images. So I tried going into my slider.liquid to see if I could copy/paste the snippet of code that adds the linkability to that section and try to add it to your piece of code, but I was in way over my head. Then I kept reading this thread and seen you added an updated version with the ability to add links to the images and it worked like a charm!

I use the Minimal theme, and with 74% of my visitors visiting my site on a mobile device this is an invaluable code to have on every website. I hope Shopify is working on something to add to their themes permanently that allows shop owners to easily edit their mobile version differently than their desktop version, at least for the homepage.

Just wanted to say thanks! You're appreciated!

Brittany Witt
Highlighted

@Ninthony , 

I've since added 6 images on my homepage with this function (showing one image for desktop and a different one for mobile). But now my page speed has decreased from a score of 30 (which said that my site speed was as fast as similar sites) to a score of 27 (which now says that my site is slower than similar sites).

I'm looking into something called lazy loading which loads offscreen or hidden images after all critical resources have finished loading to lower "Time to Interactive". Here's the resource info on this.

Is there a way I could insert some lazy loading code so that when people are on mobile the desktop images load last. And if people are on desktop then mobile images load last?

Much appreciated!

Brittany Witt
0 Likes
Highlighted
Shopify Partner
1445 195 521

@Brittany_Witt Yeah you could definitely implement lazy loading. Lazy loading is a technique that makes it so the images don't load until they come into the viewport, making the page render faster. As I stated when I posted it, the code is not optimized to load the images at different sizes depending on screen width and resolution which is typically how you should serve images to preserve page speed. 

I'd recommend Lazy Sizes: http://afarkas.github.io/lazysizes/#examples

Never mind the couple of broken images, they probably just dont exist anymore, Ive never had any trouble with the library.

 

Download & How to: https://github.com/aFarkas/lazysizes

Small js library that allows you to use lazy loading, . You will just need to adjust the image tags to follow a different syntax. You'll use data attributes to store the source of your images and add the class "lazyload" to the image tags. Then the JS will automatically listen for the images to come into the view port, then take their source out of the data attributes and put them into their src attribute so it displays on the page. Should be able to figure it out if you follow the How To section.

If my solution helped you, please like and accept as 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
Highlighted
New Member
2 0 0

t crazy how you answered the other girl's question but just ignored mine. How do I delete my question. I will figure it out myself and I don't want to keep getting your responses to her.

0 Likes
Highlighted
Shopify Partner
1445 195 521

@FoxStarr You should make your own topic and actually lay out the problem, the question is very vague. I didnt get notified to your question because you didn't @ mention me and when I clicked on my notification it brought me directly to her post, I don't review every reply made to a thread.

If my solution helped you, please like and accept as 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
0 Likes
New Member
4 0 0

Wow, this was the most helpful thing I've seen in a while! I was stumped for days!!! thank you

0 Likes
Highlighted
New Member
4 0 0

hey @Ninthony 


is there a way to change this code to have a sliding slideshow? Ex. more than one image on mobile and desktop?

You are an amazing help in the community, thank you in advanced!

0 Likes