Homogeneous thumbnails

This topic helps solving a crucial personalization issue with web thumbnails. The dynamic nature of shot captions (as inroduced here) makes it an issue as it impacts the rendering algorithms used in web browsers. The wider a caption, the wider the whole table column. The remainder of this page provides key ideas in order to come up with good looking thumbnails regardless the dynamic nature of the shot captions.

Why is the dynamic nature of captions a problem? Suppose we use a keyword like $(MARKIN) which is a placeholder for a frame number. This number grows as the video plays, which means this number starts with 1 digit, then 2, 3 and so on. Because of this it will take more space in the shot caption and, since shots are contained in table cells, it will produce side effects, like "random" word wrapping, picture sliding, and so on. This definitely hinders the thumbnail and there ought to be something to circumvent that. Here is a screen capture of a "bad" looking thumbnail.

A bad looking thumbnail

In the first shot, the pic is below others, and its caption is not wrapped. It's not a bug of the product at least not arguably, it's just that the first shot is represented with frames with less digits than other shots, and this produces the effect. Needless to say, this may vary depending on the web browser. Definitely something to fix!

That's why formatting strings have been introduced. An effective to solve this is to pad numbers with as many zeros as needed so that numbers are always displayed with an identical amount of digits across all shots. For instance, if instead of writing image [$(MARKIN) / $(MARKOUT)], you write this : image [$(MARKIN, "0000") / $(MARKOUT, "0000")], then it tells the thumbnail generator that once the keywords are replace with actual in-context values, they must be also formatted, padded namely, with as many zeros as mentioned. In our example, this produces the desired effect :

A homogeneous thumbnail


You could even go a step further and prevent shot captions from being word wrapped at all, which in the screen capture above is the reason why shot captions are displayed on 2 lines instead of 1. In order to do this, just replace normal spaces with non-breaking spaces, as in : image [$(MARKIN, "0000") / $(MARKOUT, "0000")]. This produces the thumbnail below :

A homogeneous thumbnail, without word wrapping

Please note the lack of word wrapping obtained is a side effect. It's because thumbnails are web pages and we can replace placeholders with content along with html tags. Note that this side effect can be further used to add formatting and styles to your content.