The default thumbnails for galleries are tiny (100x100 pixel), unless you have 5 or fewer galleries displaying on that screen. Here's a modification I wrote this evening to force all thumbnails to be the larger 150x150 pixel size instead.

Before:



After, now with no squinting required!



In the advanced customization, add this to the end of your CSS:

/* Force gallery thumbnails to be larger version 6
 * Ref: http://www.dgrin.com/showthread.php?t=207570
 */
#galleriesBox .photo img[src*="/random.mg?"],
#sharedGalleries .photo img[src*="/random.mg?"],
#featuredBox .photo img[src*="/random.mg?"],
#shareGroups .photo img[src*="/random.mg?"],
#subcategoriesBox .photo img[src*="/random.mg?"],
#categoriesBox .photo img[src*="/random.mg?"] {
  display:none;
}

.recentPhotoForceLarge {
	float:none !important;
	margin:8px 9px 6px 9px !important;
	display:inline-block !important;
	display:-moz-inline-stack !important;
	*display:inline !important; /* IE */
	vertical-align:bottom; /* safari: for overlap */
	cursor:pointer; /* gecko: due to -moz-inline-stack on anchor */
	zoom:1; /* IE: kill space between horizontal tabs */
}

Add this to the end of your Head Tag:

<!-- Force gallery thumbnails to be larger version 6 -->
<!-- Ref: http://www.dgrin.com/showthread.php?t=207570 -->
<script type="text/javascript">
if (typeof SM.Homepage != 'undefined')
SM.Homepage.RandomThumbManager = function(config) {
	var _defaultConfig = {};
	var _config = YAHOO.lang.merge(_defaultConfig, config);
	var _getRandomThumbInfo = function(albumsInfo) {
		var postArray = [];
		var postData = "tool=getAlbumRandomThumbsInfo";

		albumsInfo = albumsInfo.replace(/Tiny/g, "Thumb");

		postArray.albumsInfo = albumsInfo;
		var handleSuccess = function(response) {
			try {
				var returnedData = YAHOO.lang.JSON.parse(response.responseText);
				var thumbsInfo = returnedData.randomThumbsInfo;
				_drawRandomThumbs(thumbsInfo);
			} catch (x) {
			}
			return;
		};
		var handleFailure = function(response) {
			return;
		};
		var callback = {
			'success' : handleSuccess,
			'failure' : handleFailure,
			'scope' : this
		};
		for ( var i in postArray) {
			postData += "&" + i + "=" + postArray[i];
		}
		var xhr = YAHOO.util.Connect.asyncRequest('POST', '/rpc/homepage.mg',
				callback, postData);
	};
	var _drawRandomThumbs = function(randomThumbsInfo) {
		var numberOfThumbs = randomThumbsInfo.length;
		var currentThumb;
		var imageElement;
		for ( var i = 0; i < numberOfThumbs; i++) {
			currentThumb = randomThumbsInfo[i];
			imageElement = YD.get(currentThumb.albumID + '_'
					+ currentThumb.albumKey);
			if (imageElement && imageElement !== 'undefined') {
				YD.setStyle(imageElement, 'background', 'url('
						+ currentThumb.url + ') center no-repeat');
				imageElement.height = currentThumb.height;
				imageElement.width = currentThumb.width;
			}
		}
	};
	this.drawRandomThumbs = function(albumsInfo) {
		_getRandomThumbInfo(albumsInfo);
	};
};
</script>

And add this to your Bottom JavaScript:

//Force gallery thumbnails to be larger version 6
//Ref: http://www.dgrin.com/showthread.php?t=207570

//Change this to true for large thumbnails in Recent Photos
var showLargeThumbsForRecentPhotos = false;

YE.onDOMReady(function() {
	var boxids = [ "galleriesBox", "categoriesBox", "subcategoriesBox", "shareGroups", "featuredBox", "sharedGalleries" ];
	
	for (var i = 0; i < boxids.length; i++) {
		YD.getElementsByClassName("miniBox", "div", boxids[i], function(miniBox) {
			// Add the large image classes that SmugMug normally adds...
			YD.addClass(miniBox, 'albumLarge');
			YD.setStyle(miniBox, 'width', '340px');
			YD.setStyle(miniBox, 'display', 'inline');

			var photoDiv = YD.getFirstChild(miniBox);
	
			var thumb = YD.getFirstChild(YD.getFirstChild(photoDiv));

			var src = thumb.src;

			if (src.match(/\/random\.mg\?/)) {
				thumb.src = 'http://cdn.smugmug.com/img/spacer.gif';
			} else {
				/* If we can tell if the image is vertical or horizontal, pre-stretch the image
				 * that's already there.
				 */
				if (thumb.width && thumb.height) {
					if (thumb.width < 150 && thumb.height < 150 && !src.match(/spacer\.gif/)) {
						if (thumb.width > thumb.height) {
							YD.setStyle(thumb, "width", "150px");
							YD.setStyle(thumb, "height", "auto");
						} else {
							YD.setStyle(thumb, "width", "auto");
							YD.setStyle(thumb, "height", "150px");
						}
					} 
				} else {
					YD.addClass(thumb, "forceLarge");
				}
			}
			
			YD.removeClass(photoDiv, 'photo');
			YD.addClass(photoDiv, 'photoLarge');			

			// Switch URLs from Tiny to Thumb size (150x150 pixel)
			thumb.src = src
					.replace(/\/Ti\//g, "/Th/")
					.replace(/-Ti(-\d+)?\.jpg/g, "-Th$1.jpg")
					.replace(/Size=Tiny/g, "Size=Thumb");			
		});
	}
	
	if (showLargeThumbsForRecentPhotos) {
		YD.getElementsByClassName("boxBottom", "div", "recentPhotosBox", function(boxBottom) {
			YD.setStyle(boxBottom, 'text-align', 'center');
		});
		
		YD.getElementsByClassName("photo", "div", "recentPhotosBox", function(photoDiv) {
			YD.addClass(photoDiv, 'recentPhotoForceLarge');
			YD.removeClass(photoDiv, 'tiny');
						
			var thumb = YD.getFirstChild(YD.getFirstChild(YD.getFirstChild(photoDiv)));
	
			var src = thumb.src;
	
			// Switch URLs from Tiny to Thumb size (150x150 pixel)
			thumb.src = src
					.replace(/\/Ti\//g, "/Th/")
					.replace(/-Ti(-\d+)?\.jpg/g, "-Th$1.jpg")
					.replace(/Size=Tiny/g, "Size=Thumb");
	
			/* If we can tell if the image is vertical or horizontal, pre-stretch the image
			 * that's already there.
			 */
			if (thumb.width && thumb.height) {
				if (thumb.width < 150 && thumb.height < 150 && !src.match(/spacer\.gif/)) {
					if (thumb.width > thumb.height) {
						YD.setStyle(thumb, "width", "150px");
						YD.setStyle(thumb, "height", "auto");
					} else {
						YD.setStyle(thumb, "width", "auto");
						YD.setStyle(thumb, "height", "150px");
					}
				} 
			} else {
				YD.addClass(thumb, "forceLarge");
			}
		});
	}
});

Let me know if something isn't working right for you. It would also be possible to customize this script to use Small sized images for thumbnails (but those would almost certainly not include your thumbnail crop, so the usefulness would be limited.)

If you want large thumbnails for "recent photos", change "false" to "true" in the line in the Bottom Javascript which says: "var showLargeThumbsForRecentPhotos = false;". You'll probably have to do additional CSS styling work to change the size of the recent photos box to allow the bigger thumbnails to fit.

If you want to force small thumbnails instead of large ones, check out this post.

Looks like it works. Does take a short time for all to switch to 150x150.

Check out all my sub-cats here.
http://www.photosbyat.com/Birds/Birding-2011-April
Click the months in "jump to" to see others.

Any chance of adding in sharegroup boxes?
http://www.photosbyat.com/share/aK3yoCu8wKJ2Q

Thanks for the feedback! I've improved things a bit so that the thumbnails should appear larger earlier now, and added support for sharegroups (I never knew sharegroups existed, thanks for the tip!). You can get the updated code from the first post.

Originally Posted by Lamah Thanks for the feedback! I've improved things a bit so that the thumbnails should appear larger earlier now, and added support for sharegroups (I never knew sharegroups existed, thanks for the tip!). You can get the updated code from the first post.

Did ya leave off the script tags?
Can you also add a version number in a comment?

head tag
<!-- Force gallery thumbnails to be larger version XX -->
<!-- Ref: http://www.dgrin.com/showthread.php?p=1683939 -->
bottom js
// Force gallery thumbnails to be larger version XX
// Ref: http://www.dgrin.com/showthread.php?p=1683939

Thanks, I did forget the script tags :). The version number advice is good too, thanks.

Originally Posted by Lamah Thanks, I did forget the script tags :). The version number advice is good too, thanks.

The version in each will help keep them in sync.

Had to adjust the sharegroup box to conform the subcat boxes.
Any chance on category thumbs?

Good work.

I added this and it works. Only issue is if you have sub-galleries and galleries together it does not resize the sub-gallery thumbs. Spacing is a bit wide too.

Sorry, the spacing is wide for me because I have my text under my thumbs. Spacing is an easy change though.

Give the latest version a go (it adds "subcategoriesBox" to the line " var boxids = [ "galleriesBox", "categoriesBox", "sharedGalleries" ];" in the bottom JavaScript). You may also want to add "featuredBox" to that list for featured photos on the front page.

The main remaining problem is with galleries that don't have a featured photo, as when the code tries to load a larger thumbnail, it ends up loading a new randomly picked photo (so the image changes as well as getting bigger). I'll see if I can improve that, but it'll probably be tricky.

For us ignorant people can you show how to change the spacing ("Spacing is an easy change though"). I tried the code ad it did as claimed but was only showing three thumbnails across on my laptop with very large spaces between them.If I could fix that, I would probably use it.
Thanks for your coding - appreciate it.

I've now posted version 4 which fixes the photo changing to a different photo while the page is loading for galleries which have no featured image. That was particularly noticeable, for example, on Allen's creature gallery which has mostly random thumbnails.

The horizontal spacing should be set by this line: "YD.setStyle(miniBox, 'width', '340px');", so you can reduce that number to make the horizontal spacing smaller.

Thankyou so much for this

By the way, AceCo55, I noticed that your gallery links jump downwards slightly when you hover over them. If that's not what you wanted, I think you can fix it by changing these two lines in your CSS:

a img.imgBorder {border: 1px solid #5a5a5a !important;} /* normal border */
a:hover img.imgBorder, a:hover img.imgBorderOn {border: 2px solid #e2ac2a !important;} /* mouse hover border color for categories/subcategories */

To:

a img.imgBorder {border: 1px solid #5a5a5a !important; margin:1px} /* normal border */
a:hover img.imgBorder, a:hover img.imgBorderOn {border: 2px solid #e2ac2a !important; margin:0px} /* mouse hover border color for categories/subcategories */

You'll also need to increase the width in the force large thumbnails code slightly to 175px.

Originally Posted by AceCo55 For us ignorant people can you show how to change the spacing ("Spacing is an easy change though"). I tried the code ad it did as claimed but was only showing three thumbnails across on my laptop with very large spaces between them.If I could fix that, I would probably use it. Thanks for your coding - appreciate it.

Here's some of my CSS I played with to adjust the box widths and centering the thumbs. I do not use stretchy for cat and sub-cat pages. I use the 4-across hack.

#category.category  {
    width: 990px !important;
    margin: 60px auto 0;
}

#category.subcategory #galleriesBox {
    width: 958px !important;
    margin: 0 auto;
    padding-top: 10px;
}

#category.subcategory  {
    width: 990px !important;
    margin: 60px auto 0;
}

#content.shareHomepage  {
    width: 958px !important;
    margin: 0 auto 0;
}

.boxBottom .albumLarge {width:172px !important; height:240px; 
      text-align:center; margin:0 5px;}
#content.shareHomepage .boxBottom .albumLarge {margin:0 5px;}
.boxBottom .albumLarge .albumTitle {width:172px;}
.albumLarge .photoLarge {float:none; width:192px !important; height:auto; _height:1px;}
.albumLarge .updated {width:192px !important;}

In the 4-across hack. Looks like with the larger thumbs being generated .boxBottom .albumLarge is active instead of
.miniBox even though there are more then 5 thumbs.

Thanks Lamar - I actually want it to do that as it makes it even clearer that it has been selected. I have (by trial and error) adjusted the space to 190px (I had to go to this because one of my gallery names was quite long.
Allen - I fiddled around with some settings before you posted the above code. I'm happy with the look I have now but if you could look and see if I should use your code, that would be awesome (if so, where do I put it and do I need to remove any code first?)
Thank you both so much for the time you put it and help you provide

Originally Posted by AceCo55 Thanks Lamar - I actually want it to do that as it makes it even clearer that it has been selected. I have (by trial and error) adjusted the space to 190px (I had to go to this because one of my gallery names was quite long. Allen - I fiddled around with some settings before you posted the above code. I'm happy with the look I have now but if you could look and see if I should use your code, that would be awesome (if so, where do I put it and do I need to remove any code first?) Thank you both so much for the time you put it and help you provide

You have the pages set to stretch so my CSS wouldn't help much. I have the boxes set to a static width.

Thankyou so much for looking and for your expert opinion - you are one amazing individual.

Is it possible to make it so it will also enlarge the "recent photos" section?

Thanks

Yup, I've now added that capability to Version 5 (updated the main post). You also need to change "false" to "true" in the line in the bottom javascript which says: "var showLargeThumbsForRecentPhotos = false;" in order to turn on this functionality.

Originally Posted by Lamah Yup, I've now added that capability to Version 5 (updated the main post). You also need to change "false" to "true" in the line in the bottom javascript which says: "var showLargeThumbsForRecentPhotos = false;" in order to turn on this functionality.

Done: http://photos.foto-biz.com/

Thank you