Custom Home page for Mobile

brlewis

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

Hikin' Mike

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;}

}

brlewis

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' Mike

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

brlewis

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' Mike

@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;
  }

}

brlewis

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' Mike

@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

brlewis

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' Mike

@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.

brlewis

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.

brlewis

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

brlewis

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

Hikin' Mike

@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!

jephph

> @"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' Mike

@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.

jephph

> @"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!

Shinrya

I do wish all of this was easier to do with the editor interface. Would be great if they added a separate customizer to tweak all the built-in content blocks etc, just for mobile view.

I'm sure many of us spend countless hours tweaking and tinkering with the visual layout of our sites, only for it all to mess up when viewed in mobile layout.

jonnomarshall

Hi Mike,

I am trying to get the two slideshows to work for me as well, but with a slight twist! I am using the menu CSS code you provided for the chrisburkard look as you can see in the attached screenshot, and that looks great in itself.

My problem is that I cant get the two slideshows to work (one problem is finding the sm-page-widget number for each, which I still dont understand!) What i have done is have a landscape background for my desktop site and that works perfectly, but I them cant add the portrait slideshow for the mobile version, so I am left with a slice of the landscape shots on my homescreen. This is by no means the end of the world, but I have some portrait shots i have taken specifically for this purpose and I would love to be able to use them properly.

Could you please clarify how i can have the mobile and desktop slideshows and the "chrisburhard" style menu?

Many Thanks

John

Hikin' Mike

@jonnomarshall said:
Hi Mike,

I am trying to get the two slideshows to work for me as well, but with a slight twist! I am using the menu CSS code you provided for the chrisburkard look as you can see in the attached screenshot, and that looks great in itself.

My problem is that I cant get the two slideshows to work (one problem is finding the sm-page-widget number for each, which I still dont understand!) What i have done is have a landscape background for my desktop site and that works perfectly, but I them cant add the portrait slideshow for the mobile version, so I am left with a slice of the landscape shots on my homescreen. This is by no means the end of the world, but I have some portrait shots i have taken specifically for this purpose and I would love to be able to use them properly.

Could you please clarify how i can have the mobile and desktop slideshows and the "chrisburhard" style menu?

Many Thanks

John

Not familiar with "chrisburkard look". I'm also not seeing a slideshow on your site, just a background.

jonnomarshall

Thanks for checking so quickly Mike. I took the slideshow off again for the moment. I can put it back on again this evening if that helps?

Since I last posted I have been able to get the landscape slideshow to appear on the desktop homepage and the portrait on the mobile homepage, but neither go full screen. I presume this is due to the menu content block using most of the real estate?
I will update this post later when I have the slideshows back in place.

Thanks again for coming back so quickly Mike!

Hikin' Mike

@jonnomarshall said:
Thanks for checking so quickly Mike. I took the slideshow off again for the moment. I can put it back on again this evening if that helps?

Both slideshows needs to be visible for me to help you. Keep in mind that each time to remove a block and add another, the widget number changes. That's why I can't help until I see it.

jonnomarshall

Thanks Mike,

I have just added back the two slideshows, again one landscape for desktop viewing and the other portrait for mobile. Using your CSS code they appear where they should - i.e. portrait is hidden on desktop view, and landscape is hidden on mobile, so that is perfect!
What i would like to change is to have the slideshows appear behind the menu in place of the current background (which is a selection of images set to change on each visit or refresh of the homepage).
If that isn't possible, i would be happy to have the ability to select the background from a different source for the mobile and the desktop homepages - I have setup a portrait gallery and a landscape gallery as the image sources for the slideshows, so could these be used to provide the different backgrounds?

Thanks again for your help Mike.

Hikin' Mike

@jonnomarshall said:
Thanks Mike,

I have just added back the two slideshows, again one landscape for desktop viewing and the other portrait for mobile. Using your CSS code they appear where they should - i.e. portrait is hidden on desktop view, and landscape is hidden on mobile, so that is perfect!
What i would like to change is to have the slideshows appear behind the menu in place of the current background (which is a selection of images set to change on each visit or refresh of the homepage).
If that isn't possible, i would be happy to have the ability to select the background from a different source for the mobile and the desktop homepages - I have setup a portrait gallery and a landscape gallery as the image sources for the slideshows, so could these be used to provide the different backgrounds?

Thanks again for your help Mike.

Can't do either.

jonnomarshall

Thanks Mike.

jonnomarshall

One last question on this one Mike. Is it possible to set up a completely separate homepage for mobile, then replicate the menus etc just changing the back ground source to my portrait gallery?

Thanks

John

Hikin' Mike

No.