Customize SmugMug Gallery Style

LiamHammo · September 25, 2013

I have been using SmugMug for a little while and it is going alright so far, but I really don't like the SmugMug Gallery Style.

I like the overall look of it however it doesn't put enough emphasis on the images imo. Is there a way of customising it to look like the image attached?

I am wanting to move the image from the right side to the left and limit the image thumbnails to 2 columns and make the main image stretch to fix the page.

Is this possible? I am fairly new to all of this and have very limited coding knowledge so and help would be greatly appreciated.

Thanks

einat · October 8, 2013

BUMP!
I'd like to customise that SM style as well

leftquark · October 8, 2013

I've had a feature request to be able to customize gallery layouts since the beginning. Who knows if it'll ever come. Right now you can't easily change the gallery layouts.

You can swap the location of the thumbnails and the image by doing the following CSS:

/* In SmugMug Layout, swap the thumbnails and the image.
    The image moves to the left and the thumbnails on the right. */
.sm-gallery-smugmug .sm-gallery-image-container {
  float: left !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 comments section left as well */
.sm-gallery-viewport-1440 .sm-gallery-comments-container {
  margin-left: 0% !important;
}

/* Move the main image left so it lines up properly with the left side of the area */
.sm-gallery {
  margin-left: 0px !important;
}

I've been trying to find a way to resize the thumbnails but can't seem to figure it out. It seems that SM is automatically figuring out the # of columns required based on the screen size.

This makes the image area bigger, but the thumbnails become all screwed up. Don't use this code but it's what I was looking into.

.yui3-u .sm-gallery-image-container {
  width: 80% !important;
}

.yui3-u .sm-gallery-tiles-container {
  width: 20% !important;
}

einat · October 8, 2013

Thanks, Aaron

LiamHammo · October 8, 2013

I have spoken with a web dev and he was telling me that the only way to increase the thumbnail and image size you would have to create a whole new template for the gallery. He was however able to reduce the number of columns for me by reducing the width of the thumbnail column.

It looks alright but not exactly what I wanted.

.sm-gallery-tiles-container { float: right !important; width:30% !important; }

.sm-gallery-image-container{ float: left !important; width:70% !important; }

rht · October 9, 2013

I would also like to customise this.

Thanks for the CSS - you've given me some ideas for this, and now I'm going to miss a bike ride tonight and spend hours in front of the computer.

LiamHammo · October 9, 2013

rht wrote: »

I would also like to customise this.

Thanks for the CSS - you've given me some ideas for this, and now I'm going to miss a bike ride tonight and spend hours in front of the computer.

If you do get something I would be very interested in checking it out.

leftquark · October 9, 2013

I ran into the same issues with the thumbnails ... there's really no way to limit the number of columns that are displayed. I think SmugMug is using some javascript to dynamically change the widths of everything. There's no way we can over-ride the JavaScript. Perhaps if Lamah weighs in, he may know, but it's hit the peak of my ability to customize the page.

I've played with it some more and cleaned up some things. I actually liked the idea so much that I implemented it on my site. Figured it'd make it a bit more unique.

/* ================================================
   = 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. */
.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;
}

ChancyRat · October 9, 2013

Aaron, your water pics are breathtaking.

May I mention just one: http://www.aaronmphotography.com/Nature/Water/i-F5sXDNV/A

Anyway, did you see that you have the left/right arrows such that they are on the left and right side of the thumbnail group, instead of left and right of the big image? They're supposed to be image-located, I think?

EDIT: Nevermind. I see those arrows are supposed to be for the thumbnail groups. I missed the tiny little arrows below the single image.

rht · October 13, 2013

LiamHammo wrote: »

If you do get something I would be very interested in checking it out.

My apologies - I've been busy with organising aerial photo shoots and then cancelling them due to bad weather (turbulence and extreme heat). I'm onto it now.

Aaron: You've got a nice site there.

Edit: I give up on it. There isn't a way to make it display in a very elegant manner. I want image full width, with a neat row of thumnails underneath it. This can be done, but then the other elements are in the wrong place and as said above, you've got no control over the display of the thumbnails.

brandofamily · October 13, 2013

leftquark wrote: »
I ran into the same issues with the thumbnails ... there's really no way to limit the number of columns that are displayed. I think SmugMug is using some javascript to dynamically change the widths of everything. There's no way we can over-ride the JavaScript. Perhaps if Lamah weighs in, he may know, but it's hit the peak of my ability to customize the page.

I've played with it some more and cleaned up some things. I actually liked the idea so much that I implemented it on my site. Figured it'd make it a bit more unique.
/* ================================================
   = 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. */
.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;
}

This code is AWESOME!!!!!
I'm going to give it a try and see how visitors like it...
Since we read left to right it makes perfect sense to put the large image on the left. It looks like you moved all the pieces around just right... I did however have trouble w/ the pagination moved up (it ran into the thumbs) , so I just set that to zero for now.

mrhoni · March 7, 2015

Old thread found while I was checking again if I can enlarge the thumbnails in the Smugmug style gallery. I put this code into a CSS block and nothing changes.

leftquark · March 11, 2015

There is currently no way to change the size of the thumbnails, however, stay tuned and check back in a month or so!

Cygnus Studios · August 23, 2015

This is just super cool, however, how do you move the "buy" button back to the large photo once you swap sides?

Customize SmugMug Gallery Style

Comments