Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[READY] data-src format #21

Merged
merged 10 commits into from Nov 5, 2013

Conversation

thom4parisot
Copy link
Contributor

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)

This was referenced Sep 25, 2013
Closed
@Integralist
Copy link
Contributor

@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 thom4parisot mentioned this pull request Oct 30, 2013
12 tasks
Conflicts:
	test/unit/core.js
…ternal dollar and tests

Conflicts:
	test/unit/core.js
- initial tests are failing because the old feature is still working (good way to know the old expectation we are going to break)
- new tests are  not working because basically it's not done yet
- removed Imager `regex` option
- implemented simple `{width}` interpolation
@thom4parisot
Copy link
Contributor Author

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

@Integralist
Copy link
Contributor

@oncletom cool, looks good

Integralist added a commit that referenced this pull request Nov 5, 2013
@Integralist Integralist merged commit 28d8843 into bbc:refactoring-base Nov 5, 2013
@thom4parisot thom4parisot deleted the feature-data-src branch November 5, 2013 16:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants