Folder images shifted

Allen

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

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

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

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

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

thenickdude

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

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!!