Folder images shifted

Allen · December 20, 2013

I'm seeing a lot of folder/gallery thumbs only showing half a thumb this morning.
These are the images on a folder page.

Images shifted to the right so only half shows. This is the culprit. Nothing that I ever added.
Yesterday I added the FF SS to my 404 page so maybe it added it?

.sm-page-widget-galleries .sm-tiles-center-image img.sm-tile-portrait,
.sm-page-widget-nodes .sm-tiles-center-image img.sm-tile-portrait,
.sm-page-widget-pages .sm-tiles-center-image img.sm-tile-portrait,
.sm-page-widget-folders .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)
}

thenickdude · December 20, 2013

Is that really SmugMug CSS? It looks like an early version of my customisation to avoid cutting off heads. The customisation to reset the vertical alignment needs to be specific to the tiles that have been stretched to fill the width of the tile (because these are the ones that could spill out on the vertical axis and so need vertical alignment applied). Otherwise it'll inadvertently reset the "transform" for images that are stretched vertically (like landscape images inside a tall tile), which will cause SmugMug's horizontal centring to break.

Take a look at this CSS, I think it has been updated since you last saw it:

http://www.sherlockphotography.org/Customisations/Avoid-cutting-off-heads

Or maybe that actually is SmugMug's CSS and I misread it.

Allen · December 20, 2013

Lamah wrote: »

Is that really SmugMug CSS? It looks like an early version of my customisation to avoid cutting off heads. The customisation to reset the vertical alignment needs to be specific to the tiles that have been stretched to fill the width of the tile (because these are the ones that could spill out on the vertical axis and so need vertical alignment applied). Otherwise it'll inadvertently reset the "transform" for images that are stretched vertically (like landscape images inside a tall tile), which will cause SmugMug's horizontal centring to break.

Take a look at this CSS, I think it has been updated since you last saw it:

http://www.sherlockphotography.org/Customisations/Avoid-cutting-off-heads

Or maybe that actually is SmugMug's CSS and I misread it.

It looks identical to this that's on your site?

(just the CSS part w/o comment and not text)

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-limit-width.sm-tile-portrait, 
.sm-page-widget-nodes .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait, 
.sm-page-widget-pages .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait, 
.sm-page-widget-folders .sm-tiles-center-image img.sm-tile-limit-width.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);
}

Allen · December 20, 2013

I commented out that rule in my "entire site" CSS and the thumbs are back to normal. Not sure if the
up shift is still working though.

It was not in any other CSS like "all folders" where it should have been I think.

Allen · December 20, 2013

I ended up putting the L & P 25% shift in "entire site" CSS. Gota check it all over.

thenickdude · December 21, 2013

Allen wrote: »

It looks identical to this that's on your site? (just the CSS part w/o comment and not text)

Your older version is missing the ".sm-tile-limit-width" class in the selector.

pmbpro · December 21, 2013

I just posted about this very same problem too, not realizing this thread existed.

I hadn't changed anything on my site in ages, so I guess I missed an update to that 25% customization code?

Thanks for posting about the problem. I was wondering what it could have been.

Edited to add:

Lamah wrote: »

Your older version is missing the ".sm-tile-limit-width" class in the selector.

That was it! I replaced the old code with your new one and it worked. Thank you!!

Folder images shifted

Comments