Create two sizes for thumbs

[joachimtingvold]

As part of your modifications, all thumbnail sizes other than 150s and 1600 were removed. Getting rid of 75s seems fair (not even sure when that was used; not even on mobile), and also bumping the size to 1600px. However, we should produce two sizes by default, where one of them is smaller than 1600px, as that would be preferable when browsing via mobile.

Viewing the album on a mobile (iPhone6), it prefers 1024px before 1600px when viewing single images, and frankly, I cannot spot a difference with my bare eye. I haven't tested on a retina iPad, which might prefer the 1600px.

In any case; loading 1024px is about 50% the size of the 1600px, making loading over 3G/4G much faster.

Not saying we should do 1024px + 1600px, but we should do $somesize + 1600px.

I also realize that this is easy to customize, but I think it would be a good idea that the default setting is to produce two thumbs of different size.

[paolobenve]

begun development in branch more_thumb_sizes

but in Jason's code the only point where thumbnail sizes was used was when going fullscreen, and so it's now in this branch

However, I intend you want to manage the different screen sizes in javascript. How could it be accomplished?

• window.window.innerWidth and window.window.innerHeight
• window.screen.availWidth and window.screen.availHeight

What should I use?

[paolobenve]

or

$(window).height(); $(window).width();

?

[joachimtingvold]

Ah, wow, this was news to me, but you are right. I always assumed that the multiple thumbnail sizes would be used dynamically depending on the size of the browser window. So given the original PhotoFloat-sizes…

thumb_sizes = [ (75, True), (150, True), (640, False), (800, False), (1024, False) ]

... I always thought that it would use 640px if the browser was tiny, and 1024px if it was larger. On my "production" install, I have 150s + 1024 + 1600. Looking at it now, you are right that it always chooses 1024 for the non-fullscreen, and 1600 only for fullscreen.

I'm not entirely sure how the different JavaScript-variables regarding window size behaves on different clients -- I guess the main goal would be to differentiate between mobile units, and non-mobile units? Given retina screens etc. nowadays, I guess resolution could be rather high on those screens.

[joachimtingvold]

I guess it's not much use to change which image to load if you resize the browser after the images are loaded, as that requires you to load more stuff. In other words; get the size of the browser at load time, and then keep using that (so if you resize the browser after load, you would need to refresh to get bigger/smaller images loaded).

[joachimtingvold]

Since we already have jQuery, the $(window).height(); and $(window).width(); seems to be the most cross-platform enabled method to get the size of the browser window.

Pure JS would be something like this;

var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;

var height = window.innerHeight
   || document.documentElement.clientHeight
   || document.body.clientHeight;

[paolobenve]

done: I choose the thumbnail so that it's not smaller than max(screen width, screen height)

[paolobenve]

I made the python script include in every album the sizes array, so that javascript can know what sizes has been generated

[joachimtingvold]

Seems to work fine, however, the logic should probably be tweaked a bit. Currently it selects 1200px thumbnails even if the resolution of the browser is 1250x150px, at which even 800px would be sufficient enough, since the image is scaled down to keep its proportions. I don't think we need so many sizes either? 800px + 1200px + 1600px or something would be plenty? Thats three increments with approximately 50% increased size each step (measured in total pixels).

[paolobenve]

The criterium I choose is that the thumbnail isn't smaller than the available size, because if the browser enlarges it, it becomes blurred. Perhaps e finer criterium can be chosen

[paolobenve]

maybe now is better... check it

[joachimtingvold]

The logic seems to be working now, yes! Tried a lot of different variations, resizing browsers, going from non-fullscreen to fullscreen, and back, and it seems OK.

However, there seems to be an issue with scaling the images (by the browser and/or JS) in certain scenarios, causing the image to break it's proportions. Not sure if this is caused by these changes, but. Happens in relation to showing/removing the thumbnail-row in the bottom of the image.

I tested by using landscape image, setting browser width to 950px, then reducing the height. Started on 650px. At 701px the thumbnail-row appears. At 712px height, it's still fine, but at 713px height, it changes size and/or proportions. From 713px till 919px, the image is resized only in the height, losing it's proportions (becoming taller, but keeping the width). At 920px, it stops resizing the image, but keeps the disproportion. Increasing the height of the browser only results in the image being centered (but keeping its disproportion).

The opposite disproportion (becoming smaller, but keeping the width) can be achieved by refreshing the browser while at a big enough height (f.ex. 930px) having the same width as before (950px), and then decreasing the height.

950x650:

950x713:

950x919 (disproportion, stretching it higher):

950x950:

950x713 (disproportion, squeezing it lower):

[paolobenve]

appearing and disappering of bottom thumbnails is due to responsivness

[paolobenve]

could you suggest me a simple way to reproduce the misbehaviour?

[joachimtingvold]

I pretty much explained it in detail in the above post, giving screenshots at each step?

[joachimtingvold]

This does not happen on "my" fork of PhotoFloat (I haven't switched to this yet, but I plan to), and it does not happen in your "master" branch, so this seems to be caused by the new logic in the "more_thumb_sizes" branch.

The simplest way to explain the issue; make the size of your web browser 950x600. Navigate to a landscape image. Refresh (making sure to clear cache). Then drag/change the height of the window only (by dragging on the bottom side), and drag it down so it becomes higher. Watch the proportions of the image after the thumbnail-row on the bottom appears.

[paolobenve]

I think it's solved now, check it

[joachimtingvold]

I can confirm that this is solved, at least for the test I did.