As of now, only custom codes and Slick field formatter support aspect ratio. Views style plugin doesn't.
Aspect ratio will fix excessive height issue with lazyloaded images. This impresses empty white space until all images are loaded.
This is not the module bug, nor Slick library, but more about the way 1px images rendered by browsers.
You can easily reproduce it without the modules, nor libraries, just plain HTML with 1px image SRC and the non-regular target WIDTH and HEIGHT:
Non-regular dimensions:
http://jsfiddle.net/z6ge4xnj/
http://jsfiddle.net/z6ge4xnj/3/
Regular or square dimensions:
http://jsfiddle.net/z6ge4xnj/1/
It seems to look good with squares, but not with non-regular dimensions.
Notice how the 1px image is taller than the rest while their dimensions are similar.
The issue only applies when using lazyload ondemand, but relatively not with Progressive loading.
Current fixes:
- To use lazyload Progressive.
- Or simply empty the lazyload option, reasonable for small images.
- To use Field formatter where applicable since it has more robust field options.
References:
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | 1px-with-squares-ok.png | 1.98 KB | gausarts |
| #6 | 1px-with-irregular-dimensions-issue.png | 4.82 KB | gausarts |
| #3 | slick-views-support-aspect-ratio-2795415.patch | 2.97 KB | gausarts |
Comments
Comment #2
gausarts commentedComment #3
gausarts commentedAttached to bring the Aspect ratio in.
Comment #5
gausarts commentedCommitted. Thanks.
Comment #6
gausarts commentedUploaded referenced images for just in case the site is down.