Custom Home page for Mobile

brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

Is it possible to set up my homepage to have 2 slideshows one for mobile (portrait images) and a different one (landscape images) for non-mobile?

Thank you for the help
Brad

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    Yes. You will need add two Slideshows, one for the portrait (mobile) and one for landscape (desktop .sm-page-widget-28082417). You will need to know the node number for both. Then using CSS you hide/show.

    As an example:

    .sm-page-widget-xxxxxxxx {display: none;}
    
    @media (max-width:736px) {
    
      .sm-page-widget-xxxxxxxx {display: block;}
      .sm-page-widget-28082417 {display: none;}
    
    }
    
  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    Wow, this is great, thank you, how do you know all these customizations ;-)

    Question, the slideshow in mobile view is limiting the height of the body, so even though the image gallery is the right size/crop. I have attached a screen shot and a link to a test page with just a normal slideshow, there is no special CSS code for mobile on this page.

    Is there a way to change the body height for mobile?

    https://www.inmylens.com/Portrait

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    I don't understand your question. Are you trying to get rid of the gray background?

  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    sorry no, i am trying to get the image to be bigger, it should basically fill the width of the phone and therefore be taller.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins
    edited June 5, 2020

    @brlewis said:
    Wow, this is great, thank you, how do you know all these customizations ;-)

    Displaying two different "things" on two different devices (desktop and mobile) came from something I did on one of my WordPress sites. In my case, it was a calendar. Wanted a full size calendar on desktop and a list-style on mobile.

    @brlewis said:
    sorry no, i am trying to get the image to be bigger, it should basically fill the width of the phone and therefore be taller.

    If you want to fill the available frame, you need to make sure your Slideshow is set up FIRST. In the Slideshow Settings: Height - 'Auto'; Auto Height Ratio - 2:3 (or your specific ratio).

    Then add this to your CSS:

    .sm-user-ui .sm-slideshow,
    .sm-user-ui .sm-slideshow-image .sm-tile-wrapper {width: 100% !important;}
    
    @media screen and (max-width: 736px) {
    
      .sm-user-ui .sm-page-widget.sm-page-widget-slideshow .sm-page-widget-content {
        margin: 0 !important;
        padding: 0 !important;
      }
    
    }
    
  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    magic, thank you very much, that did the trick.

    One last question for the day, maybe the week ;-)

    Is it possible to have the Hamburger and logo on the same line? I don't mind having a smaller logo if needed.

    thanks again for all the great tips and customization

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    @brlewis said:
    magic, thank you very much, that did the trick.

    One last question for the day, maybe the week ;-)

    Is it possible to have the Hamburger and logo on the same line? I don't mind having a smaller logo if needed.

    thanks again for all the great tips and customization

    https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-a-Hamburger-Menu

  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    Yes, i have been using your hamburger code for years on my other smugmug site and now on this one.

    On both your site and mine the hamburger icon/button is on the line below the logo, is it possible to have them both on the same line/row?

    Brad

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    @brlewis said:
    Yes, i have been using your hamburger code for years on my other smugmug site and now on this one.

    On both your site and mine the hamburger icon/button is on the line below the logo, is it possible to have them both on the same line/row?

    Brad

    Yes, you removed some of my tutorial. You need to remove this:

    /** 2018 June 02
    * Change the text ‘Menu’ to a Hamburger Menu for Mobile Devices
    * https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-a-Hamburger-Menu
    *****************************************************************************/
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
        visibility: hidden;
        }    
    
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
        font-family: 'SmugMug Icon Font Regular';
        font-size: 48px;
        line-height: 0px;
        content: '\E039 ';
        display: block;
        visibility: visible;
        }   
    
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        background: none ;
        }
    

    Use this from my tutorial:

    /**
    * Hamburger Menu for Mobile Devices
    ****************************************************************/
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left, 
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
        text-align: left;
    }
    
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {visibility: hidden;}    
    
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
        font-family: 'SmugMug Icon Font Regular';
        font-size: 48px;
        width: 48px;
        line-height: 24px;
        content: '\E039 ';
        display: block;
        visibility: visible;
    }   
    
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {background: none;}   
    
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
        position: absolute;
        top: -5px;/* adjust for your logo */
        right: 10px;
        z-index: 1;
    }
    
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img, 
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {float: left;}
    
    .sm-user-ui .sm-page-widget-logo-text-container {margin: 10px 0;}   
    
    

    Depending on the size of the logo, you need to change this top: -5px;/* adjust for your logo */ to center it.

  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    as always, wow cool, it is close, I still have the hamburger on a row below the logo, could it be that my header has 2 blocks, each at 50%, one is for the logo the other is for the menu?

    i am not sure when I would have deleted part of the code so thank you.

  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    never mind, i had to adjust for my logo with the Top,
    Thank you very much this is exactly what I was looking for.

  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    I am super happy with how the page now looks on mobile, thank you again very much.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    @brlewis said:
    never mind, i had to adjust for my logo with the Top,
    Thank you very much this is exactly what I was looking for.

    No problem!

  • jephphjephph Boston, MARegistered Users Posts: 2 Beginner grinner
    > @"Hikin' Mike" said:
    > Yes. You will need add two Slideshows, one for the portrait (mobile) and one for landscape (desktop .sm-page-widget-28082417). You will need to know the node number for both. Then using CSS you hide/show.

    Hi Mike,

    Thanks for all your contributions across the forum, I've already benefited so much from your insight just from reading. One question, I know you provided a great resource for locating widget numbers (https://gallery.imagesinthebackcountry.com/Smugmug-customization/Locating-Your-SmugMugs-Node-or-Widget-Number), however, I find myself struggling quite a bit with trying to locate the widget/node number of a slideshow gallery. When you have a minute, could you kindly point me in the right direction?

    I'm trying to replicate what Brad accomplished with two separate homepages depending on screen size. My desktop homepage slideshow is here: (https://www.jeffwuphotography.com/Site-Stuff/Desktop-Slideshow/n-MnTDdd/) and my mobile homepage slideshow is here (https://www.jeffwuphotography.com/Site-Stuff/Mobile-Slide-Show/). I tried to inspect the page, but wasn't completely sure as to what element on the page actually corresponded to the widget I needed.

    Thanks for your time,
    Jeff
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    @jephph said:

    @Hikin' Mike said:
    Yes. You will need add two Slideshows, one for the portrait (mobile) and one for landscape (desktop .sm-page-widget-28082417). You will need to know the node number for both. Then using CSS you hide/show.

    Hi Mike,

    Thanks for all your contributions across the forum, I've already benefited so much from your insight just from reading. One question, I know you provided a great resource for locating widget numbers (https://gallery.imagesinthebackcountry.com/Smugmug-customization/Locating-Your-SmugMugs-Node-or-Widget-Number), however, I find myself struggling quite a bit with trying to locate the widget/node number of a slideshow gallery. When you have a minute, could you kindly point me in the right direction?

    I'm trying to replicate what Brad accomplished with two separate homepages depending on screen size. My desktop homepage slideshow is here: (https://www.jeffwuphotography.com/Site-Stuff/Desktop-Slideshow/n-MnTDdd/) and my mobile homepage slideshow is here (https://www.jeffwuphotography.com/Site-Stuff/Mobile-Slide-Show/). I tried to inspect the page, but wasn't completely sure as to what element on the page actually corresponded to the widget I needed.

    Thanks for your time,
    Jeff

    What you are trying to do is totally different then what he was doing. He is using a Slideshow Block, you are using your slideshow as a background. There is no way that I know of to have two different background slideshows depending on screen size.

  • jephphjephph Boston, MARegistered Users Posts: 2 Beginner grinner
    > @"Hikin' Mike" said:
    > (Quote)
    > What you are trying to do is totally different then what he was doing. He is using a Slideshow Block, you are using your slideshow as a background. There is no way that I know of to have two different background slideshows depending on screen size.

    Ah I see, thank you for the clarification!
Sign In or Register to comment.