• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Now you can force gallery thumbnails to be larger :)

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 1  of  16
1 2 3 4 5 11 Last »
Old Oct-10-2011, 07:41 AM
#1
thenickdude is online now thenickdude OP
Software developer
thenickdude's Avatar
Now you can force gallery thumbnails to be larger :)
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:

Code:
/*
 * Force gallery thumbnails to be larger version 7
 * 
 * This section is to be added to your CSS.
 * 
 * By Nicholas Sherlock / Sherlock Photography 2013, 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:inline !important; /* IE */
	vertical-align:bottom; /* safari: for overlap */
	zoom:1; /* IE: kill space between horizontal tabs */
}
Add this to the end of your Head Tag:

Code:
<!-- 
 Force gallery thumbnails to be larger version 7
 
 This section is to be added to your Head Tag.
 
 By Nicholas Sherlock / Sherlock Photography 2013, 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:

Code:
/*
 * Force gallery thumbnails to be larger version 7
 * 
 * This section is to be added to your Bottom JavaScript.
 * 
 * By Nicholas Sherlock / Sherlock Photography 2013, 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);
	
			YD.removeClass(photoDiv, 'photo');
			YD.addClass(photoDiv, 'photoLarge');			

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

			if (YD.hasClass(thumb, "passwordalbum_ti")) {
				YD.removeClass(thumb, "passwordalbum_ti");
				YD.addClass(thumb, "passwordalbum_th");
			} else { 
				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");
					}
				}
					
				// 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.

Last edited by thenickdude; Aug-03-2013 at 05:16 PM. Reason: Update to version 7
Old Oct-10-2011, 10:44 AM
#2
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
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
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Oct-10-2011, 04:44 PM
#3
thenickdude is online now thenickdude OP
Software developer
thenickdude's Avatar
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.
Old Oct-10-2011, 05:20 PM
#4
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Lamah View Post
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
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Oct-10-2011, 05:59 PM
#5
thenickdude is online now thenickdude OP
Software developer
thenickdude's Avatar
Thanks, I did forget the script tags :). The version number advice is good too, thanks.
Old Oct-10-2011, 06:17 PM
#6
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Lamah View Post
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?
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Oct-10-2011, 06:36 PM
#7
Sir_Eagle is offline Sir_Eagle
My Custom Title
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.
__________________
http://kmartin.smugmug.com/
Old Oct-10-2011, 06:38 PM
#8
Sir_Eagle is offline Sir_Eagle
My Custom Title
Sorry, the spacing is wide for me because I have my text under my thumbs. Spacing is an easy change though.
__________________
http://kmartin.smugmug.com/
Old Oct-10-2011, 06:52 PM
#9
thenickdude is online now thenickdude OP
Software developer
thenickdude's Avatar
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.
Old Oct-11-2011, 01:29 AM
#10
AceCo55 is offline AceCo55
Aussie Grinner
AceCo55's Avatar
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.
__________________
My opinion does not necessarily make it true. What you do with my opinion is entirely up to you.
www.acecootephotography.com
Old Oct-11-2011, 02:25 AM
#11
thenickdude is online now thenickdude OP
Software developer
thenickdude's Avatar
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.
Old Oct-11-2011, 03:23 AM
#12
AceCo55 is offline AceCo55
Aussie Grinner
AceCo55's Avatar
Thankyou so much for this
__________________
My opinion does not necessarily make it true. What you do with my opinion is entirely up to you.
www.acecootephotography.com
Old Oct-11-2011, 03:51 AM
#13
thenickdude is online now thenickdude OP
Software developer
thenickdude's Avatar
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:

Code:
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:

Code:
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.
Old Oct-11-2011, 06:03 AM
#14
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by AceCo55 View Post
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.
Code:
#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.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Oct-11-2011, 06:15 AM
#15
AceCo55 is offline AceCo55
Aussie Grinner
AceCo55's Avatar
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
__________________
My opinion does not necessarily make it true. What you do with my opinion is entirely up to you.
www.acecootephotography.com
Old Oct-11-2011, 06:25 AM
#16
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by AceCo55 View Post
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.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Oct-11-2011, 06:30 AM
#17
AceCo55 is offline AceCo55
Aussie Grinner
AceCo55's Avatar
Thankyou so much for looking and for your expert opinion - you are one amazing individual.
__________________
My opinion does not necessarily make it true. What you do with my opinion is entirely up to you.
www.acecootephotography.com
Old Oct-29-2011, 08:33 AM
#18
pgman is offline pgman
Major grins
Is it possible to make it so it will also enlarge the "recent photos" section?

Thanks
__________________
Thanks
http://www.sritch.com
The Dogs of Vancouver, BC
Old Oct-30-2011, 01:03 AM
#19
thenickdude is online now thenickdude OP
Software developer
thenickdude's Avatar
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.
Old Oct-30-2011, 02:47 PM
#20
pgman is offline pgman
Major grins
Quote:
Originally Posted by Lamah View Post
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
__________________
Thanks
http://www.sritch.com
The Dogs of Vancouver, BC
Page 1  of  16
1 2 3 4 5 11 Last »
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Gallery Square Thumbnails...NOT MomaZunk Legacy SmugMug Customization 2 Sep-15-2010 04:22 PM
Making gallery thumbnails larger. Lani Legacy SmugMug Customization 2 Sep-12-2010 05:43 PM
Large Gallery Thumbnails Soppy Legacy SmugMug Customization 1 Sep-04-2010 01:07 PM
Problems w. Thumbnail Stye & HTML voicelit Legacy SmugMug Customization 14 Aug-03-2010 09:25 AM
Force gallery comments to display on gallery pages only? DJDigitalDave Legacy SmugMug Customization 0 Mar-02-2010 06:39 AM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump