Sencha.io Src is one of the cloud services offered as a part of Sencha.io, and solves a common problem that mobile developers face: how to design for multiple screen resolutions.
We’re thrilled that the service is now handling many hundreds of images per second for mobile sites and applications all around the world. And we also very pleased to announce a set of new and experimental features to the service, available today.
Support for device orientation
Sencha.io Src recognizes devices according to their user-agents, and scales images to their known screen sizes. This however, is not able to take account of the orientation of the device. An iPhone is well-known to have a screen of 320×480 pixels, but when an app is being used in landscape orientation, an image ought rather be constrained to 480×320.
To solve this, you can now explicitly set screen orientation, and to do so, the service’s API now accepts ‘
portrait‘ or ‘
landscape‘ in the URL:
<img src='http://src.sencha.io/landscape/http://sencha.com/files/u.jpg' alt='Constrained to WxH, W greater than H' />
window API supports it, and set a cookie accordingly. Subsequent requests to sencha.io Src will then indicate the current orientation, which can be detected using ‘
detect‘ in the URL:
<script src='http://src.sencha.io/screen.js'></script> <img src='http://src.sencha.io/detect/http://sencha.com/files/u.jpg' alt='Constrained to WxH, W greater than H' />
Try out the test page with an iPhone, for example, and try reloading the page with different orientations.
(As the documentation points out, you cannot always guarantee that the cookie has been set prior to a non-deferred image download, so you may need to use this in conjunction with document
load events in regular web pages, as we do in the example above.)
screen.js script also takes various screen-size measurements through the browser’s DOM and BOM APIs, and these can be also be used to adjust screen sizes as an alternative to user-agent detection.
For example, if you want an image to be declaratively constrained by the
<script src='http://src.sencha.io/screen.js'></script> <img src='http://src.sencha.io/screen.width/http://sencha.com/files/u.jpg' alt='My JS-measured image' />
This approach anticipates a ‘future-friendly’ alternative to user-agent detection, and also allows you to specify other types of measurements: for example,
document.body.clientWidth will measure the inner width of your document’s body, taking its margin into account. The trade-off is the possible race-condition between cookies, initial image requests, and also the way in which some measurements will vary during the loading of a page. There are more notes in the documentation, and real-device testing remains highly recommended!
New formulaic manipulation
You’ve long been able to manipulate image dimensions using operators like ‘
-‘ (to deduct pixels) or ‘
x‘ (to scale by percentage).
r20 will ensure that an image is always constrained by a multiple of 20 pixels. This is often important when creating tile- or column-based layouts:
<img src='http://src.sencha.io/x50r20/http://sencha.com/files/u.jpg' alt='Half the screen, rounded down to nearest 20 pixels' />
The maxima operators allow you to indicate different size limits for mobile- and non-mobile devices. This is useful to ensure that, even if the actual browser cannot be recognized, its genre can be used to ensure sensible images are sent for client-side resizing. The code below, for example, will display an image no larger than 500 pixels on a desktop browser, and no larger than 100 pixels on a mobile browser:
<img src='http://src.sencha.io/n500m100/http://sencha.com/files/u.jpg' alt='Max 500 or 100, depending on browser' />
Take it for a spin
Please let us know how you get on with these new features, and what else you might like to see form the service in the future. Enjoy!