Make slides mobile or desktop only- Boundless

[dontwantthisseo]

I got a picture on my website that works PERFECT for the mobile version as the first picture you see on the website. But on desktop the picture look horrible. How can i make images in the hero slideshow show on mobile or desktop only?

Thank you :)

[FirstWireApp · Accepted solution]

Hi 

Brooklyn does not support different images for mobile and desktops . But you can customize the code and get it done. Please follow the instructions below to change the code (Please make sure that you first take a backup before doing any changes. I do not take any responsibility if the code is broken, so please do not forget to take a backup first )

1. Open your slideshow.liquid Section, find the <style> element at the top of the file and add this  above the closing </style> tag:

.slick-initialized .hero__slide:not(.slick-slide) {    display: none;
}

2. Find this code towards the bottom of the file 

        "name": "Slide",
        "settings": [

and insert this code right below:

		  {
			"type":		"select",
			"id":		"show_on",
			"label":	"Show this slide:", 
			"default":	"Desktop Mobile",
			"options": [
				{
					"value":	"Desktop Mobile",
					"label":	"Show On Both"
				},
				{
					"value":	"Mobile",
					"label":	"Show On Mobile"
				},
				{
					"value":	"Desktop",
					"label":	"Show On Desktop"
				}
			]
		  },

3. Now find this line (replaced rest of the line with  ... ):

<div class="hero__slide slide--{{ block.id }} ...

and add {{ block.settings.show_on }} after the hero__slide:

<div class="hero__slide {{ block.settings.show_on }} slide--{{ block.id }} ...

4. Save this file and open theme.js.liquid Asset. Find this line below the "Init slick slider" comment (around line 1837?)

onAfterChange: this.afterChange

and add the following right below (first comma is important):

,      responsive: [
        {          breakpoint: 10000, settings: { slide: '.Desktop'}
        },
        {          breakpoint: 480,   settings: { slide: '.Mobile'}
        }      
      ]

Save the Asset.

Now in Theme Customizer, in the properties of the slideshow section, you will be able to change the settings for each slides. Set it whether it will be Shown on Mobile, Shown on Desktop or Shown on Both.

[bombel7075]

Some error in site

[bombel7075]

Some error in site

[bombel7075]

@FirstWireApp 

Something is wrong. I try it and

when I use full screen slideshow 

[bombel7075]

@dontwantthisseo 

That's work correctly in your shop ?

[tim]

That was a nice idea to copy/paste my solution from April-2018 which was intended for Brooklyn (and does not work as is for current Brooklyn, btw).
Though it still works for Boundless -- just tested with version 8.8.1  :)

The location of code in step 4 is  around line 567. But pay attention to the following -- if your afterChange line has comma at the end:

onAfterChange: this.afterChange,

then there should be a comma after closing square bracket:

onAfterChange: this.afterChange,
responsive: [
        { breakpoint: 10000, settings: { slide: '.Desktop'} },
        { breakpoint: 480,   settings: { slide: '.Mobile' }  }      
],

(my code used mobile and desktop classes, while the code above uses Mobile and Desktop -- so pay attention to this too)

If code does not work for you -- share your shop URL (preview URL if theme is not published).

[niclopse]

Hey all,

So I've followed the guide to a 'T' and for some reason I'm running into a slight problem.  When in slideshow customization, I have the desktop image on top and set to "show on desktop". This slide looks horrible on mobile so I added a second slide with a similar image that was adjusted to look better on mobile, and changed the setting to "show on mobile".

So I've been able to implement the slide options correctly, apparently, because the choices are there to select. However, when actually loading the site up on mobile it still only shows the first wide desktop image. 

Any thoughts?

[toneee]

This is still an issue with Boundless.

There's an option to choose different images for desktop and mobile; however, the theme erroneously changes all screen widths to whatever you choose last. There is no user-friendly way to create different slide images for different screen sizes. 

[lashaunchey]

hey tim, thinking to do this on my site and im using boundless. just wondering if it still will work. thanks so much.