Stop peoples' heads from being cut off in gallery widget

thenickdudethenickdude Registered Users Posts: 1,302 Major grins
edited August 7, 2013 in SmugMug Customization
If your gallery widget is using square tiles, images get centred in the tile. If you've got portrait images featured, that'll probably end up cutting peoples' heads off, since they tend to lie in the top portion of the frame.

You can add this CSS to your theme to tune that behaviour, this option will shift upwards from centred by 25%:
/* 
 * Instead of vertically centering portrait images within their tiles (a 50% shift downwards), only
 * shift these by 25% in order to have a better chance of keeping people's heads in the frame.
 */
.sm-page-widget-galleries .sm-tiles-center-image img.sm-tile-portrait {
  top: 25%;
  -webkit-transform: translate(0,-25%);
  -moz-transform: translate(0,-25%);
  -ms-transform: translate(0,-25%);
  -o-transform: translate(0,-25%);
  -webkit-transform: translate(0,-25%);
  transform: translate(0,-25%);
}

Or you can go all the way and top-align portrait images instead:
/* 
 * Instead of vertically centering portrait images within their tiles (a 50% shift downwards), 
 * top-align these to prevent peoples' heads from being cut off.
 */
.sm-page-widget-galleries .sm-tiles-center-image img.sm-tile-portrait {
  top: 0;
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

Here's the before:

GRsIJ86.jpg

Here's the result from using the first option to shift the view upwards by 25%:

oQbwvWY.jpg

The second option shifts the view upwards as far as it will go:

mhUf2a1.jpg

Comments

Sign In or Register to comment.