Show photo number in Collage Style

Nimai

The new Collage styles are cool, but I frequently interact with my customers by having them tell me which "number" they want touched up, for example.

In the (now old) "SmugMug" style, the number used to be above the photo, i.e. 7 of 52.

With the new Collage style, is there a customization to bring back a number? Having a number over the thumbnail in the collage (a-la Lightroom) would be cool. Or, if it were only visible when the large image was viewed, that'd be ok too.

Any ideas?

Thank you!

thenickdude

Actually, yes, you can label the thumbnails in Collage Landscape galleries. This CSS would superimpose the photo number on top of each thumbnail:

.sm-tiles-row-organic {
	counter-reset: thumbindex;
}
.sm-tiles-row-organic .sm-tile-content:after {
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	
	line-height:1em;
	margin-top:-1em;
	
	padding:0.5em;
	
	background-color:rgba(36,37,40, 0.6);
	color:white;
	
	counter-increment: thumbindex;
	content: "#" counter(thumbindex);
}
/* Don't include hidden photos in the count */
.sm-tiles-row-organic .sm-tile-hidden .sm-tile-content:after {
	display: none;
}

You can make it fade in only when the thumbnail is hovered over by adding:

.sm-tiles-infohover-show .sm-tile-content:after {
	opacity:0;

	-webkit-transition: .25s opacity;
	-moz-transition: .25s opacity;
	transition: .25s opacity;
	-webkit-backface-visibility: hidden;	
}
.sm-tiles-infohover-show .sm-tile-content:hover:after {
	opacity:1;
}

I've posted an example gallery here, plus CSS that works with other gallery styles (collage portrait, thumbnails, journal):

http://www.sherlockphotography.org/Customisations/Number-thumbs

I'm pretty sure it's impossible to display that same number in the Lightbox, though.

Nimai

That's bad-ass!

Thank you. I've been programming full-time for over 20 years, but I've never gotten into CSS to the level where I could have come up with this gem.

I'd like to show the number in the big image as well, but this is surely good enough for my needs.

BuzzFisher

This is awesome! Thanks Lamah!!

thenickdude

Nimai wrote: »

I've been programming full-time for over 20 years, but I've never gotten into CSS to the level where I could have come up with this gem.

The no-JS restrictions are making me learn every dark corner of the CSS spec, and Internet Explorer is so up to date now that virtually every neat trick actually works!

Ferguson

Thank you!
This was a huge problem for me, as I couldn't have discussions with people about a particular shot. Thank you, this is great, and I had no idea CSS could do it, I had given up pending some javascript resolution.

Darter02

I incorporated it. Thanks! This is very useful!

Darter02

I noticed something about how this affects Portrait Collage. In Landscape collage the numbers appear to be in the exact sequence the images are organized, which is usually by date taken in my galleries. In collage portrait, while the images are still displayed sequentially by date taken, the numbers now appear to be randomized.

Here's a landscape collage gallery.

Here's a portrait collage gallery.

Darter02

I JUST realized it's numbering them from top to bottom, left to right!

phaserbeam

thenickdude wrote: »

Actually, yes, you can label the thumbnails in Collage Landscape galleries. This CSS would superimpose the photo number on top of each thumbnail:

OK, this thread is a bit old but thanks for that piece of CSS code

I was shooting an event where i had more then 300 photos and with that CSS code it's now pretty easy for my visitors to refer to a specific photo.

Would be cool if SmugMug could add such a feature to the gallery settings and use a real photo ID (maybe a database ID) because the numbers added by CSS are not really connected to the photos and the numbers will change if i add a photo on top of the list.

Anyway... Thx for the code, really helpful. I changed the code a little bit, so the number will appear in the upper left corner. Here's my code and here is the gallery where i used it.

.sm-tiles-row-organic {
counter-reset: thumbindex;
}

.sm-tiles-row-organic .sm-tile-content:after {
display:block;
position:absolute;
left:0.5em;
top:1.5em;

line-height:1em;
margin-top:-1em;

padding:0.3em;

background-color:rgba(230, 230, 230, 0.8);
border-radius:5px;
color:black;
font-size:small;
counter-increment: thumbindex;
content: "ID:" counter(thumbindex);
}

/* Don't include hidden photos in the count */
.sm-tiles-row-organic .sm-tile-hidden .sm-tile-content:after {
display: none;
}

.sm-tiles-infohover-show .sm-tile-content:after {
opacity:0;

-webkit-transition: .25s opacity;
-moz-transition: .25s opacity;
transition: .25s opacity;
-webkit-backface-visibility: hidden;
}

.sm-tiles-infohover-show .sm-tile-content:hover:after {
opacity:1;
}

Allen

phaserbeam wrote: »

...

Have you considered reversing the text hover? There's no way of finding anything without hovering every photo.

phaserbeam

Allen wrote: »

Have you considered reversing the text hover? There's no way of finding anything without hovering every photo.

The photo ID or the title+captions?

the photo id is not needed all the time and the title and captions are not always fully visible, especialy on portrait style photos (see screenshot, title="FedCon23 - The Fans.." and caption: "Stargate Universe - space suit of the antikers", and only the half of it is visible...)

I prefer to have the cleaner "preview". If someone want to see title+captions there is still the lightbox.

But thanks for the idea, i'll keep it in mind. Maybe i change that later...

Nimai

I love this customization so much, and have been using it so long, I thought it was part of SmugMug!
Something changed yesterday, though, and I don't see the numbers any more. Anyone else?
Specifically in Collage Portrait
I've really come to rely on this!