Is it possible to change the size of the thumbnails in the gallery itself?

Thanks

Originally Posted by pgman Is it possible to change the size of the thumbnails in the gallery itself? Thanks

I think that SmugMug has a setting for this in their JavaScript, I'll have a poke around.

EDIT: Looks like viewers automatically get large thumbnails on large screens (>1600 pixels wide), are you sure you want to override this? Small thumbs seems like a good compromise to get more thumbnails to fit in that space, otherwise the page sizes get smaller.

Originally Posted by pgman Done: http://photos.foto-biz.com/ Thank you

That looks great. I noticed that your Recent Photos box has a stretchy width, and on large displays you are ending up with the second line of thumbnails having fewer thumbs on it than the first (or worse, two full lines and a third line with just two thumbs on it). If you decide on a fixed number of rows to display, like 2, you can solve that. Just set # of photos to something large like 20, then add this to your CSS:

#recentPhotosBox .boxBottom { height:350px; overflow:hidden; }

Adjust that height to change the number of rows to display.

Ok I installed this but it did not center so and the album descriptions got cut off. I removed the scripts but the thumbnails have not change back. How can I revert back?

Originally Posted by dbveto Ok I installed this but it did not center so and the album descriptions got cut off. I removed the scripts but the thumbnails have not change back. How can I revert back?

You've still got the code in your head tag section.

Originally Posted by Lamah You've still got the code in your head tag section.

I removed it, but a couple of my album descriptions are cut off?

You've also got the code in the end of your CSS section.

Originally Posted by Lamah You've also got the code in the end of your CSS section.

Thanks I have all my thumbs and my descriptions are all showing.

Lamah... wondering how I can make my gallery thumbs 'smaller'.
Any thoughts?

Yup, that's possible, do you want to convert all your thumbnails to the smaller versions?

YES... I just find that 5x5 rows of thumbs take up too much space and really detract from the main photo.

Oh, you just mean the thumbs inside the gallery, like on this page: http://www.richardparisphotography.c...45002541_jJA3c ?

You can do that by adding this line to your top JavaScript in the advanced customizer:

SM.SmugMug.config.autoThumbSize = false;

Those for sure, however, I would also like to make the Gallery pages thumbs smaller.

In that case, here's a modification of the "make thumbnails larger" script which makes them smaller instead:

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

/* Force gallery thumbnails to be smaller version 5
 * 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;
}

Add this to the end of your Head Tag:

<!-- Force gallery thumbnails to be smaller version 5 -->
<!-- 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(/Thumb/g, "Tiny");

			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 smaller version 5
//Ref: http://www.dgrin.com/showthread.php?t=207570

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) {
			YD.removeClass(miniBox, 'albumLarge');

			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';

			YD.removeClass(photoDiv, 'photoLarge');
			YD.addClass(photoDiv, 'photo');			

			// Switch URLs from Tiny to Thumb size (150x150 pixel)
			thumb.src = src
					.replace(/\/Th\//g, "/Ti/")
					.replace(/-Th(-\d+)?\.jpg/g, "-Ti$1.jpg")
					.replace(/Size=Thumb/g, "Size=Tiny");

			/* 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", "100px");
						YD.setStyle(thumb, "height", "auto");
					} else {
						YD.setStyle(thumb, "width", "auto");
						YD.setStyle(thumb, "height", "100px");
					}
				} 
			}
		});
	}	
});

Unreal man!
I have asked for this fix since I joined this group and everyone said it was not possible and you did it with a line. Brilliant.
Thank you!

Hey Lamah,
I love the small thumbs...

QUESTION: Is it possible to limit the number of rows down?

BTW... I see you live in New Zealand. I have a friend who is working on the new Hobbit movie.

Hey Lamah,
Can you post the latest and greatest version of your modification?. It would make life easier for us who want to make our thumbs bigger but dont want to spend the weekend messing with the CSS code.

Thanks,
Stan

Originally Posted by New England Photography Hey Lamah, Can you post the latest and greatest version of your modification?. It would make life easier for us who want to make our thumbs bigger but dont want to spend the weekend messing with the CSS code. Thanks, Stan

That code is in the first post.

Originally Posted by Paris QUESTION: Is it possible to limit the number of rows down?

Yes, that is possible. You can set the number of photos per page to a fixed number by adding this to your Bottom Javascript:

if (typeof SM.stretchy != 'undefined') {
	var numFixedPhotosPerPage = 2;
	
	var oldAutoCheckWidth = SM.stretchy.autoCheckWidth;
	
	SM.stretchy.autoCheckWidth = function() {
		var result = oldAutoCheckWidth();
		
		return [Math.min(numFixedPhotosPerPage, result[0]), result[1], result[2]];
	};
}

This code is set to restrict the number of photos per page to 2, so you might want to change that to a larger number on the second line.

If you want a fixed number of rows, rather than a fixed number of photos, things get a bit more complicated. Put this in your Bottom JavaScript instead:

/* Fixed number of thumbnail rows, version 1. Ref: http://www.dgrin.com/showthread.php?p=1704739#post1704739 */
if (typeof SM.stretchy != 'undefined') {
	var maxThumbRows = 2;
	
	var oldStretchyAutoCheckWidth = SM.stretchy.autoCheckWidth;
	var oldStretchyInit = SM.stretchy.init;

	var thHeight = [];

	SM.stretchy.init = function(attr) {
		thHeight.Tiny = SM.stretchy.findTrueSize('TinyPhotoSample').height;
		thHeight.Thumb = SM.stretchy.findTrueSize('ThumbPhotoSample').height;
		
		return oldStretchyInit.call(SM.stretchy, attr);
	};
	
	SM.stretchy.autoCheckWidth = function() {
		var result = oldStretchyAutoCheckWidth();

		var newThumbCount = result[0];
		var newSize = result[1];
		var proposedThumbSize = result[2];

		var thumbHeight = thHeight[proposedThumbSize];
		var thumbsPerColumn;

		switch (newSize) {
			case "Small":
				thumbsPerColumn = 3;
				if (proposedThumbSize === "Thumb") {
					thumbsPerColumn = 2;
				}
				break;
			case "Medium":
				thumbsPerColumn = 4;
				if (proposedThumbSize === "Thumb") {
					thumbsPerColumn = 3;
				}
				break;
			case "Large":
				thumbsPerColumn = Math.round(600 / thumbHeight);
				break;
			case "XLarge":
				thumbsPerColumn = Math.round(768 / thumbHeight);
				break
			case "X2Large":
				thumbsPerColumn = Math.round(960 / thumbHeight);
				break;
			case "X3Large":
				thumbsPerColumn = Math.round(1200 / thumbHeight);
				break;
			default:
				thumbsPerColumn = 1;
		}

		var newThumbHoriz = Math.ceil(newThumbCount / thumbsPerColumn);
		
		newThumbCount = Math.min(newThumbCount, newThumbHoriz * maxThumbRows);
		
		return [ newThumbCount, newSize, proposedThumbSize ];
	};
}

BTW... I see you live in New Zealand. I have a friend who is working on the new Hobbit movie.

Neat :). Probably half of New Zealand will get roped in as extras too lol.

Thanks again! Works great.