Swap the Image and Thumbnails (SmugMug Layout)
By default the "SmugMug Layout" the thumbnails on the left and the main image on the right of the screen. If you'd like to swap them and make the image be on the left and the thumbnails on the right, use the following: Add the following code to your theme's Advanced CSS settings:
/* ================================================
= SWAP IMAGE AND THUMBNAILS IN SMUGMUG LAYOUT =
================================================ */
/* In SmugMug Layout, swap the thumbnails and the image.
The image moves to the left and the thumbnails on the right.
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;
}
/* Move the image to the left. This code is required for FireFox */
.sm-gallery-smugmug .sm-gallery-image-container {
float: left !important;
}
/* Move the comments section left as well */
.sm-gallery-content .sm-gallery-footer .sm-gallery-comments-container {
margin-left: 0% !important;
}
/* Move the thumbnails slightly to the right to give some space between image and thumbs */
.yui3-u .sm-gallery-tiles-container .sm-gallery-tilesnav {
margin-left: 5px !important;
}
/* Move the main image left so it lines up properly with the left side of the area */
.sm-gallery {
margin-left: 0px !important;
}
/* Move the thumbnails to the right side of the page */
.sm-gallery-tiles-container .sm-gallery-tiles-bar,
.sm-gallery-tiles-container .sm-gallery-tilesnav {
float: right;
}
/* Move the thumbnail pagination drop-down menu slightly up */
.sm-gallery-smugmug .sm-gallery-tiles-pagination {
margin-top: -30px;
}
RollingHillsImagery
on August 9, 2018Aaron, I've been using this tweak for a few years now with no issue. I changed my background colors in my CCS and now the gallieries have defaulted back to the thumbnails on the the left. The only code I changed was the navbar text and hover color codes in the CCS. Any ideas?
rollinghillsimagery.com
Jim Chen ＠ Water Light Photography
on April 18, 2017Really good one!
henrys-medienservice
on September 13, 2016sorry doesnT work at all
henry
Wade Courtney Photography
on September 24, 2015I'd just like to know how you got thumbnails on the right and a large image on the left.
Ivor Wilson
on September 24, 2015I cannot get this to work! I've pasted the code into /customize/content and design/entire site/theme/active theme/settings/advanced/custom css/edit, saved and published, but it doesn't do anything... Help!
Nizhoni Photo
on August 20, 2015Thank you so much for this tip and all your great tips on your page man! I really appreciate it and Smug Mug should be giving you a commission check for keep their customers from giving up in frustration
Allison Cipra Photography
on February 25, 2015Thank you Aaron! I had no idea this could be done. I love the new look of my galleries!
Frame O'Ref
on October 3, 2014hi, this is great and working in Chrome but Safari browser is not rendering it correctly. (the thumbnails stay on the left and image on the right even though comment section moves correctly to the left)
Paul Conrad Photography
on March 11, 2014Hi. Thanks for his code. Just seems intuitive to me to have the thumbs on the right.
Quick question: What does it mean when part of the code is in red after you place it in your Theme CSS?
Aaron Meyers
on February 11, 2014If you have already been using my code, just add:
with:
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}