• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Turn your thumbnail galleries into a stunning image montage!

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  5
1 2 3 4 5
Old Jul-06-2013, 08:44 PM
#1
thenickdude is offline thenickdude OP
Software developer
thenickdude's Avatar
Turn your thumbnail galleries into a stunning image montage!
Recently, a certain third-party photohost updated its gallery layout to use amazing new image montages instead of thumbnails. This got me to thinking about SmugMug's thumbnail galleries, which are teensy-tiny. I'd really like a montage-style gallery instead of the regular thumbnail gallery.

Well, I managed it! I've written a customization that turns this:



Into this:



Check out the live demo on my website, and fill your screen with awesome:

http://www.sherlockphotography.org/O...0885112_ktDXzP

Combined with my panorama viewer customization, SmugMug is now the perfect host for immersive panoramas, click to try:



Oh, and it supports Retina displays, on which it looks simply amazing.

Installation

This customization is currently in Beta, so try it out if you dare :).

In the Advanced Customizer, add the code found at this link to your CSS:

http://s3.sherlockphotography.org/sm...emontage.css?4

And add the code found at this link to your Bottom JavaScript:

http://s3.sherlockphotography.org/sm...gemontage.js?4

The image montage will only be applied to thumbnail-style galleries which have the keyword "montage" in their gallery keywords, so go into your gallery settings and make those changes:



Galleries that don't have the keyword "montage" applied will stay like they were before, so you can test this out in just one gallery!

Customization

Do you have a gallery with mainly vertical images? You might want to increase the height of the lines in the montage, so that you can see more of the images. You can do that by adding settings into your gallery description, like so:

Code:
<html>This is my gallery!<script type="text/javascript">
image_montage_config = {
  targetHeight:400
};
</script></html>
Here's an example gallery that uses that setting:

http://www.sherlockphotography.org/O...9958984_CkpxDT

This example sets all of the settings that you can currently tune to their defaults:

Code:
<html>This is my gallery!<script type="text/javascript">
image_montage_config = {
	targetHeight: 280, // Each row of images will be at least this high
	targetWidth: 2000, // Set large enough to accomodate the odd image that spans the entire screen width
	thumbsPerFetch: 15, // How many images to fetch in a batch for endless scrolling pages
	thumbsPerPage: 35, // How many images per page when pagination is turned on
	showCaptions: true, // Should we overlay captions on top of images?
	space : {
		width: 15, // What spacing should we try to achieve between images
		stretch: 35, // How many pixels should the gap between images grow by at most?
		shrink: 50 // How many pixels should we allow that gap to shrink by (it can safely end up negative! images will have edges cropped) 
	},
	maxVertScale: 1.4 //What is the largest factor we should scale lines by vertically to fill gaps?
};</script></html>
Changelog

0.0 - Initial release! Unnumbered versions added support for galleries with right-click protection, and support for pagination.
1.0 - Fix the ability to use SmugMug menu options (delete photo, etc) with montage thumbnails.
1.1 - Fix extra bottom page navigation bar appeared even when not needed.
1.2 - On the "single page" display mode, now avoids having to fetch a small last page by rolling it into the one previous. Improves layout of the final images in the gallery for certain photo counts.

Last edited by thenickdude; Jul-08-2013 at 11:38 PM. Reason: Add per-gallery customizable settings
Old Jul-07-2013, 04:19 AM
#2
Linh is offline Linh
Major grins
Saw your reddit post, just wanted to add here that this is pretty awesome. I hope SmugMug is watching and gets this rolled into the new design. I really hope that's coming along.. I want to be able to esc out of pictures!

I would say pagination would be a nice addition if you're bored =) I wouldn't use it, but I can see it being useful on large galleries.
__________________
vote on the following smugmug feedback:
quick settings management
bulk download option for clients
Old Jul-07-2013, 10:42 AM
#3
rschofield is offline rschofield
Big grins
A Big THANKS!
Quote:
Originally Posted by Lamah View Post
Recently, a certain third-party photohost updated its gallery layout to use amazing new image montages instead of thumbnails. This got me to thinking about SmugMug's thumbnail galleries, which are teensy-tiny. I'd really like a montage-style gallery instead of the regular thumbnail gallery.
Thank you so much, Lamah.

Your tweaks look great and I've already applied them to a few of my galleries.

Rick Schofield

P.S. I first read about them on http://www.thephoblographer.com/
Old Jul-07-2013, 02:03 PM
#4
RPBEATINGO is offline RPBEATINGO
ralphbeatingo
Hi,

This is really a great features. I tried this one but I have a problem on my photos. It is not fit to the frame of the thumbnails (http://www.ralphbeatingo.com/Photogr...7575&k=82JHksB) Can anyone please help me to make it fit the frame?

Last edited by David_S85; Jul-10-2013 at 09:12 PM. Reason: Removed full page big quote
Old Jul-07-2013, 02:36 PM
#5
tobyharriman is offline tobyharriman
SF Smuggger
tobyharriman's Avatar
Can't get it to work.
Humm i did everything you said. But can't get it to work. Maybe i have something previous that is conflicting? Any ideas?

I tried it here http://photography.tobyharriman.com/...9835&k=dTxjC8k
__________________
_____________________________________________

Toby Harriman
Photography + Design
Website | SmugMug |Blog | facebook | Google+ | flickr | 500px | Stipple
Old Jul-07-2013, 04:20 PM
#6
thenickdude is offline thenickdude OP
Software developer
thenickdude's Avatar
Quote:
Originally Posted by tobyharriman View Post
Humm i did everything you said. But can't get it to work. Maybe i have something previous that is conflicting? Any ideas?
You need to put that JavaScript code into the bottom JS, not the top :)

Quote:
Originally Posted by RPBEATINGO View Post
Hi,

This is really a great features. I tried this one but I have a problem on my photos. It is not fit to the frame of the thumbnails (http://www.ralphbeatingo.com/Photogr...7575&k=82JHksB) Can anyone please help me to make it fit the frame?
This is because it currently does not support galleries which have "right click protection" turned on. I will try to add support for that soon!

Last edited by thenickdude; Jul-07-2013 at 09:23 PM.
Old Jul-07-2013, 04:48 PM
#7
tobyharriman is offline tobyharriman
SF Smuggger
tobyharriman's Avatar
Quote:
Originally Posted by Lamah View Post
You need to put that JavaScript code into the bottom JS, not the top :)
Awe yeah duh!! Thanks

However it still isn't working, maybe it takes a minute But I will check in a few. Also I turned off right-click protection, but definitely will be another feature request to add!
__________________
_____________________________________________

Toby Harriman
Photography + Design
Website | SmugMug |Blog | facebook | Google+ | flickr | 500px | Stipple
Old Jul-07-2013, 05:06 PM
#8
thenickdude is offline thenickdude OP
Software developer
thenickdude's Avatar
Quote:
Originally Posted by tobyharriman View Post
Awe yeah duh!! Thanks

However it still isn't working, maybe it takes a minute But I will check in a few. Also I turned off right-click protection, but definitely will be another feature request to add!
I think I found the problem, please replace the code with the newest version:

http://s3.sherlockphotography.org/sm...gemontage.js?1
Old Jul-07-2013, 06:10 PM
#9
tobyharriman is offline tobyharriman
SF Smuggger
tobyharriman's Avatar
Quote:
Originally Posted by Lamah View Post
You need to put that JavaScript code into the bottom JS, not the top :)
Quote:
Originally Posted by Lamah View Post
I think I found the problem, please replace the code with the newest version:

http://s3.sherlockphotography.org/sm...gemontage.js?1
Humm still nothing
__________________
_____________________________________________

Toby Harriman
Photography + Design
Website | SmugMug |Blog | facebook | Google+ | flickr | 500px | Stipple
Old Jul-07-2013, 06:13 PM
#10
thenickdude is offline thenickdude OP
Software developer
thenickdude's Avatar
Quote:
Originally Posted by tobyharriman View Post
Humm still nothing
That's really weird, please replace this section:

Code:
/*
 * jQuery throttle / debounce - v1.1 - 3/7/2010
 * http://benalman.com/projects/jquery-throttle-debounce-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function(b,c){var $=b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
With the code found on this page:

https://raw.github.com/cowboy/jquery...le-debounce.js

That'll give me more debugging information to figure out exactly where it's going wrong.
Old Jul-07-2013, 06:35 PM
#11
tobyharriman is offline tobyharriman
SF Smuggger
tobyharriman's Avatar
Quote:
Originally Posted by Lamah View Post
That's really weird, please replace this section:

Code:
/*
 * jQuery throttle / debounce - v1.1 - 3/7/2010
 * http://benalman.com/projects/jquery-throttle-debounce-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function(b,c){var $=b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
With the code found on this page:

https://raw.github.com/cowboy/jquery...le-debounce.js

That'll give me more debugging information to figure out exactly where it's going wrong.

Alright I think I replaced what you want correctly.
__________________
_____________________________________________

Toby Harriman
Photography + Design
Website | SmugMug |Blog | facebook | Google+ | flickr | 500px | Stipple
Old Jul-07-2013, 07:09 PM
#12
thenickdude is offline thenickdude OP
Software developer
thenickdude's Avatar
Found it! The code in your JS before mine starts (a huge jumble of random letters), is missing a semicolon on the end. Add a semicolon to the end of that and you should be golden. Your images look amazing, by the way.

You'll probably also want to tune the CSS to increase the contrast of your photo captions, either by adding a new rule to brighten them up:

Code:
body.ss-montage .photo .caption {
  color:#eee;
}
Or by tuning the opacity of the black fill in the captions that the montage CSS already defines:

Code:
body.ss-montage #allthumbs_stretch .photo .caption {
	position:absolute;
	bottom:1px;
	left:1px;
	right:1px;
	background-color:rgba(0,0,0,0.6); /* Changed from 0.3 to 0.6 */
	padding:5px;
	
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
Old Jul-07-2013, 07:18 PM
#13
tobyharriman is offline tobyharriman
SF Smuggger
tobyharriman's Avatar
Quote:
Originally Posted by Lamah View Post
That's really weird, please replace this section:

Code:
/*
 * jQuery throttle / debounce - v1.1 - 3/7/2010
 * http://benalman.com/projects/jquery-throttle-debounce-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function(b,c){var $=b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
With the code found on this page:

https://raw.github.com/cowboy/jquery...le-debounce.js

That'll give me more debugging information to figure out exactly where it's going wrong.
Quote:
Originally Posted by Lamah View Post
Found it! The code in your JS before mine starts (a huge jumble of random letters), is missing a semicolon on the end. Add a semicolon to the end of that and you should be golden. Your images look amazing, by the way.

You'll probably also want to tune the CSS to increase the contrast of your photo captions, either by adding a new rule to brighten them up:

Code:
body.ss-montage .photo .caption {
  color:#eee;
}
Or by tuning the opacity of the black fill in the captions that the montage CSS already defines:

Code:
body.ss-montage #allthumbs_stretch .photo .caption {
	position:absolute;
	bottom:1px;
	left:1px;
	right:1px;
	background-color:rgba(0,0,0,0.6); /* Changed from 0.3 to 0.6 */
	padding:5px;
	
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
BOOOM, that did it, really appreciate it. And I just hid the captions from that page, I like it with nothing :) Thanks for all the help. this is what I have been looking for.
__________________
_____________________________________________

Toby Harriman
Photography + Design
Website | SmugMug |Blog | facebook | Google+ | flickr | 500px | Stipple
Old Jul-07-2013, 07:31 PM
#14
tobyharriman is offline tobyharriman
SF Smuggger
tobyharriman's Avatar
Quote:
Originally Posted by tobyharriman View Post
BOOOM, that did it, really appreciate it. And I just hid the captions from that page, I like it with nothing :) Thanks for all the help. this is what I have been looking for.
No just the right-click protect and were pretty close to good :)
__________________
_____________________________________________

Toby Harriman
Photography + Design
Website | SmugMug |Blog | facebook | Google+ | flickr | 500px | Stipple
Old Jul-07-2013, 08:33 PM
#15
thenickdude is offline thenickdude OP
Software developer
thenickdude's Avatar
It now supports both paginated galleries and right-click protected galleries! Updated both the CSS and the JS.
Old Jul-07-2013, 08:42 PM
#16
tobyharriman is offline tobyharriman
SF Smuggger
tobyharriman's Avatar
Quote:
Originally Posted by Lamah View Post
It now supports both paginated galleries and right-click protected galleries! Updated both the CSS and the JS.
So just copy the css and js from top?

Also I noticed one thing that I can't do anymore. I use to click "get link" or even all the options for each photo, but now you can't do that cause it only shows an individual photo in the popup lightbox view. Kind of hard to explain. Like all these options: http://cl.ly/image/20221w1p460k
__________________
_____________________________________________

Toby Harriman
Photography + Design
Website | SmugMug |Blog | facebook | Google+ | flickr | 500px | Stipple
Old Jul-07-2013, 08:54 PM
#17
thenickdude is offline thenickdude OP
Software developer
thenickdude's Avatar
Quote:
Originally Posted by tobyharriman View Post
So just copy the css and js from top?
Yep!

Quote:
Originally Posted by tobyharriman View Post
I use to click "get link" or even all the options for each photo, but now you can't
Ah right, I see that too, I'm investigating now.

EDIT: That bug has now been fixed, so please update your JS and CSS from the links at the top again.

Last edited by thenickdude; Jul-07-2013 at 09:12 PM.
Old Jul-07-2013, 10:35 PM
#18
tobyharriman is offline tobyharriman
SF Smuggger
tobyharriman's Avatar
Quote:
Originally Posted by Lamah View Post
It now supports both paginated galleries and right-click protected galleries! Updated both the CSS and the JS.
Quote:
Originally Posted by Lamah View Post
Yep!



Ah right, I see that too, I'm investigating now.

EDIT: That bug has now been fixed, so please update your JS and CSS from the links at the top again.
Alright cool so I think you updated the issue. Now you go to share>get link and then click on photo and it brings up page I was looking for. That works for me however, but maybe a recommendation have it like highlight photo or something, to let someone know what photo they are on, or something to make it obvious what photo the viewer is on?
__________________
_____________________________________________

Toby Harriman
Photography + Design
Website | SmugMug |Blog | facebook | Google+ | flickr | 500px | Stipple
Old Jul-07-2013, 11:16 PM
#19
RPBEATINGO is offline RPBEATINGO
ralphbeatingo
Quote:
Originally Posted by Lamah View Post
Yep!



Ah right, I see that too, I'm investigating now.

EDIT: That bug has now been fixed, so please update your JS and CSS from the links at the top again.
You mean the first code on the top is already working to fit the photos on the frame? just copy and paste it again? http://www.ralphbeatingo.com/Photogr...3465&k=GBdS5CJ
Old Jul-07-2013, 11:18 PM
#20
RPBEATINGO is offline RPBEATINGO
ralphbeatingo
Quote:
Originally Posted by Lamah View Post
It now supports both paginated galleries and right-click protected galleries! Updated both the CSS and the JS.
Hi, the updated CSS and the JS is on the top the first code you posted? I tried it, but it's still the same. http://www.ralphbeatingo.com/Photogr...3465&k=GBdS5CJ
Page 1  of  5
1 2 3 4 5
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Issue with image sizes in galleries chipphillips SmugMug Support 1 Nov-12-2010 05:14 PM
Custom image sizes in galleries and featured galleries jamesclear Legacy SmugMug Customization 2 Oct-21-2010 05:35 PM
Search Useless for Thumbnail Galleries BigRed Legacy SmugMug Customization 3 Sep-19-2010 01:33 PM
Getting 2 thumbnail columns with less than 6 galleries Enitsugua Legacy SmugMug Customization 2 Sep-14-2009 03:00 PM
A Smugmug world with color-managed browsers jfriend SmugMug Support 78 Feb-19-2008 03:58 PM


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