search

bbc / Imager.js

Responsive images while we wait for srcset to finish cooking
Apache License 2.0
3.84k stars 224 forks source link

[READY] `data-src` format #21

Closed thom4parisot closed 10 years ago

thom4parisot commented 11 years ago

The intention

Imager is actually quite flexible on the data-src pattern as long as you master regular expressions.

Also, user needs might be simpler than a RegExp pattern that in most of the case.

The proposal

Controlling the replacement from data-src directly by using URI Template-like string variables (in fact deeply simplified).

From:

<div class="delayed-image-load" data-src="Assets/Images/Generated/A-{width}.jpg" data-width="1024"></div>
<div class="delayed-image-load" data-src="Assets/Images/Generated/B-{width}.jpg" data-width="1024"></div>
<div class="delayed-image-load" data-src="Assets/Images/Generated/C-{width}.jpg" data-width="1024"></div>

To:

<div class="delayed-image-load" data-src="Assets/Images/Generated/A-1024.jpg" data-width="1024"></div>
<div class="delayed-image-load" data-src="Assets/Images/Generated/B-1024.jpg" data-width="1024"></div>
<div class="delayed-image-load" data-src="Assets/Images/Generated/C-1024.jpg" data-width="1024"></div>

{width} is either replaced by any suitable availableWidths numeric value or, by default by data-width's value.

Additional PR will provide {width} interpolation (to replace by a string value, Flickr or Guardian case) and pixel density adjustement (eventually through a callback to deal with more complex replacement)

Integralist commented 11 years ago

@oncletom So is this proposal literally just automating the data-src attribute so the user doesn't have to specify an initial value (as that would be changed by Imager.js any way if the browser was outside the range of the specified width).

If that's what the intent is of this proposal then I think that's a good first start and worth cracking on with.

If that's not the intent and there is more work involved then please let me know.

thom4parisot commented 10 years ago

@Integralist I've fixed the typo and made the setTimeout more explicit in tests.

Integralist commented 10 years ago

@oncletom cool, looks good