Stop peoples' heads from being cut off in gallery widget

thenickdude

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:



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



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

electrolyte

Thanks, that is really useful!

paulbrock

Aye, very handy!

Sent from my GT-I9100 using Tapatalk 4 Beta

charlesdaly

Lamah, thanks so much.
Anyone: I've copied the css from Lamah's post but how to load it? I went to all galleries setting, customize CSS but it only seems to give me a drag/drop option and no paste option.
?
Thanks! -almost there.

WiscoFrank

I think this is what you're asking ... Just drag the CSS block to a section of the page. It will turn green where the block can be dropped, I usually put the CSS blocks at the bottom above the footer. Then drop it and open its Option dialog. In there you can paste the CSS code.

Hikin' Mike

charlesdaly wrote: »

Lamah, thanks so much.
Anyone: I've copied the css from Lamah's post but how to load it? I went to all galleries setting, customize CSS but it only seems to give me a drag/drop option and no paste option.
?
Thanks! -almost there.

I would put it in your theme's advanced CSS box.

WiscoFrank

Hikin' Mike wrote: »

I would put it in your theme's advanced CSS box.

Question for my education .. If you put it in the theme it effects all gallery pages. If you put it in a single gallery page it effects only that page, correct? Just thinking of the case where I may not want all galleries effected.

Hikin' Mike

WiscoFrank wrote: »

Question for my education .. If you put it in the theme it effects all gallery pages. If you put it in a single gallery page it effects only that page, correct? Just thinking of the case where I may not want all galleries effected.

Yes.

charlesdaly

WiscoFrank wrote: »

I think this is what you're asking ... Just drag the CSS block to a section of the page. It will turn green where the block can be dropped, I usually put the CSS blocks at the bottom above the footer. Then drop it and open its Option dialog. In there you can paste the CSS code.

Perfect!
Thank You

thenickdude

I've now updated the customisation in my first post to fix a bug with the display of tiles on Internet Explorer 8, so please update.

mbonocore

Great find Lamah!

mbonocore

Moving to New Customization Forum