Categories, Gallery Thumbnails

[Aaron Jors]

Is there anyway I can have my category and gallery thumbnails always appear square but have the actual images within the gallery appear something other than square?

[Allen]

Is there anyway I can have my category and gallery thumbnails always appear square but have the actual images within the gallery appear something other than square?
Are you only referring to thumbs? On the category page, sub-cat page and in the gallery?

[Aaron Jors]

Yes Allen just the thumbnails outside of the actual gallery. I would like the thumbnails for the category, sub category, and gallery to appear as the square thumbnails but once you actually get into the gallery have them appear in different orientations.

[Aaron Jors]

Anyone?

[Allen]

Yes Allen just the thumbnails outside of the actual gallery. I would like the thumbnails for the category, sub category, and gallery to appear as the square thumbnails but once you actually get into the gallery have them appear in different orientations.
You could try featuring a photo with a square thumb then unsquare it. If that
don't work make a 2nd copy of the photo you want to feature. Make its
thumb square, feature it, then move the photo to your site files gallery. Put in
the caption a reference to what gallery it's featured in.

[Aaron Jors]

Allen you lost me. I've included below a sample of the different screens I am referring to....

Square Thumbs:
http://www.aaroncjors.com/galleries
http://www.aaroncjors.com/Door%20County

Non Square Thumbs:
http://www.aaroncjors.com/gallery/8702858_YaqLs#554193875_LKu5m

[jfriend]

Allen you lost me. I've included below a sample of the different screens I am referring to....

Square Thumbs:
http://www.aaroncjors.com/galleries
http://www.aaroncjors.com/Door%20County

Non Square Thumbs:
http://www.aaroncjors.com/gallery/8702858_YaqLs#554193875_LKu5m I see nothing but square thumbs in this gallery: http://www.aaroncjors.com/gallery/8702858_YaqLs#554193875_LKu5m. Perhaps you should clear you browser cache?

[Aaron Jors]

John that is the gallery that I don't want square thumbs. I would like to have the pictures appear in vertical and horzontal orietation within the gallery but as square thumbs on the other 2 links. If I change the pictures within the gallery it also affects how the other thumbs appear.

[Allen]

John that is the gallery that I don't want square thumbs. I would like to have the pictures appear in vertical and horzontal orietation within the gallery but as square thumbs on the other 2 links. If I change the pictures within the gallery it also affects how the other thumbs appear.
Then do what I suggested in post 5. Select the thumb you want featured,
make 2nd copy and move the featured photo to your site files. Then change all thumbs
in the gallery back to original.

[Aaron Jors]

Allen I played around with this and it works if you make the copy, feature it and then move it to another gallery.

My questions now is can you feature a photo for a category so that all the thumbs here will be square?

http://aaroncjors.smugmug.com/galleries

[Allen]

Allen I played around with this and it works if you make the copy, feature it and then move it to another gallery.

My questions now is can you feature a photo for a category so that all the thumbs here will be square?

http://aaroncjors.smugmug.com/galleries
I was playing with that and haven't had any luck yet. I got classes assigned
to the category mini-boxes and the best I could do is apply a background to
each different thumb. There's got to be away to replace the thumb now that
it has a class, maybe some js?

[jfriend]

I was playing with that and haven't had any luck yet. I got classes assigned
to the category mini-boxes and the best I could do is apply a background to
each different thumb. There's got to be away to replace the thumb now that
it has a class, maybe some js? Thumbs can be replaced with JS. I've done it before, but I threw it away because it really doesn't look that good. The page ends up loading the original thumbs, then the newly assigned thumbs. You see the layout of the page shift to the new size and see somewhat slower load times. I decided it wasn't an improvement.

It might work better to clip an existing rectangular thumb to a square viewport. I just played with that a bit by setting the width of the photo div and setting overflow:hidden on it. It works in FF3.5 (I didn't try other browsers). The image is clipped to square. The imgBorder would have to be moved from the img to the photo div to keep it looking good. It all could be done.

Here's what it looked like before any CSS customization:
http://jfriend.smugmug.com/photos/591468644_NCtAg-M.jpg

Here's what it looks like after some CSS:

http://jfriend.smugmug.com/photos/591468614_Bc7XN-M.jpg

I used this CSS:

.thumbnail_Kenya .photo {width:66px; height:66px; overflow:hidden;}
.thumbnail_Kenya .photo {border: 1px solid #999999;}
.thumbnail_Kenya a img.imgBorder {background:none; border:none;}

You probably could also change the image by hiding the IMG and assigning a background image to the photo div.

[Allen]

Thumbs can be replaced with JS. I've done it before, but I threw it away because it really doesn't look that good. The page ends up loading the original thumbs, then the newly assigned thumbs. You see the layout of the page shift to the new size and see somewhat slower load times. I decided it wasn't an improvement.

It might work better to clip an existing rectangular thumb to a square viewport. I just played with that a bit by setting the width of the photo div and setting overflow:hidden on it. It works in FF3.5 (I didn't try other browsers). The image is clipped to square. The imgBorder would have to be moved from the img to the photo div to keep it looking good. It all could be done.

Here's what it looked like before any CSS customization:
http://jfriend.smugmug.com/photos/591468644_NCtAg-M.jpg

Here's what it looks like after some CSS:

http://jfriend.smugmug.com/photos/591468614_Bc7XN-M.jpg

I used this CSS:

.thumbnail_Kenya .photo {width:66px; height:66px; overflow:hidden;}
.thumbnail_Kenya .photo {border: 1px solid #999999;}
.thumbnail_Kenya a img.imgBorder {background:none; border:none;}

You probably could also change the image by hiding the IMG and assigning a background image to the photo div.
I am creating a site for my birdin' buddy and while waiting for his photos,
been doing some creating. Here's (http://featheredphotos.smugmug.com/Wildlife%20Adventures) the cat page working on, pw paul. I just
used background images after using your mini-box js to assign classes. All
different sizes because of the subject, hard to find ones square. But I lose
the image link. Not a biggie. Any suggestions appreciated.

btw, he's 75 and doesn't have a clue with this stuff.

EDit: a thought, hate to do it but a simple navbar would solve all this with an html page.