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:

/* ================================================
   ================================================ */
/* 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, 2018

    Aaron, 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?


  • Really good one!

  • henrys-medienservice

    on September 13, 2016

    sorry doesnT work at all

  • Wade Courtney Photography

    on September 24, 2015

    I'd just like to know how you got thumbnails on the right and a large image on the left.

  • Ivor Wilson

    on September 24, 2015

    I 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, 2015

    Thank 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, 2015

    Thank you Aaron! I had no idea this could be done. I love the new look of my galleries!

  • Frame O'Ref

    on October 3, 2014

    hi, 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, 2014

    Hi. 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, 2014

    If you have already been using my code, just add:
    .sm-gallery-smugmug .sm-gallery-images.yui3-g {
    webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;

Powered by SmugMug Owner Log In