Display specific gallery slideshow depending on screen size

Petri71

Hello,

I would like to have a homepage with a slideshow on my website. Except that I would like to have a specific slideshow (landscape images) on a computer or tablet and another slideshow (portrait images) on mobile devices.

I have had help from the amazing support team at Smugmug who showed me those links:

https://personalize.smugmug.com/Customizations/Mobile-Slideshow

https://portal.photom.me/customization/full-screen-custom-slideshow-for-smugmug-with-a-preloader/

And although they are working kinda well. I think they are hard to set for a regular user and I would love to have a more simpler solution.

I was wondering if there were any script allowing to display a specific album according to the screen size of the device. So the user could create two specific albums with images for horizontal screens and for vertical screens. He could just add the script with the album number or URL on the homepage and then be able to update the albums from within the Smugmug Organize tab.

Any thoughts and suggestions welcome...

CHEERS

Petri

Hikin' Mike

There is no "script" to do that. Besides those to methods you posted, you can create two slideshows (one for landscape, one for portrait) and hide it via CSS. You will need to know the specific page/widget number. As an example where .sm-page-widget-xxxxxxxx is the mobile slideshow and .sm-page-widget-yyyyyyyy is the desktop.

Add this to a CSS Block in your home page.

/* Displays Landscape Format Slideshow for Desktop
* and Portrait Format for Mobile
***********************************************************/
.sm-page-widget-xxxxxxxx {/* mobile */
  display: none;
}


@media only screen and (max-width: 768px) {

  .sm-page-widget-yyyyyyyy {/* desktop */
    display: none;
  }

  .sm-page-widget-xxxxxxxx {/* mobile */
    display: block;
  }

}

There is a tutorial in my signature on how to find your page/widget number.

Petri71

Thank you Mike for your quick answer and super tutorial, I found the widget number pretty quickly. I found it by opening the album in a browser then inspect the page.

But before I change the whole code on my homepage, I have a little doubt : how is your script going to automatically activate the slideshow on the homepage, isn't this CSS just displaying the album ?

Hikin' Mike

The CSS code doesn't automatically "finds" a gallery and displays it on your home page. You have to add TWO Slideshow Blocks on your home page and then add a CSS Block and place the CSS code from above on your home page.

All that CSS code does is shows what slideshow is displayed based on screen size. If you remove the code, you will see two slideshows all of the time.

Petri71

Thank you Mike for the quick answer and sorry for the late reply, now if I understand the slideshow won't be in the background so Impossible for me the use a layout with overlayed text and buttons to enter the website... I will need the menu to be visible then, right ?

Hikin' Mike

@Petri71 said:
Thank you Mike for the quick answer and sorry for the late reply, now if I understand the slideshow won't be in the background so Impossible for me the use a layout with overlayed text and buttons to enter the website... I will need the menu to be visible then, right ?

I don't understand about the menu, but I think you need to use either one of the links you posted originally. My understanding was to use a regular Slideshow, and not one using a background.