I have to agree with Sara - your altered gallery style looks awesome. I've moved away from smugmug-styled galleries but with your changes I might switch some of my galleries to use this too.
I have done the same and you have expressed my sentiment exactly - definitely food for thought!
Thank you for the new Carousel feature! But I miss the possibility to show captions, to navigate with the keyboard arrows, and I would also like the ability to randomize the images, like we can in the slideshow.
Thanks for the compliments. Of course I don't mind sharing! It was the community here that helped me figure this out, people like Leftquark, so I am more than happy to share.
It's just the default gallery style with some CSS to alter things. I have CSS in two places on my site, on page and in the theme settings. As far as I can remember there is nothing in the theme settings so it should work with just this:
If you don't mind, I'm going to add this to my Customizations page, with a credit and link back to your site. I'm sure others would love to have this!
If you don't mind, I'm going to add this to the page Customizations page, with credit and link back to your site. I'm sure others would love to have this!
Hey,
Yeah that's absolutely fine! I'd love to see if anyone can improve on it further...
OT-SM Gallery Centered
Is there a new thread about this customization yet? If so I haven't found it. I don't really want to post off topic (again), but I found a small error in mbridge87's code.
instead of this:
/* Move the thumbnails below the photo
This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g { webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
is should read like this:
/* Move the thumbnails below the photo
This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g { -webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
notice the missing "-" ...and just for the record, I changed the word "column" to "row".
At any rate I've added it to my site and after diddling with the code for hours it's working almost as desired. (the thumbnail block doesn't center properly in Safari for Windows, but it doesn't look so horrible that I can't live with it) Here's an example: http://www.sarasphotos.de/PublicGalleries/BikingSWFrance2012/
BTW, I 'm still having a couple of issues with the lightbox so don't be grossed out by the color scheme!
Aaron, if you do start a new thread, could you please post a cross link here?
carousesl is a great addition, really. Our photographer wanted here site being more interactive than our studio's one, hence she choosed the slideshow in the past. The trouble with the slideshow is, that for e.g. if you photo is in portrait mode, you get empty space on the left/right side of the photo, whereas carousel fills it with the content of other photos.
Now if we could get some kind of mixture of both, it would be cool. What I mean is:
- carousel being able to display images randomly, as slideshow is
- carousel auto-scroll/movement. Simply put - like a slideshow, just moving from left to the right, either in a smooth manner, or as a roller - scroll, wait 2-3 secs, scroll to other photo ...
Now if we could get some kind of mixture of both, it would be cool. What I mean is:
- carousel being able to display images randomly, as slideshow is
- carousel auto-scroll/movement. Simply put - like a slideshow, just moving from left to the right, either in a smooth manner, or as a roller - scroll, wait 2-3 secs, scroll to other photo ...
Thanks for the feedback Petr. A number of other users have requested these features too. You may vote on them here:
/* Make it so the thumbnails don't have a specific height + align centrally
YOU'LL WANT TO ADJUST THIS SO YOU GET THE # OF ROWS OF THUMBS YOU WANT.
THE BIGGER THE NUMBER THE MORE ROWS YOU GET. */
.sm-gallery-tilesnav {
float: none !important;
min-height: 100px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
I had to leave that code as it was in my original version, like this:
/* Make the thumbnails fit the width of the page Also push it down 20 pixels so it's not so close to the captions. ALTER THIS TO YOUR LIKING */ .sm-gallery .sm-gallery-images .sm-gallery-tiles-container { width: 100% !important; margin-top: 0px !important; } /* Make it so the thumbnails don't have a specific height + align centrally YOU'LL WANT TO ADJUST THIS SO YOU GET THE # OF ROWS OF THUMBS YOU WANT. THE BIGGER THE NUMBER THE MORE ROWS YOU GET. */ .sm-gallery-tilesnav { min-height: 100px !important; margin-left: auto; margin-right: auto; }
Is there any negative in me leaving this how it was? If I change it to your updated version there are a few images missing from the right side of the filmstrip. I seem to remember this being one of the elements I had most trouble with.
Yours looks so good as you had it so I wouldn't change anything Max! I had to make a few alterations because my site used a left sidebar and the spacing got a bit funky. The difference is because I shrink the tiles-container to 90% to get it to display slightly centered while you keep it at 100% width and center/shrink the width of its parent DIV. Yours should be great for your site (as you saw, it worked perfectly!)
Aaron, I have implemented this version of Max's code without change for a feature gallery accessible directly from my top level menu.
The overall effect works well for my purpose at this stage. However I've noticed that each image and the thumbnail bar are not aligned correctly above and below each other (on my 30" monitor). One or either appears to be centering at a different point. On checking, I see this is also the case for your working example.
All the images are cropped to exactly the same dimensions and my thumbs are square, so I did not expect this result. Do you (or Max) have any suggestions as to how this can be fixed?
With this tidied up and once I can work out how to remove the distracting background image for this gallery only (suggestion?), I'll be one happy camper!
However I've noticed that each image and the thumbnail bar are not aligned correctly above and below each other (on my 30" monitor). One or either appears to be centering at a different point. On checking, I see this is also the case for your working example.
All the images are cropped to exactly the same dimensions and my thumbs are square, so I did not expect this result. Do you (or Max) have any suggestions as to how this can be fixed?
I ran into this same problem and eventually gave up. It can be done ... just with more effort than I had time for over the weekend. What we need to do is ensure that the width of the thumbnail section is the same width of the photo. Unfortunately we (SmugMug) use some fancy code to determine the proper width of image based on the width of the screen. I could give you code that works perfectly on your 30" monitor when viewed full screen but breaks when viewed on my 27" monitor or on someone's laptop. So what we really need to do is use @media queries to change the width of the thumbnail section based on, maybe 40 window screen sizes (to keep it fairly accurate).
I ran into this same problem and eventually gave up.
Thanks, but not good news (I think!).
I notice that as I drag the window size in, the thumbnail strip and image resize and realign but are always misaligned one with the other. This made me think there was a global issue at play, not one that changed for different window sizes and aspect ratios.
I use a slightly edited variation of the code. It is as follows:
/* ================================================
= MOVE THUMBNAILS BELOW PHOTO IN SMUGMUG LAYOUT =
================================================ */
/*change container width */
.sm-page-layout-region .sm-page-layout-region-body {
width: 80%;
}
/* Move the thumbnails below the photo
This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
/* Make the photo fit the width of the page so it's larger */
.sm-gallery .sm-gallery-images .sm-gallery-image-container {
width: 100% !important;
}
.sm-gallery-tiles-pagination {
display: none;
}
/* Make the thumbnails fit the width of the page
Also push it down 20 pixels so it's not so close to the captions. ALTER THIS TO YOUR LIKING */
.sm-gallery .sm-gallery-images .sm-gallery-tiles-container {
width: 100% !important;
margin: 10px 0 0 0 !important;
max-height: 110px;
}
/* Make it so the thumbnails don't have a specific height + align centrally
YOU'LL WANT TO ADJUST THIS SO YOU GET THE # OF ROWS OF THUMBS YOU WANT.
THE BIGGER THE NUMBER THE MORE ROWS YOU GET. */
.sm-gallery-tilesnav {
min-height: 100px !important;
margin-left: auto;
margin-right: auto;
}
/* Reduce the thumbnail margins */
.sm-gallery-smugmug .sm-gallery-tiles .sm-tile {
margin: 3px;
}
/*to center thumbnails */
.sm-tiles-column-organic .sm-tiles-spacing-6,
.sm-tiles-grid.sm-tiles-spacing-6 .sm-tiles-list {
margin: 0 0 0 0;
display: -webkit-flex; /* Safari */
-webkit-justify-content: center; /* Safari 6.1+ */
display: flex;
justify-content:center;
}
/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .sm-gallery-smugmug .sm-image {
border: 1px solid #999999;
padding: 0px;
width: 100%;
}
/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
position: relative;
display: block;
overflow: visible;
}
.sm-user-ui .sm-gallery-smugmug .sm-gallery-tiles-pagination {
max-height: 35px;
}
This code centers and distributes the thumbnails in all modern (CSS3) browsers. It also works pretty well in IE9 and Safari 5.1 for Windows - well enough that I can live with the idea of people looking at it until they upgrade to a decent browser. I have looked at it on Windows 7 & 8 systems using 13, 19, 20 & 24 inch monitors.
The only problem I seem to be having is that on larger monitors the picture does not fill up to fit the screen. It's as if some other hidden content block is taking up space at the bottom of my screen below the thumbnails. Hmmm...
This code centers and distributes the thumbnails in all modern (CSS3) browsers. It also works pretty well in IE9 and Safari 5.1 for Windows - well enough that I can live with the idea of people looking at it until they upgrade to a decent browser. I have looked at it on Windows 7 & 8 systems using 13, 19, 20 & 24 inch monitors.
The only problem I seem to be having is that on larger monitors the picture does not fill up to fit the screen. It's as if some other hidden content block is taking up space at the bottom of my screen below the thumbnails. Hmmm...
Nice implementation Sara. It mostly looks really good!
A few things:
1. Unfortunately the problem with these CSS customizations is that they're sort of like clothing -- you can change what's on top but not the body underneath. The same way that we can't make a child look like an adult just by changing his clothing we can't change the underlying image rendering just by applying some CSS We determine the size of the main image before it reads the last line of CSS. The code assumes there are thumbnails to the left and knows the image can only have a maximum amount of space in order to fit. The CSS is applied later, giving more room for the main image, but the code has already been run to determine what size the image should be. This is why the image max's out as a certain size. The only real way to fix this would be for us to build a new filmstrip gallery style. I'm very passionate about new gallery styles and hope that in my future on the team we can bring it to you. Until then, feel free to submit any feature requests on the Feature Requests Page and let us know how badly you want them!
2. On my 30" monitor it seems to have some problems with the nav icons. I had some problems when I was tweaking Max's code a bit. Your nav icons don't fill up the same width as the thumbnails so the right arrow ends up underneath the thumbnails. There's no way to scan right on the thumbnails
Thanks to Max, Sara and Aaron, the updated version of Max's gallery format is now presenting my feature gallery nicely in Chrome, Safari and Firefox on my large screen!
Thanks to Max, Sara and Aaron, the updated version of Max's gallery format is now presenting my feature gallery nicely in Chrome, Safari and Firefox on my large screen!
Nice! There is an oddness at the very tail end of the strip where the left arrow is twice as far away from the photo strip than the "pages" before, probably due to the remainder of the photo thumbs is less than in the pages before that. Not at all a deal killer though. If there was only one odd photo remaining in the strip, then the arrows would be very far away as seen with big monitors?
My Smugmug
"You miss 100% of the shots you don't take" - Wayne Gretzky
There is an oddness at the very tail end of the strip where the left arrow is twice as far away from the photo strip than the "pages" before, probably due to the remainder of the photo thumbs is less than in the pages before that. Not at all a deal killer though.
Nice! There is an oddness at the very tail end of the strip where the left arrow is twice as far away from the photo strip than the "pages" before, probably due to the remainder of the photo thumbs is less than in the pages before that. Not at all a deal killer though. If there was only one odd photo remaining in the strip, then the arrows would be very far away as seen with big monitors?
If you look at this page you can see it very clearly. I imagine that is because of the flex/justify-content attribute. I always encountered this issue in Flash-based filmstrip galleries as well, so it doesn't bother me too much. Probably the only way around this would be to somehow float the nav icons relative to the content size and not to the outer container.
Actually, as odd as this may look, it's probably more user-friendly than having the arrows change position.
BTW, DubDubDub, looks great! (And fascinating photos as well.)
Comments
If you don't mind, I'm going to add this to my Customizations page, with a credit and link back to your site. I'm sure others would love to have this!
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Hey,
Yeah that's absolutely fine! I'd love to see if anyone can improve on it further...
Max
Is there a new thread about this customization yet? If so I haven't found it. I don't really want to post off topic (again), but I found a small error in mbridge87's code.
instead of this:
/* Move the thumbnails below the photo
This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
is should read like this:
/* Move the thumbnails below the photo
This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
-webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
notice the missing "-" ...and just for the record, I changed the word "column" to "row".
At any rate I've added it to my site and after diddling with the code for hours it's working almost as desired. (the thumbnail block doesn't center properly in Safari for Windows, but it doesn't look so horrible that I can't live with it) Here's an example:
http://www.sarasphotos.de/PublicGalleries/BikingSWFrance2012/
BTW, I 'm still having a couple of issues with the lightbox so don't be grossed out by the color scheme!
Aaron, if you do start a new thread, could you please post a cross link here?
Thanks, Sara
carousesl is a great addition, really. Our photographer wanted here site being more interactive than our studio's one, hence she choosed the slideshow in the past. The trouble with the slideshow is, that for e.g. if you photo is in portrait mode, you get empty space on the left/right side of the photo, whereas carousel fills it with the content of other photos.
Now if we could get some kind of mixture of both, it would be cool. What I mean is:
- carousel being able to display images randomly, as slideshow is
- carousel auto-scroll/movement. Simply put - like a slideshow, just moving from left to the right, either in a smooth manner, or as a roller - scroll, wait 2-3 secs, scroll to other photo ...
Best regards,
Petr
(includes a few small fixes/changes)
Another working example here:
http://www.aaronmphotography.com/Customizations/Filmstrip/n-WK5N8/
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks for the feedback Petr. A number of other users have requested these features too. You may vote on them here:
1) https://smugmug.uservoice.com/admin/forums/17723-smugmug/suggestions/6974391-add-the-functionality-to-change-the-order-of-carou
2) http://feedback.smugmug.com/forums/17723-smugmug/suggestions/6910353-add-an-option-to-automatically-play-carousel-conte
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks for tinkering with the code and sharing it with all on your site! Hopefully it will now benefit others.
Quick question. I wanted to implement your alterations to the code but was unable to do so with the following section:
I had to leave that code as it was in my original version, like this:
/* Make the thumbnails fit the width of the page
Also push it down 20 pixels so it's not so close to the captions. ALTER THIS TO YOUR LIKING */
.sm-gallery .sm-gallery-images .sm-gallery-tiles-container {
width: 100% !important;
margin-top: 0px !important;
}
/* Make it so the thumbnails don't have a specific height + align centrally
YOU'LL WANT TO ADJUST THIS SO YOU GET THE # OF ROWS OF THUMBS YOU WANT.
THE BIGGER THE NUMBER THE MORE ROWS YOU GET. */
.sm-gallery-tilesnav {
min-height: 100px !important;
margin-left: auto;
margin-right: auto;
}
Is there any negative in me leaving this how it was? If I change it to your updated version there are a few images missing from the right side of the filmstrip. I seem to remember this being one of the elements I had most trouble with.
Thanks again,
Max
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
The overall effect works well for my purpose at this stage. However I've noticed that each image and the thumbnail bar are not aligned correctly above and below each other (on my 30" monitor). One or either appears to be centering at a different point. On checking, I see this is also the case for your working example.
All the images are cropped to exactly the same dimensions and my thumbs are square, so I did not expect this result. Do you (or Max) have any suggestions as to how this can be fixed?
With this tidied up and once I can work out how to remove the distracting background image for this gallery only (suggestion?), I'll be one happy camper!
I ran into this same problem and eventually gave up. It can be done ... just with more effort than I had time for over the weekend. What we need to do is ensure that the width of the thumbnail section is the same width of the photo. Unfortunately we (SmugMug) use some fancy code to determine the proper width of image based on the width of the screen. I could give you code that works perfectly on your 30" monitor when viewed full screen but breaks when viewed on my 27" monitor or on someone's laptop. So what we really need to do is use @media queries to change the width of the thumbnail section based on, maybe 40 window screen sizes (to keep it fairly accurate).
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I notice that as I drag the window size in, the thumbnail strip and image resize and realign but are always misaligned one with the other. This made me think there was a global issue at play, not one that changed for different window sizes and aspect ratios.
/* ================================================ = MOVE THUMBNAILS BELOW PHOTO IN SMUGMUG LAYOUT = ================================================ */ /*change container width */ .sm-page-layout-region .sm-page-layout-region-body { width: 80%; } /* Move the thumbnails below the photo This section of code works for all browsers except FireFox. */ .sm-gallery-smugmug .sm-gallery-images.yui3-g { -webkit-flex-direction: row !important; -ms-flex-direction: row !important; flex-direction: row !important; } /* Make the photo fit the width of the page so it's larger */ .sm-gallery .sm-gallery-images .sm-gallery-image-container { width: 100% !important; } .sm-gallery-tiles-pagination { display: none; } /* Make the thumbnails fit the width of the page Also push it down 20 pixels so it's not so close to the captions. ALTER THIS TO YOUR LIKING */ .sm-gallery .sm-gallery-images .sm-gallery-tiles-container { width: 100% !important; margin: 10px 0 0 0 !important; max-height: 110px; } /* Make it so the thumbnails don't have a specific height + align centrally YOU'LL WANT TO ADJUST THIS SO YOU GET THE # OF ROWS OF THUMBS YOU WANT. THE BIGGER THE NUMBER THE MORE ROWS YOU GET. */ .sm-gallery-tilesnav { min-height: 100px !important; margin-left: auto; margin-right: auto; } /* Reduce the thumbnail margins */ .sm-gallery-smugmug .sm-gallery-tiles .sm-tile { margin: 3px; } /*to center thumbnails */ .sm-tiles-column-organic .sm-tiles-spacing-6, .sm-tiles-grid.sm-tiles-spacing-6 .sm-tiles-list { margin: 0 0 0 0; display: -webkit-flex; /* Safari */ -webkit-justify-content: center; /* Safari 6.1+ */ display: flex; justify-content:center; } /* Add 1 pixel border around the thumbnails and photos */ .sm-user-ui .sm-gallery-smugmug .sm-image { border: 1px solid #999999; padding: 0px; width: 100%; } /* Set the overflow of the images to be visible so the border actually displays properly */ .sm-user-ui .sm-gallery-smugmug .sm-tile-content { position: relative; display: block; overflow: visible; } .sm-user-ui .sm-gallery-smugmug .sm-gallery-tiles-pagination { max-height: 35px; }This code centers and distributes the thumbnails in all modern (CSS3) browsers. It also works pretty well in IE9 and Safari 5.1 for Windows - well enough that I can live with the idea of people looking at it until they upgrade to a decent browser. I have looked at it on Windows 7 & 8 systems using 13, 19, 20 & 24 inch monitors.
The only problem I seem to be having is that on larger monitors the picture does not fill up to fit the screen. It's as if some other hidden content block is taking up space at the bottom of my screen below the thumbnails. Hmmm...
Here's an example: http://www.sarasphotos.de/PublicGalleries/BikingSWFrance2012/i-b6s4DvN
I'd appreciate hearing if it works on a Mac (it should work after Safari 6.1).
Cheers,
Sara
Nice implementation Sara. It mostly looks really good!
A few things:
1. Unfortunately the problem with these CSS customizations is that they're sort of like clothing -- you can change what's on top but not the body underneath. The same way that we can't make a child look like an adult just by changing his clothing we can't change the underlying image rendering just by applying some CSS
2. On my 30" monitor it seems to have some problems with the nav icons. I had some problems when I was tweaking Max's code a bit. Your nav icons don't fill up the same width as the thumbnails so the right arrow ends up underneath the thumbnails. There's no way to scan right on the thumbnails
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I wonder where that error is coming from. I'll take a look at it on a 30" monitor later today and see if it renders the same.
Thanks for the help. At least now I won't waste any more time trying to make the image larger!
Cheers, Sara
Mac OS Yosemite w/Chrome
Edit: Works perfectly in Safari!
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Looks like adding width:100% to the tilesnav fixes it
.sm-gallery-tilesnav { min-height: 100px!important; margin-left: auto; margin-right: auto; [COLOR="Red"] width: 100% !important;[/COLOR] }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Chrome v39.0 -
Safar1 8.0.2
Didn't make a difference if I resized the window to full screen or tiny. All looks good.
"You miss 100% of the shots you don't take" - Wayne Gretzky
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Nice! There is an oddness at the very tail end of the strip where the left arrow is twice as far away from the photo strip than the "pages" before, probably due to the remainder of the photo thumbs is less than in the pages before that. Not at all a deal killer though. If there was only one odd photo remaining in the strip, then the arrows would be very far away as seen with big monitors?
"You miss 100% of the shots you don't take" - Wayne Gretzky
If you look at this page you can see it very clearly. I imagine that is because of the flex/justify-content attribute. I always encountered this issue in Flash-based filmstrip galleries as well, so it doesn't bother me too much. Probably the only way around this would be to somehow float the nav icons relative to the content size and not to the outer container.
Actually, as odd as this may look, it's probably more user-friendly than having the arrows change position.
BTW, DubDubDub, looks great! (And fascinating photos as well.)
Cheers,
Sara