Displaying Search Result Thumbnails in Correct Aspect Ratio

highluxphoto

Does anybody have a code hack to force the thumbnails on the search results page to display in their correct aspect ratio (i.e. landscape & portrait) rather than the default of tightly packed square thumbnails? Or is there a setting I have missed?
Thanks

https://stock.highlux.photo

Jtring

You haven't missed any settings, but there is some simple CSS that will do the job. The basic code to get uncropped, original aspect-ratio images is real simple. Insert this in the custom CSS section on the Advanced tab of your theme.

/* This is the basic code needed to have search results show up without cropping (with the original aspect ratio)*/
.sm-user-ui .sm-search-result-img {
  background-size:contain;
}

The result doesn't look great to my eyes, so the code below has two tweaks to consider. This add a little extra margin around the images and make them a bit bigger. Regarding the latter, what SmugMug shows are cropped 200 x 200 portions of larger (but still fairly small) images. When using an uncropped image, you are effectively shrinking them. Expanding the space to 300 x 300 looks good to my eye if you like square blocks. Since many images are rectangular, 300 x 400 may be desirable too. I've shown the latter below. Best not to go larger than that. SmugMug uses 300 x 400 source images to support the search result display, so going larger would up-scale the images and give soft, vaguely out-of-focus-looking results. You can, of course, go smaller. Again, the code below should be inserted into the custom CSS section on the Advanced tab of your theme.

/* This is the basic code needed to have search results show up without cropping (with the original aspect ratio)*/
.sm-user-ui .sm-search-result-img {
  background-size:contain;
}

/* Optional:  Include this to add margin around the images.
The first group adds margin to all search images, including the pop-up images.
That last doesn't look right, so the second block of code undoes the first in that case.*/
.sm-user-ui .sm-search-result-img {
  margin:12px;
}
.sm-user-ui .yui3-overlay-content .sm-search-result-img {
  margin:0px;
}

/* Optional: Include this to expand the result tile size.  Adjust the height and width to taste.*/
.sm-user-ui .sm-search-tile,
.sm-user-ui .sm-search-result-img   {
  height:300px;
  width:400px;
}

BigRed

Just jumping in here to thank you both. This is something I've been meaning to figure out for years.
By the way... Because of some other cust's on my site, I also needed to adjust the background color for the expanded margins (there may be a better way, but this is working for me):

.sm-user-ui .sm-search-tile,
.sm-user-ui .sm-search-result-img {
  background-color:#2C2720;
}

highluxphoto

JIm, thanks so much - this is perfect! Worked very well, although I will scale the images down a little.