Need help with bottom bar info for thumbnails in Multiple Photos block

scotthunter

Hello,

I have a Multiple Photos content block on my homepage below the gallery thumbnails, which contains featured images. How do I get image titles to appear on hover as it currently adopts the effect of the gallery thumbnails on the same page? Basically, I want the same bottom bar info style as the individual gallery pages. Can the code for the Multiple Photos content block be independent from the rest of the page?

I also notice that the lightbox from photos on the home page can't be customised as there is no dedicated content block on the homepage? I want to remove all info on the lightbox (the lightbox from gallery pages looks correct).

Also, on the mobile version the gallery title bars on the homepage are not centred inside the thumbnails properly - they need to move up slightly. They look fine on the desktop though.

Hopefully Mike can help as he provided the code for the gallery thumbnails and titles effect, which works a treat.

www.scotthunterphotography.com

Many thanks.

Hikin' Mike

@scotthunter said:
I have a Multiple Photos content block on my homepage below the gallery thumbnails, which contains featured images. How do I get image titles to appear on hover as it currently adopts the effect of the gallery thumbnails on the same page? Basically, I want the same bottom bar info style as the individual gallery pages. Can the code for the Multiple Photos content block be independent from the rest of the page?

I don't know how you're creating your feature images. As it is right now, I don't see a way to add titles because the titles aren't there in the code. If you create a Keyword Gallery, then you can display your title.

I also notice that the lightbox from photos on the home page can't be customised as there is no dedicated content block on the homepage? I want to remove all info on the lightbox (the lightbox from gallery pages looks correct).

Add this to your CSS:

/**
* Hides Lightbox Info on the Homepage
***************************************************/    
.sm-page-home .sm-lightbox-basic .sm-lightbox-panel {
    display: none;
    }

Also, on the mobile version the gallery title bars on the homepage are not centred inside the thumbnails properly - they need to move up slightly. They look fine on the desktop though.

Add this and adjust if necessary:

/**
* Centers Title Bar on Screens 800px or Smaller
***************************************************/    
@media only screen and ( max-width: 800px ){

    .sm-user-ui .sm-tiles-info-cover .sm-tile-title {
        bottom: 64%;
        }

}       

scotthunter

@Hikin' Mike said:
I don't know how you're creating your feature images. As it is right now, I don't see a way to add titles because the titles aren't there in the code. If you create a Keyword Gallery, then you can display your title.

It's just a multiple photos content box with images from a ‘favouites’ gallery. Ideally I would like the same image title on rollover effect (bottom of image) as per gallery pages.

Hikin' Mike

In that case, in the "Multiple Photo" box, select "Display" then 'Info Style > Bottom Bar'; 'Info Hover > Show'; 'Into Text Alignment > Center'.

Add this to your CSS:

/**
* Hides Lightbox Info on the Homepage
***************************************************/    
.sm-user-ui .sm-tiles-info-over .sm-tile-info {
    bottom: 40%;
    }

.sm-user-ui .sm-tile-photo .sm-tile-info .sm-tile-caption {
    display: none;
    }

scotthunter

@Hikin' Mike said:
Add this to your CSS:

```
/**

• Hides Lightbox Info on the Homepage
  ***************************************************/
  .sm-page-home .sm-lightbox-basic .sm-lightbox-panel {
  display: none;
  }

This works, thanks!

scotthunter

@Hikin' Mike said:
Add this and adjust if necessary:
```
/**

• Centers Title Bar on Screens 800px or Smaller
  ***************************************************/
  @media only screen and ( max-width: 800px ){

  .sm-user-ui .sm-tiles-info-cover .sm-tile-title {
  bottom: 64%;
  }
  
  }

Changing the 64% doesn't seem to make any difference to the height of the info bar on mobile version It's still slightly lower than it should be.

scotthunter

@Hikin' Mike said:
In that case, in the "Multiple Photo" box, select "Display" then 'Info Style > Bottom Bar'; 'Info Hover > Show'; 'Into Text Alignment > Center'.

Add this to your CSS:

/**
* Hides Lightbox Info on the Homepage
***************************************************/  
.sm-user-ui .sm-tiles-info-over .sm-tile-info {
  bottom: 40%;
  }

.sm-user-ui .sm-tile-photo .sm-tile-info .sm-tile-caption {
  display: none;
  }

Unfortunately this doesn't work properly. The "Multiple Photos" content block is still using the code for the "Folders, Galleries and Pages" content block above it. I want the titles to appear on hover like on this page: www.scotthunterphotography.com/Woodland/

The CSS block on the homepage with the conflict is here:

.sm-user-ui .sm-tile-info .sm-tile-title {
font-size: 180%;
font-weight: normal;
min-height: 25px;
padding: 15px 0;
color: rgba( 255, 255, 255, 1.0 );
background: rgba( 40, 45, 57, 1.0 );
}

.sm-user-ui .sm-tile-info .sm-tile-title:hover {
font-size: 180%;
font-weight: normal;
color: rgba( 25, 27, 35, 1.0 );
background: rgba( 220, 245, 255, 1.0 );
}

.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
opacity: 0.8;
}

.sm-user-ui .sm-tiles-info-cover .sm-tile-title {
text-transform: uppercase;
bottom: 63%;
}

.sm-user-ui .sm-tile-content > .sm-tile-info:hover {
background-color: transparent;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.sm-page-home .sm-lightbox-basic .sm-lightbox-panel {
display: none;
}

/**

• Hides Lightbox Info on the Homepage
  ***************************************************/
  .sm-user-ui .sm-tiles-info-over .sm-tile-info {
  bottom: 40%;
  }

.sm-user-ui .sm-tile-photo .sm-tile-info .sm-tile-caption {
display: none;
}

Hikin' Mike

@scotthunter said:
Unfortunately this doesn't work properly. The "Multiple Photos" content block is still using the code for the "Folders, Galleries and Pages" content block above it. I want the titles to appear on hover like on this page: www.scotthunterphotography.com/Woodland/

I guess I misunderstood your question. The link helps. Remove ALL of the code here:

.sm-user-ui .sm-tile-info .sm-tile-title {
    font-size: 180%;
    font-weight: 400;
    min-height: 25px;
    padding: 15px 0;
    color: rgba( 255, 255, 255, 1.0);
    background: rgba( 40, 45, 57, 1.0)
}

.sm-user-ui .sm-tile-info .sm-tile-title:hover {
    font-size: 180%;
    font-weight: 400;
    color: rgba( 25, 27, 35, 1.0);
    background: rgba( 220, 245, 255, 1.0)
}

.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
    opacity: .8
}

.sm-user-ui .sm-tiles-info-cover .sm-tile-title {
    text-transform: uppercase;
    bottom: 63%
}

.sm-user-ui .sm-tile-content>.sm-tile-info:hover {
    background-color: transparent;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}

.sm-page-home .sm-lightbox-basic .sm-lightbox-panel {
    display: none
}

.sm-user-ui .sm-tiles-info-over .sm-tile-info {
    bottom: 40%
}

.sm-user-ui .sm-tile-photo .sm-tile-info .sm-tile-caption {
    display: none
}

Use this instead. It's pretty much the same code but I isolated that specific widget (your Browse Galleries). If you remove that widget, the CSS will not work.

/**
* Custom Browse Galleries
************************************************/
.sm-user-ui .sm-page-widget-17472059 .sm-tile-info .sm-tile-title {
    font-size: 180%;
    font-weight: normal;
    min-height: 25px;
    padding: 15px 0;
    color: rgba( 255, 255, 255, 1.0 );
    background: rgba( 40, 45, 57, 1.0 );
    }

.sm-user-ui .sm-page-widget-17472059 .sm-tile-info .sm-tile-title:hover {
    font-size: 180%;
    font-weight: normal;
    color: rgba( 25, 27, 35, 1.0 );
    background: rgba( 220, 245, 255, 1.0 );
    }

.sm-user-ui .sm-page-widget-17472059 .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-page-widget-17472059 .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
    opacity: 0.8;
    }

.sm-user-ui .sm-page-widget-17472059 .sm-tiles-info-cover .sm-tile-title {
    text-transform: uppercase;
    bottom: 63%;
    }

.sm-user-ui .sm-page-widget-17472059 .sm-tile-content > .sm-tile-info:hover {
    background-color: transparent;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    }

.sm-page-home .sm-page-widget-17472059 .sm-lightbox-basic .sm-lightbox-panel {
    display: none;
    }

scotthunter

That has fixed the issue with the Featured Images gallery thumbnail titles, thank you very much

However the info bar for the "Folders, Galleries and Pages" content block in the mobile version still needs to be centred. It's only slightly too low but it's annoying me.

I have this code in a CSS block on the homepage which doesn't appear to do anything when I change the percentage value:

/**

• Centers Title Bar on Screens 800px or Smaller
  ***************************************************/
  @media only screen and ( max-width: 800px ){

  .sm-user-ui .sm-tiles-info-cover .sm-tile-title {
  bottom: 60%;
  }

}

Hikin' Mike

It needed the !important tag. So use this instead. It too will only isolate the Featured Images:

@media only screen and ( max-width: 800px) {
    .sm-user-ui .sm-page-widget-17472059 .sm-tiles-info-cover .sm-tile-title {
        bottom: 65% !important;
    }
}

scotthunter

You are very good!