Responsiveness #222

Closed
pisi opened this Issue Aug 25, 2013 · 7 comments

Comments

Projects
None yet
1 participant
@pisi
Owner

pisi commented Aug 25, 2013

A request has been made to teach Reel to be responsive and eventually scale and grow with its parent.

Such a feature might be performance heavyish, so an option switch responsive will be provided and will be set to OFF by default (at least for the time being).

@ghost ghost assigned pisi Aug 25, 2013

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Aug 25, 2013

Owner

Unfortunately, doing so for sprites and stitched setups is not possible without breaking the current compatibility (possible only in IE8+), so for the first phase, I will leave these modes out :( Hopefully this decision will change...

Owner

pisi commented Aug 25, 2013

Unfortunately, doing so for sprites and stitched setups is not possible without breaking the current compatibility (possible only in IE8+), so for the first phase, I will leave these modes out :( Hopefully this decision will change...

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Aug 25, 2013

Owner

For those who like to try this out, the work on this is being carried on the responsiveness branch

Owner

pisi commented Aug 25, 2013

For those who like to try this out, the work on this is being carried on the responsiveness branch

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Aug 28, 2013

Owner

So, until now, this feature supported only sequences. Now it supports stitched and sprites too. There is a small limitation however. IE's insufficiencies mean, that when you set responsive: true IE will fall back to disabled state for stitched and sprites in IE 8 or lower.

Owner

pisi commented Aug 28, 2013

So, until now, this feature supported only sequences. Now it supports stitched and sprites too. There is a small limitation however. IE's insufficiencies mean, that when you set responsive: true IE will fall back to disabled state for stitched and sprites in IE 8 or lower.

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Aug 28, 2013

Owner

There's one new feature coming alongside of this and that is substitution of (certain) data values in URLs.

Reel will process each and every image resource URL and substitute special markup with actual values from the data store. Marks made of @ character followed by upper case letter will be substituted with values either directly from data store (@W and @H for width and height) or calculated (@T is substituted with momentary timestamp in milliseconds).
Markup can appear anywhere in the folder name, file name or the query params (also in path option) and even multiple times.

For example, with URL like this:

image.jpg?size=@Wx@H

... the actual request will be for:

image.jpg?size=320x180

(for Reel 320 pixels wide and 180 high).

Currently supported width (@W), height (@H) and timestamp (@T). Will be adding one for user-defined custom method too.

Owner

pisi commented Aug 28, 2013

There's one new feature coming alongside of this and that is substitution of (certain) data values in URLs.

Reel will process each and every image resource URL and substitute special markup with actual values from the data store. Marks made of @ character followed by upper case letter will be substituted with values either directly from data store (@W and @H for width and height) or calculated (@T is substituted with momentary timestamp in milliseconds).
Markup can appear anywhere in the folder name, file name or the query params (also in path option) and even multiple times.

For example, with URL like this:

image.jpg?size=@Wx@H

... the actual request will be for:

image.jpg?size=320x180

(for Reel 320 pixels wide and 180 high).

Currently supported width (@W), height (@H) and timestamp (@T). Will be adding one for user-defined custom method too.

pisi added a commit that referenced this issue Aug 28, 2013

Added `$.reel.substitutes`, where you can define your own substitutio…
…n mark-function pairs. `@t` has been implemented this way. #222
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Aug 29, 2013

Owner

You can also define your own substitution method(s) inside the $.reel.substitutes object, by default holding the built-in $.reel.substitutes["T"] which substitutes @T with timestamp. Your function will receive data store get interface as only argument and it must return a string.

For example to create a quality substitute @Q:

$.reel.substitutes["Q"] = function( get ){
    if ( get("width") > 500 ) return "high"
    else return "low";
}

... which you can then use in URLs:

images/@Q/53.jpg

... to fetch two different qualities from two folders:

images/high/53.jpg // In case stage wider than 500 pixels
images/low/53.jpg // In case of narrower stage
Owner

pisi commented Aug 29, 2013

You can also define your own substitution method(s) inside the $.reel.substitutes object, by default holding the built-in $.reel.substitutes["T"] which substitutes @T with timestamp. Your function will receive data store get interface as only argument and it must return a string.

For example to create a quality substitute @Q:

$.reel.substitutes["Q"] = function( get ){
    if ( get("width") > 500 ) return "high"
    else return "low";
}

... which you can then use in URLs:

images/@Q/53.jpg

... to fetch two different qualities from two folders:

images/high/53.jpg // In case stage wider than 500 pixels
images/low/53.jpg // In case of narrower stage
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Sep 12, 2013

Owner

Merged into development branch ready for release.

Owner

pisi commented Sep 12, 2013

Merged into development branch ready for release.

@pisi pisi closed this Sep 12, 2013

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Nov 5, 2013

Owner

Released today as part of v1.3.0

Owner

pisi commented Nov 5, 2013

Released today as part of v1.3.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment