laziestloader icon indicating copy to clipboard operation
laziestloader copied to clipboard

Slug-based widths are not sorted correctly

Open sjwilliams opened this issue 9 years ago • 1 comments

If laziestloader is given slug-based widths, it incorrectly assumes that they're presorted from smallest to largest. So an example like this will fail to pick the correct rendition:

<img data-pattern="https://graphics8.nytimes.com/images/53rd-place-nytimestravel-1-{{size}}.jpg" data-widths="[{"size":320,"slug":"square320"},{"size":75,"slug":"thumbStandard"},{"size":151,"slug":"moth"},{"size":190,"slug":"filmstrip"},{"size":190,"slug":"articleInline"},{"size":600,"slug":"articleLarge"},{"size":163,"slug":"hpSmall"},{"size":50,"slug":"blogSmallThumb"},{"size":151,"slug":"blogSmallInline"},{"size":480,"slug":"blog480"},{"size":533,"slug":"blog533"},{"size":427,"slug":"blog427"},{"size":362,"slug":"tmagSF"},{"size":592,"slug":"tmagArticle"},{"size":500,"slug":"slide"},{"size":750,"slug":"jumbo"},{"size":750,"slug":"superJumbo"},{"size":640,"slug":"square640"},{"size":150,"slug":"thumbLarge"},{"size":225,"slug":"blog225"},{"size":177,"slug":"mediumFlexible177"},{"size":675,"slug":"master675"},{"size":495,"slug":"master495"},{"size":180,"slug":"master180"},{"size":149,"slug":"mediumSquare149"},{"size":315,"slug":"master315"},{"size":168,"slug":"smallSquare168"},{"size":252,"slug":"smallSquare252"}]" src="https://cms-service.stg.nytimes.com/data/cms/files/2015/12/27/100000004055844/53rd-place-nytimestravel-1-smallSquare252.jpg">

On quick inspection of the source, the internal bestFit() method does sort smallest to largest. The issue is likely here, where the slug/object-specific logic relates the best fit selection back to the original hash.

sjwilliams avatar Dec 29 '15 18:12 sjwilliams

And double check int-based widths, too. @wmandrews reported that [720,320] failed but [320, 720] worked for him. Seems like this should be sorted on line 186...

sjwilliams avatar Jan 17 '17 22:01 sjwilliams