Displaying Search Result Thumbnails in Correct Aspect Ratio

highluxphotohighluxphoto PhotographerNew ZealandRegistered Users Posts: 8 Big grins
edited July 22, 2020 in SmugMug Customization
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

Comments

  • JtringJtring Major grins CaliforniaRegistered Users Posts: 627 Major grins
    edited July 26, 2020

    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;
    }
    
    
    Jim Ringland . . . . . jtringl.smugmug.com
  • BigRedBigRed Major grins Central MarylandRegistered Users Posts: 288 Major grins

    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;
    }
    
    http://www.janicebrowne.com - Janice Browne Nature Art & Photography
  • highluxphotohighluxphoto Photographer New ZealandRegistered Users Posts: 8 Big grins
    JIm, thanks so much - this is perfect! Worked very well, although I will scale the images down a little.
Sign In or Register to comment.