Equal-height Thumbnails (Like Google image search)

[Lee James]

Problem:
One problem with the thumbnail browser is all the wasted space in the screen: a folder full of landscape pictures has big gaps between each row, while a folder full of portrait pictures has big gaps between each column.

Solution:
A much better way of displaying thumbnails is to make all the thumbnails in each row equal height! (like Google image search does).

Not only is it more attractive, but it gets rid of all the wasted screen space, allowing more thumbnails on screen, and much larger thumbnails.

Here is an image I made to demonstrate the difference:
http://i.imgsafe.org/fb5c94b.png

Edit: another example where the aspect ratios are more mixed:
http://i.imgsafe.org/af48e66.png

I would really love XnView to display thumbnails this way. I would call this option "Dynamic Thumbnails" and turn it on by default.

User Preferences
This option has two user preferences:

A. "Gap size" - This option specifies the size of gaps between thumbnails
B. "Ideal thumbnail size" - This option specifies the desired thumbnail size, in area (for example: 40,000 pixels).

How each row is drawn
Here is basically how I would program it...

Starting with the first image in the row, we go through this procedure...

1. First, we find its 'ideal dimensions':
- We calculate what the 'Ideal Width' and 'Ideal Height' of the thumbnail would be, so that its total area = "Ideal Thumbnail Size" (whatever size the user has set it to in the preferences).

2. Next we work out how high the current row would ideally be:
- We take all the 'ideal heights' of the thumbnails so far in the current row and average them. We call this "IdealRowHeight". (Finding the average height means you get a good balance if there are mixture of different shapes in the row).

3. Next we work out the total width of all the thumbnails in the current row:
- We imagine every image in the row is as tall as the "IdealRowHeight", and calculate the total of their widths. We call this figure "TotalWidthOfThumbs".

4. We also work out the average width of the thumbnails in the current row:
- We take "TotalWidthOfThumbs" and divide it by the number of thumbnails in the row. We call this "AverageWidth"

5. Finally, we work out if the current row of thumbnails has grown wider than the screen yet. (If it is wider than the screen, we know it's time to start a new row.)
-We compare the size of these two things:
A) TotalWidthOfThumbs + all the gaps between thumbnails (ie the amount of width this row will need to display)
B) The total width of the screen + ¼ AverageWidth (we allow it to overlap by a quarter of a thumbnail because this is close enough)

If the row is not yet wider than the screen, we go back to stage (1) for the next thumbnail.

If the row is now wider than the screen, the current image is discarded (saved for the next row), and we draw the current row using all the other images so far. The row is drawn by simply setting the height of each thumbnail to = IdealRowHeight x (Screen width - Width of all the gaps) ÷ TotalWidthOfThumbs.

[oops66]

Hello,
... Interesting but only/mostly in the case of sort by ratio.

[Lee James]

Hello,
... Interesting but only/mostly in the case of sort by ratio.

That's not true! It makes no difference what order the images are in.

Here's another example of a typical folder with mixed ratios. Note how many more thumbnails you see on the right, and how they are generally all bigger...

http://i.imgsafe.org/af48e66.png

[XnTriq]

Related topics:

• custom thumbnail labels
• Reqst: Integer Thumb Tiling/Autofit thumbs
• Suggestion - Add a customized thumbnails size option setting
• Free size of thumbnails
• Displaying pictures on a "wall"

[oops66]

Hello,
... Interesting but only/mostly in the case of sort by ratio.

That's not true! It makes no difference what order the images are in.

Right, in that configuration, this is a little better too, but try also with some pictures with ratio=1.
However I support your request.

[Lee James]

try also with some pictures with ratio=1.

Square images are not too common, so I don't think I'll bother making another illustration just for that (I have to calculate all the sizes manually and it takes time).

Bear in mind, the point is not really about how much bigger the thumbnails are - you can change the size with the settings. The real point is that you are not wasting any screen space, and you therefore have more/bigger thumbnails overall.

Other benefits:

1. It's more attractive

2. It always automatically fills the whole screen width perfectly

3. The traditional "grid" of thumbnails can be disorientating and feel unnatural. But with this method, each row is slightly distinct, with the gaps falling in different places. This makes it much easier for your eyes to move across the row and remember where you were looking. The experience becomes more natural, almost like "reading lines of text".

4. Traditional thumbnails really require borders in order to "make sense" of the empty space between them. This method looks perfect without any borders. It is therefore much more elegant.

(I am a professional designer by the way )

[Lee James]

I've made another illustration, this time using real images in a real folder on my hard drive. At this scale, only 1 extra thumbnail is visible, but the thumbnails are generally slightly larger and look neater:
http://i.imgsafe.org/f2eef5a.png

I also want to mention the 'Parent Directory' icon. It doesn't display correctly on my computer (see image on the left), but I think it is more attractive when the icon is not too big and not too small (see my suggestion on the right). I can provide graphics/icons if needed.

[helmut]

I briefly looked over the spec and saw the samle image. Thank you for your detailed description, Lee.

If I understand right, in the equal-height approach, thumbnail size depends on the context (row) the thumbnail is displayed. And the row depends much on the size of the program window. I guess if you have images with differing aspect ratios in one row, this won't work well.

All in all this would require recalculating thumbnails every time and caching thumbnails wouldn't be possible, anymore. Nowadays computers are fast and maybe a large thumbnail can be cached which is recalculated to the size needed.

So perhaps a good idea which would require some more investigation and thoughts and even a prototype.

[Lee James]

if you have images with differing aspect ratios in one row, this won't work well.

Admittedly, it works best when all the images are the same aspect ratio. However, it still works very well for mixed aspect ratios - as you can see in this example:
http://i.imgsafe.org/af48e66.png

All in all this would required recalculating thumbnails every time and caching thumbnails wouldn't be possible, anymore.

That is true. Personally I never cache thumbnails so I hadn't thought of this. On my computer, thumbnails generate very quickly so it's not an issue.

Nowadays computers are fast and maybe a large thumbnail can be cached which is recalculated to the size needed.

Excellent idea. I appreciate your comments

I briefly looked over the spec and saw the samle image. Thank you for your detailed description, Lee.

I know that my instructions above are probably confusing and not very easy to follow. So if required, I would be more than happy to make a YouTube video tutorial explaining very clearly how this effect would be programmed. I think some things are easier to explain with videos and diagrams rather than just with written instructions

"Simpler" idea...

Alternatively, I have just thought of a much "simpler" version of this idea. It removes all the unused space around icons with 2 simple methods:

• All portrait icons have the space removed from the left and right sides
• If an entire row contains landscape images, all the excess space is removed from above and below it

This method would not require the thumbnails to be re-generated and would still make much better use of the screen space. Though of course I would prefer my original idea, this is just a simpler alternative.

[tboy]

Excellent suggestion !!!
More than EXCELLENT.

[tboy]

Is this possible to be done ? Will be fantastic !!!

[spacorn]

Would love if this was possible!!