Photo Spacing on Homepage

Visual Voodoo · December 12, 2016

Hi guys. I spent too much time on this and hoping someone else make have a good solution.

I have two websites (visualvoodoo.com and visualvoodoo.net). On my smugmug homepage (http://www.visualvoodoo.net) I made 3 images that link over to my other site. I tried doing this with Multiple Photos but I couldn't link to my other site (and I couldn't put text under the 3 photos I picked). So I went with 3 separate Photos and a text box underneath. It looks ok, but doesn't look so good when you goto other devices.

First I struggled with the image padding. I set each image to 33% width. That adds up to 99. So one image always gets 34%. I tried to decimals but that wouldn't work and tried to adjust the left and right padding. No success with fixing the "one image width off" issue. It drives me nuts when you see two smaller images and one slightly bigger one. On a computer it's not as apparent as when you view on an iPad or iPhone.

The other weird thing that is related...on an iPhone the homepage pictures stack vertical and the text boxes stack at the bottom. It doesn't look good as these are for my portfolio images.

Any solutions or better ideas? I suppose I could just go with the "Multiple Photos" module and pick an image out of each of the three categories (i.e., People, Places and Things). The problem is no Title would show under the image. I selected that option but it would show a menu under the photos with a Multiple Photos module.

I hope I typed that explanation well...I will add some screen shots below...

Thanks
David

Visual Voodoo · December 12, 2016

Visual Voodoo · December 12, 2016

The first image is the iPhone view where the Text modules get separated from the Single Photo modules.

The second image shows how three images interact with that 33%, 34%, 33%.

I hope that clarifies what I am asking and hoping that some of you guys may have some good suggestions or fixes. Thanks.

David

Hikin' Mike · December 12, 2016

If those three photos are linked to your SmugMug site, you can use a Folder/Gallery block to display just three images linking to your folders/galleries. that's what I'm doing on my Portfolio page.

If those three photos are linked to your other site, you can modify this: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Splash-Page-Example. I created that tutorial years ago, so if that will work, I'd be more than happy to help you customize it.

Visual Voodoo · December 12, 2016

HI Mike!

Thanks again for responding. I think I agree with you. I just decided I would keep the Portfolio on SmugMug for simplicity. So I set up a Multiple Photos module instead. By doing this I can't put a Title under each of the photos (i.e., People, Places, Things). Do you know how to do this? There is an option for this, but Nothing shows. I attached a photo below that shows where I selected Info below the picture...I was hoping that meant the gallery title but that appears to be for something else. I suppose I could live with it, but it would be nice to include a title.

The related problem is normally when you are on a page, the nav title for that page is colored. On my website it doesn't do that. Now If I goto the People gallery, the text is still gray...it should be blue. How would I fix that? Or what did I not do correctly? I attached an image below where I hovered over the Nav Title to make it blue...

Thanks for looking at this Mike. The site is starting to look better put together.

David

Hikin' Mike · December 12, 2016

If 'People', 'Places' and 'Things' are really galleries, then you need to use a Gallery block and not multiple photos. I do that on my Portfolio page.

I just added a multiple photo block on my testing site and I was able to view my title and description. If you don't see your's, make sure you have a title/description.

Hikin' Mike · December 12, 2016

@Visual Voodoo said:

The related problem is normally when you are on a page, the nav title for that page is colored. On my website it doesn't do that. Now If I goto the People gallery, the text is still gray...it should be blue. How would I fix that? Or what did I not do correctly? I attached an image below where I hovered over the Nav Title to make it blue...

Go to your Menu > Links > "Include Sub-Links". Set that to 'ON'. That should display your current gallery in blue.

Visual Voodoo · December 12, 2016

YOUR THE MAN MIKE!

I didn't see that option. Ok so I fixed the biggest obstacle thanks to you. Now I have my galleries represented with 3 photos with titles. Very cool.

Now for the second issue...I did go to Menu > Links > "Include Sub-Links". Set that to 'ON'. BUT that doesn't yet show any current galleries. Maybe it takes awhile to kick in? Or maybe it takes a little CSS?

Looking good...thanks Mike.

David

Hikin' Mike · December 12, 2016

@Visual Voodoo said:
YOUR THE MAN MIKE!

I didn't see that option. Ok so I fixed the biggest obstacle thanks to you. Now I have my galleries represented with 3 photos with titles. Very cool.

Now for the second issue...I did go to Menu > Links > "Include Sub-Links". Set that to 'ON'. BUT that doesn't yet show any current galleries. Maybe it takes awhile to kick in? Or maybe it takes a little CSS?

Looking good...thanks Mike.

David

Sorry about that. I forgot I had some CSS to do that.

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-item .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-toplevel.sm-accordion-item-open > .sm-accordion-item-label {
    color: blue;
    }

Visual Voodoo · December 12, 2016

Thanks Mike. That was a great help. That was appreciated.

Visual Voodoo · December 12, 2016

Hey Mike do you know how to do the same for the top photo menu too? I hovered the mouse over the title to make it blue in the photo.

Hikin' Mike · December 12, 2016

@Visual Voodoo said:
Hey Mike do you know how to do the same for the top photo menu too? I hovered the mouse over the title to make it blue in the photo.

The code I posted above, copy that code and change 'vertical' to 'horizontal'.

Visual Voodoo · December 12, 2016

Mike....great...that did it. I hate to ask...but what about sub-menus. For example...when I select the BROWSE PHOTOS BY YEAR > 2016...or any subfolder the color goes away. I hope that makes sense.

David

Hikin' Mike · December 12, 2016

@Visual Voodoo said:
Mike....great...that did it. I hate to ask...but what about sub-menus. For example...when I select the BROWSE PHOTOS BY YEAR > 2016...or any subfolder the color goes away. I hope that makes sense.

David

In order to see your galleries in your 'Browse Photo by Year', you need to able the 'Menu > Links > "Include Sub-Links"' to 'ON'. Then you can hide it in CSS. Also you can remove both horizontal and vertical CSS I posted and use this (including hiding the sub-menu). I do this on my 'Articles > Smugmug Customization' links.

/**
* Turns off Sub-menu but Allows Active Links
******************************************/

.sm-user-ui .sm-page-widget-16461151 .sm-page-widget-nav-toplink:nth-child(1) .yui3-menu-children:nth-child(1) .yui3-menu-children {
    display: none;
    }

/**
* Active Link Color
******************************************/ 
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-item .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-toplevel.sm-accordion-item-open > .sm-accordion-item-label {
    color: #428bca;
    }

Visual Voodoo · December 12, 2016

That worked great Mike but the drop down didn't go away or hide after I loaded the code. Here's what I see...maybe a CDN issue? I cleared all cache.

Hikin' Mike · December 12, 2016

@Visual Voodoo said:
That worked great Mike but the drop down didn't go away or hide after I loaded the code. Here's what I see...maybe a CDN issue? I cleared all cache.

Sorry, I was "driving blind". Change the Sub-menu CSS to this:

/**
* Turns off Sub-menu but Allows Active Links
******************************************/

.sm-user-ui .sm-page-widget-16461151 .sm-page-widget-nav-toplink:nth-child(1) .yui3-menu-children {
    display: none;
    }

Visual Voodoo · December 12, 2016

Ha...so close Mike...we almost have it. I'm not going to lose sleep over this but it would be nice to get it consistent. We are in the folder Browse Photo by Year' > 2016 > China...

Hikin' Mike · December 13, 2016

@Visual Voodoo said:
Ha...so close Mike...we almost have it. I'm not going to lose sleep over this but it would be nice to get it consistent. We are in the folder Browse Photo by Year' > 2016 > China...

Not to beat a dead horse, but do all of those links show 'ON' 'Menu > Links > "Include Sub-Links"'?

Visual Voodoo · December 13, 2016

Yes system wide.

Visual Voodoo · December 13, 2016

It's a gallery within two folders (i.e., Browse Photos By Year > 2016 then click a gallery)

Thanks for helping Mike

Hikin' Mike · December 13, 2016

@Visual Voodoo said:
It's a gallery within two folders (i.e., Browse Photos By Year > 2016 then click a gallery)

Thanks for helping Mike

Sorry I had to step away for a while. I did some testing and it looks like Smugmug only "codes" active links for the first two levels. My site is only two deep. I have a family section (private) that is deeper and I get the same results as your galleries. Without having a .sm-page-widget-nav-activepage, there isn't any way to change that.

Visual Voodoo · December 13, 2016

Ok no worries. That is good to know. I like what you were able to do here so I am very happy and appreciative for your efforts Mike.

Visual Voodoo · December 18, 2016

Mike can you please help me out with this repair. I simplified my menu and got rid of the top menu and when I did that, it broke the code that you came up with. Here is what I had...

/* Turns off Sub-menu but Allows Active Links */
.sm-user-ui .sm-page-widget-16461151 .sm-page-widget-nav-toplink:nth-child(1) .yui3-menu-children {
    display: none;}

/* Active Link Color */ 
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-item .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-toplevel.sm-accordion-item-open > .sm-accordion-item-label {
    color: #428bca;}

Here's what it looks like now...

Hikin' Mike · December 18, 2016

Since you removed the top menu, you can remove this:

/* Turns off Sub-menu but Allows Active Links */
.sm-user-ui .sm-page-widget-16461151 .sm-page-widget-nav-toplink:nth-child(1) .yui3-menu-children {
    display: none;}

Add this instead:

/* Turns off Sub-menu but Allows Active Links */
.sm-user-ui .sm-page-widget-16388565 .sm-page-widget-nav-toplink:nth-child(1) .yui3-menu-children,
.sm-user-ui .sm-page-widget-16388565 .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children {
    display: none;
    }

Visual Voodoo · December 18, 2016

Mike you are really good at website code! Thank you so much. I was trying to do it myself for several hours before I got frustrated...and you got it so quickly. Thanks again.

David

Photo Spacing on Homepage

Comments