SM Style Thumbs Indicater

Allen

Smugmug style gallery.
Need to add basic site CSS so a hovered thumb and after click is bordered so folks will know what thumb they're on.

pbandj

+1 - great idea.

thenickdude

Allen wrote: »

Smugmug style gallery.
Need to add basic site CSS so a hovered thumb and after click is bordered so folks will know what thumb they're on.

Hovered thumbs currently have a rollover effect that brightens them up a bit. You can make that more obvious:

.sm-user-ui .sm-tile-overlay {
  background-color: rgba(255, 255, 255, 0.3);
}

Or add a red border instead:

.sm-user-ui .sm-tile-overlay {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:        border-box;
  border:1px solid red;
}

But yeah, it would be nice if a CSS class was added to the thumbnail to indicate that it is the current photo being displayed.

Allen

Lamah wrote: »

Hovered thumbs currently have a rollover effect that brightens them up a bit. You can make that more obvious:

.sm-user-ui .sm-tile-overlay {
  background-color: rgba(255, 255, 255, 0.3);
}

Or add a red border instead:

.sm-user-ui .sm-tile-overlay {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:        border-box;
  border:1px solid red;
}

But yeah, it would be nice if a CSS class was added to the thumbnail to indicate that it is the current photo being displayed.

Great, thanks. I get the whole thumb with the border while hovering but only top and left when I
move my mouse off the thumb. Still, two sides indicates active thumb, better then nothing.

Now if they could explain why the thumbs are only 90x, smaller then legacy site.

thenickdude

Allen wrote: »

Now if they could explain why the thumbs are only 90x, smaller then legacy site.

They basically shrink in order to maximise the size of the main image on the page.

They do get to 139px wide depending on the size of your monitor. If your screen is wide but not very tall, the main image can't display very large, so that leaves more room for thumbs, and they correspondingly grow. If your monitor gets a little bit taller, the main image can suddenly jump up a size class, and the thumbs shrink to make room.

The balance between thumb-size, number of thumbs per row, and main image size is actually pretty good at most sizes, I think.

Allen

Lamah wrote: »

They basically shrink in order to maximise the size of the main image on the page.

They do get to 139px wide depending on the size of your monitor. If your screen is wide but not very tall, the main image can't display very large, so that leaves more room for thumbs, and they correspondingly grow. If your monitor gets a little bit taller, the main image can suddenly jump up a size class, and the thumbs shrink to make room.

The balance between thumb-size, number of thumbs per row, and main image size is actually pretty good at most sizes, I think.

I'm using a 24" monitor set at 1920x1200 and no mater how I stretch or go full screen the thumbs stay
90px. If I go real small they do get smaller.

thenickdude

Odd, it works for me on precisely that monitor size (1920x1200). I wonder if it could be a browser difference, or maybe there's some theme setting which is affecting it?

Allen

Lamah wrote: »

Odd, it works for me on precisely that monitor size (1920x1200). I wonder if it could be a browser difference, or maybe there's some theme setting which is affecting it?

Your SM gallery is what I see here, thumbs stay 90x.
FF 22 Win7

thenickdude

The ones in my screenshot are 139px wide, not 90px?

Allen

I stretched your gallery all over the place and all thumbs remained at 90px.

thenickdude

Ah I see that too, it seems to be Firefox specific. It's weird because from my reading of the code, SmugMug seems to choose Th (large) thumbs if the viewport size has been assigned the classes 1680, 1920, or 2560.

In Chrome the gallery viewport ends up getting assigned the classes "sm-gallery-content sm-gallery-image-x3 sm-gallery-viewport-1680 sm-gallery-image-x2", in Firefox it gets assigned the classes "sm-gallery-content sm-gallery-viewport-1680 sm-gallery-image-x2". So according to my reading of _calculateTileSize:

_calculateTileSize: function() {
        var container     = this.get('container'),
            viewportClass = container.getData('viewport-class'),
            tileSize      = 'Ti';

        if (viewportClass === VIEWPORT_CLASSES['1680'] ||
            viewportClass === VIEWPORT_CLASSES['1920'] ||
            viewportClass === VIEWPORT_CLASSES['2560']) {
            tileSize = 'Th';
        }

        return tileSize;
    },

both Firefox and Chrome should be using Th-sized thumbnails. But for some reason, Firefox's tiles end up with the Ti (small) class applied instead of the Th. I'm pretty sure this is a SmugMug bug.

Screenshot of Chrome rendering
Screenshot of Firefox rendering
Screenshot of Firefox inspector showing small thumbs rendering despite 1680 viewport class being applied.

BTW, I'm using a Retina MacBook display.

EDIT: Ah, I refreshed the Firefox window and the thumbs popped up to Th size. I think the problem might be that the thumbnail size ends up getting fixed at load-time, and some quirk of Firefox means that at the time the viewport size is checked, it's too small to support Th-size thumbs, so it gets stuck at Ti forever. I'm going to find the bug and lodge a report.

southeasternphotography

The red border did not work for me. Placed it where my other css code is for "entire site". I see no change to thumbs

southeasternphotography

thumb borders
Would be nice to have multiple options to display "current" thumb.

Allen

bump

southeasternphotography

Hmmm...mine seem to always stay the same size. They're suppose to be different? If I make my screen smaller, they get smaller while I drag the window smaller but pop back to "normal" size when I let go. I would not want them smaller. 'Course, I am on a 15" screen. So, maybe with a larger screen it would be nice to see "larger" thumbs. Don't know if that is what happens anyway on a larger monitor. Using Mac/Chrome.

Allen

This has become very frustrating not knowing what thumb is active especially coming out of lightbox
or any other edit like photo details. Smugmug style gallery.

Why has Smug not responded about highlighting the active thumb? It's looking more like it's take their
cookie cutter site "as is" and crap on any features we need. :pissed

southeasternphotography

ReBump
Bumpty bump.

Allen

bump

ashishpandey

Allen wrote: »

Smugmug style gallery.
Need to add basic site CSS so a hovered thumb and after click is bordered so folks will know what thumb they're on.

And this is one more in a long list of things that makes sense and was available in legacy smugmug.

Allen

Allen wrote: »

This has become very frustrating not knowing what thumb is active especially coming out of lightbox
or any other edit like photo details. Smugmug style gallery.

Why has Smug not responded about highlighting the active thumb? It's looking more like it's take their
cookie cutter site "as is" and crap on any features we need. :pissed

This is probably the last thing that needs fixing before I unveiled now that I can see my whole keyword list.

Allen

bump

Allen

bump

Another example of why this is needed.
Returning from cropping thumb tool I have no idea what thumb was just cropped.

AceCo55

Yes, big plus for me.
Just makes browsing experience through galleries so much better.
Visitors know exactly where they are/were/left off

Allen

bump

Allen

This has been a very big problem not knowing what the active thumb is for the current large photo.
Also needed when returning from lightbox.
Reference Smugmug and College style galleries.

sarasphotos

I'll add my vote to this, too

ChancyRat

I recall adding css to my site to add borders to my thumbnails in smugmug style galleries. For permanent borders, not just appearing when hovering. I discovered that they broke videos in that videos would no longer play on click. I opted to just remove the code, so I can't give you what I tried.

I mention this only because any code for borders on thumbnails should be tested on video thumbs.