Thumbnails on new image picker are mighty small

Jtring · February 25, 2020

Sometime recently there was an update to the image picker, the thing you open to select a feature image for a folder, gallery, or page as well as for a few other purposes. Once you get to a list of images in a gallery, the picker now displays 100x100 pixel square thumbnails with a preview button to blow them up. The preview button is helpful, but those 100x100 thumbnails are quite physically small on a higher resolution monitor. I find it hard to know what I'm looking at sometimes, and browsing almost everything with the preview button is a slow way to decide on a feature image. For reference, I'm running at QFD resolution (2560 x 1440). If those 100x100 thumbnails were on a 4K monitor, I'd guess few could see them at all well. May I request either sizing control on the thumbnails, as is the case for photos in the Organizer, or some sort of responsive interface design that takes the monitor resolution into account and offers up more pixels in the thumbnails on the higher res screens? Using the image's actual aspect ratio, rather than square thumbs, would nice too. (Oddly, I have actual-aspect-ratio thumbs in old galleries, but not in just-created ones.) The code appears to be using Small images, up to 400 x 300, so a larger thumbnail would not be pushing the resolution of the underlying image.

(Not quite sure where this discussion goes: it's not quite a bug but it seems to be more than a feature request given it addresses a recent change.)

Allen · February 25, 2020

Smugmug seems to not know what composition using thirds is. Any feature image I pick, the subject is usually cut in half when shown on a folder grid.
Same thing happens with square thumbs. And after they removed the crop and zoom tool there's no way to fix them.

Jtring · February 26, 2020

Two follow-ups to my post above.

The use of square or original aspect ratio thumbnails in the picker appears to be tied to whether the square thumbnails flag is set to on and off for SmugMug style galleries. The flag nominally defines the appearance of the thumbs on the left side of the screen in SmugMug style. It gets set in the appearance tab of the Customize/Gallery Settings (or via the Settings button in the Organizer). No control for square thumbnails appears if any other gallery style is selected. But even if you are using, say Collage Landscape, it appears that flag is still around and being used to define the shape of the thumbnails in the image picker. That linkage seems, at best, a very odd design choice on SmugMug's part. In any case, if square thumbnails are showing and you want original aspect ratio ones or vice versa, here's the recipe. Go to the appearance tab in Customize/Gallery Settings, change the gallery to SmugMug style, flip the Square Thumbnails setting, change the gallery back to the style you desire, and save your changes.

I was rather surprised to discover the image picker responds to user CSS and that I can use that to expand the thumbnails. The following, in my site CSS, works an expansion by a factor 1.5. It works with square or non-square thumbnails. It does not affect the selection of folders, galleries, and pages. Only images. It hadn't even occurred to me that user CSS could adjust the display on the design interface. That takes tweaking to a whole new level!

/* Enlarge the images in the "image picker", the control that lets the user select images.  The image picker
is used for selecting feature images, cover images, and contents of photo content blocks.  The Smugmug code 
uses a container box of size 110px x 110px for the thumbnails. The thumbnails themselves have width 100 and
height variable per the photo's aspect ratio.  If square thumbs are in use, the height is 100 for all images. 
This scales all up by a factor of 1.5. This does not apply to item selection where the choice
is among folders, pages, and galleries. 2020-02-25*/
/* First, resize the containers that hold the thumbnail image.  165 = 110 x 1.5*/
.sm-picker-list .sm-thumbnail.sm-thumbnail-image,
.sm-picker-list .sm-thumbnail-image.sm-thumbnail-selected .sm-thumbnail-content {
  width:165px;
  height:165px;
}
/* Then scale the thumbnail itself */
.sm-picker-list .sm-thumbnail.sm-thumbnail-image .sm-thumbnail-thumb-image img {
  transform: scale(1.5);
}

So, I guess I can address the concerns I raised above myself ... if via some unexpected means.

leftquark · February 26, 2020

There have been no changes to the Picker or the images in the picker. At one point we moved from using 100x100 "Th" sized images, to using the Small size images shrunk to 100x100. This would enable us to use larger thumbnails in the future, but we haven't had a chance to improve the picker. But things have been this way for a while. Glad you could find some CSS to make it better in the meantime.

Jtring · February 26, 2020

In reconstructing all this, I think the change I saw was from regular to square thumbnails. I realigned some of my presets after that recent change that set the gallery style for a new gallery to that of the default preset. Included in my realignment, I created a new (non-default) preset to be applied to new collage landscape galleries. Somehow that preset had the square thumbnails flag set. It wasn't in my old collage landscape preset. Then, in the last week or so, I've created several new galleries, applied the new collage landscape preset, saw the process for selecting a feature image looked somehow different, and mis-diagnosed what it was. Quite a long chain of connections! Now that I've unpacked all this, let's put a few things in the Feature Requests pile:

Do find a way to let those thumbnails be bigger on higher res screens. The preview button isn't enough.
Show the controls to set the square thumbnails flag in Customize/Gallery Settings/Appearance for all gallery styles, not just SmugMug style. (Or find another way to set thumbnail aspect ratio for the picker, decoupled from the shape of Smugmug style gallery tiles.)

leftquark · February 26, 2020

Interesting -- i wouldn't have expected the square thumbs setting to impact the Picker

Jtring · March 10, 2020

One follow-up for the record. The custom CSS I wrote to expand the thumbnails in the picker only works when reached via Customize/Gallery Settings. It does not work using the Settings button in the Organizer. The Organizer does not pick up user CSS.

Thumbnails on new image picker are mighty small

Comments