-
Notifications
You must be signed in to change notification settings - Fork 224
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- moved them in a single folder - made a separate `npm install` thing - removed Grunt from Imager dependencies
- Loading branch information
1 parent
c4677ea
commit a0f367a
Showing
26 changed files
with
130 additions
and
138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,5 +4,4 @@ node_modules | |
| .jpg | ||
| .png | ||
| .gif | ||
| Generated | ||
| .DS_Store | ||
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| Generated | ||
| node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,61 @@ | ||
| # Grunt Responsive Image Demo | ||
| # Imager.js Demos | ||
|
|
||
| This demo requires the following commands to be run... | ||
| This folder contains several demonstrations of how to use Imager. | ||
|
|
||
| Prior to run them, you need to clone or download this `git` repository: | ||
|
|
||
| - `npm install` (all dependencies specified in package.json) | ||
| - `brew install imagemagick` (for other installations see [http://www.imagemagick.org/script/binary-releases.php](http://www.imagemagick.org/script/binary-releases.php)) | ||
|
|
||
| Review the `Gruntfile.js` and update the custom sizes that you want to use (if no sizes are specified in the Gruntfile then 320, 640, 1024 are used)... | ||
|
|
||
| ```js | ||
| options: { | ||
| sizes: [ | ||
| { | ||
| width: 320, | ||
| height: 240 | ||
| }, | ||
| { | ||
| name: 'large', | ||
| width: 640 | ||
| }, | ||
| { | ||
| name : 'large', | ||
| width : 1024, | ||
| suffix : '_x2', | ||
| quality: 0.6 | ||
| } | ||
| ] | ||
| } | ||
| ```bash | ||
| git clone https://github.com/BBC-News/Imager.js.git | ||
| cd Imager.js/demos | ||
| ``` | ||
|
|
||
| ...be aware the names of the files need to change within your HTML... | ||
| ## Standard Demo | ||
|
|
||
| This example in a simple use case using [placehold.it](http://placehold.it/) to refrl the configured breakpoints. | ||
|
|
||
| ### Running the demo | ||
|
|
||
| ```bash | ||
| open default/index.html | ||
| ``` | ||
|
|
||
| ## Generating Responsives Images with Grunt | ||
|
|
||
| This example demonstrates how to use [Grunt](http://gruntjs.com/) to generate your own responsive images | ||
| and how to wire them with Imager. | ||
|
|
||
| ### Requirements | ||
|
|
||
| ```html | ||
| <div class="delayed-image-load" data-src="Assets/Images/Generated/A-320.jpg" data-width="1024" alt="alternative text A"></div> | ||
| <div class="delayed-image-load" data-src="Assets/Images/Generated/B-320.jpg" data-width="1024" alt="alternative text B"></div> | ||
| <div class="delayed-image-load" data-src="Assets/Images/Generated/C-320.jpg" data-width="1024" alt="alternative text C"></div> | ||
| This demo requires the following commands to be run... | ||
|
|
||
| ```bash | ||
| brew install imagemagick graphicsmagick | ||
| npm install -g grunt-cli | ||
| npm install | ||
| ``` | ||
|
|
||
| You can then pass those image sizes through to Imager.js along with a regex for Imager to parse the information... | ||
| [Check out `graphicsmagick` install notes for other systems](http://www.graphicsmagick.org/README.html) if needed. | ||
|
|
||
| You can also review the `Gruntfile.js` and update the custom sizes that you want to use [according to `grunt-responsive-images` documentation](https://github.com/andismith/grunt-responsive-images#readme)... | ||
|
|
||
| ```js | ||
| var imager = new Imager({ | ||
| availableWidths: [320, 640, 1024] | ||
| }); | ||
| ```bash | ||
| grunt | ||
| open grunt/index.html | ||
| ``` | ||
|
|
||
| For full details of the Grunt task options see the [grunt-responsive-images](https://github.com/andismith/grunt-responsive-images/) repo on GitHub. | ||
| ## Lazyloading images | ||
|
|
||
| This examples demonstrates how to lazy load responsive images as the user scrolls. | ||
|
|
||
| It is a proof of concept rather than a production recommendation. | ||
|
|
||
| ### Requirements | ||
|
|
||
| Please follow the requirements of *Generating Responsives Images with Grunt*. | ||
|
|
||
| ### Running the demo | ||
|
|
||
| ```bash | ||
| grunt | ||
| open lazyload/index.html | ||
| ``` |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <!doctype html> | ||
| <html dir="ltr" lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Imager.js</title> | ||
| <link rel="stylesheet" href="Assets/Styles/base.css"> | ||
| </head> | ||
| <body> | ||
| <h1>Imager.js</h1> | ||
| <p>Here we're using Grunt to generate a list of image sizes for us.</p> | ||
| <p>We then pass those sizes into Imager.</p> | ||
|
|
||
| <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> | ||
|
|
||
| <script src="../../Imager.js"></script> | ||
| <script> | ||
| var imager = new Imager({ | ||
| availableWidths: [320, 640, 1024] | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "name": "imager.js-demos", | ||
| "version": "0.0.0", | ||
| "private": true, | ||
| "description": "Imager.js Demos", | ||
| "main": "Gruntfile.js", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "keywords": [ | ||
| "imager", | ||
| "bbc", | ||
| "responsive", | ||
| "images", | ||
| "rwd" | ||
| ], | ||
| "author": "", | ||
| "license": "Apache-2", | ||
| "dependencies": { | ||
| "grunt": "^0.4.2", | ||
| "grunt-responsive-images": "^0.1.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters