60 is the magic number
There are four types of thumbnails:
And everyone who creates a gallery wonders:"How many grams are they hanging?" “How many previews should be defaulted in the gallery?”
If you have images with different aspect ratios and a “free container” and you use 1, 2 or 4 (if this type with its designers have not yet become extinct on the web), then this note will not make the weather for you. But if you use the 3rd type, or use 1 or 2 and all the images have the same aspect ratio, then you are here.
When you have a rubber design, the thumbnails smoothly spread over the free space. It looks very cool until the user has reached the bottom. Next, he sees the transition to the next page and ... "ladder" or "tooth", these are the last few thumbnails that stick out from the general grid. That's when people start using CSS tricks, center them, and generally dip them in full to achieve the perfect design. Or they use such a cruel trick with kittens on masonry , still tailing their tails off ... But they are computer judges.
My own personal markers with gnawed caps and ink drunk prefer fixed galleries where there is a space between the pictures and from the edges. Here are these:
')
I use masonry and magnific popup , and the default number of images in my galleries is 60 .
Sixty (60) is a number that is divisible by 2, 3, 4, 5 and 6 and, of course, by 1.
Sowing the magic of numbers allows you to reach an audience from “mobile phones” to large-format computers without distortion and other uncontrolled ride of your gallery design.
Of course, the taste and color are Google and Yandex, there is a Lebedev and there is “every third guru”, but in terms of creating a simple gallery without breaking your head this trick (60!) Will certainly serve you well.
The example thumbnails are 160 by 300 pixels. My personal observation as a spectacle, 300 pixels in length and% scale in height is a very convenient and compact solution. Thus, 60 thumbnails in imagemgick quality 80m will take you about 600kb of traffic (8 to 12kb each), which you can deftly wrap in lazyload like this example (I'm not the author of the example!).
ZY, without advertising rights - the best markers are for children. They can nibble, smear tongue and teeth without a chance to get rid of. This method gives +2 to the algorithms, because the brain works better. Wow better than themchips nuts.
About the magic of the number 69 and its practical application, I will tell in the following articles.
upd : with pictures some kind of nonsense. I insert them, then Habr tries to do something and issues
- fixed in length and% in height from the original
- fixed in height and% in length from the same original
- fixed in length and height (with clipping part after scaling, which is not inscribed, for example 300x150)
- percentage scale (25% of the original, for example)
And everyone who creates a gallery wonders:
If you have images with different aspect ratios and a “free container” and you use 1, 2 or 4 (if this type with its designers have not yet become extinct on the web), then this note will not make the weather for you. But if you use the 3rd type, or use 1 or 2 and all the images have the same aspect ratio, then you are here.
When you have a rubber design, the thumbnails smoothly spread over the free space. It looks very cool until the user has reached the bottom. Next, he sees the transition to the next page and ... "ladder" or "tooth", these are the last few thumbnails that stick out from the general grid. That's when people start using CSS tricks, center them, and generally dip them in full to achieve the perfect design. Or they use such a cruel trick with kittens on masonry , still tailing their tails off ... But they are computer judges.
My own personal markers with gnawed caps and ink drunk prefer fixed galleries where there is a space between the pictures and from the edges. Here are these:
')
I use masonry and magnific popup , and the default number of images in my galleries is 60 .
Sixty (60) is a number that is divisible by 2, 3, 4, 5 and 6 and, of course, by 1.
Sowing the magic of numbers allows you to reach an audience from “mobile phones” to large-format computers without distortion and other uncontrolled ride of your gallery design.
Of course, the taste and color are Google and Yandex, there is a Lebedev and there is “every third guru”, but in terms of creating a simple gallery without breaking your head this trick (60!) Will certainly serve you well.
The example thumbnails are 160 by 300 pixels. My personal observation as a spectacle, 300 pixels in length and% scale in height is a very convenient and compact solution. Thus, 60 thumbnails in imagemgick quality 80m will take you about 600kb of traffic (8 to 12kb each), which you can deftly wrap in lazyload like this example (I'm not the author of the example!).
ZY, without advertising rights - the best markers are for children. They can nibble, smear tongue and teeth without a chance to get rid of. This method gives +2 to the algorithms, because the brain works better. Wow better than them
About the magic of the number 69 and its practical application, I will tell in the following articles.
<img src="1449681149734756164123" alt="image"/> Source: https://habr.com/ru/post/272773/
All Articles