middleman-async-image 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +27 -5
- data/demo.gif +0 -0
- data/lib/middleman-async-image/extension.rb +5 -5
- data/middleman-async-image.gemspec +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2695b7fdcd355ab7149c49eba1eb6d8c07f714c8
|
4
|
+
data.tar.gz: 4b3fd03f53092eadabf83271543462e507546f93
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e59ccc7fd382cf9a201806d9f99883ec619b6af583bd8f71de8feba6f7a9d738385147df1cd11e5fc87a942cf11da0846f2cae339bf03b6b83fcc1f388ffd065
|
7
|
+
data.tar.gz: 3865e1b878b21dc532f16c2e09d511aab6825c0eedf2a86efff0ccfbaab31857440231eb940e224a46c9d87ed47530b1660978e2daf4878dcd8c7473dbfbfc8e
|
data/README.md
CHANGED
@@ -1,14 +1,38 @@
|
|
1
1
|
# Middleman Async Image
|
2
2
|
Load your images asynchronously with Middleman : like Medium.
|
3
3
|
|
4
|
+
![demo](demo.gif?raw=true)
|
5
|
+
|
4
6
|
## Why?
|
5
7
|
Because loading images on poor connections is really ugly. Medium as a great image loader so I develop a Gem to make it same as Middleman.
|
6
8
|
|
9
|
+
## But how exactly it works ?
|
10
|
+
This gem detect when you want to load an image asynchronously (when you're using the helper). It going to duplicate it, with really strong compression and scale in a separate folder. Then, a JS function will load the poor quality image firstly, and the HQ image asynchronously. When the great image will be loaded, the other image will disappear.
|
11
|
+
|
12
|
+
All you need to do, is using the following helper:
|
13
|
+
```
|
14
|
+
image_async_tag(path, options)
|
15
|
+
```
|
16
|
+
it works exactly as the middleman image_tag default helper.
|
17
|
+
|
18
|
+
## Dependencies
|
19
|
+
Middleman Async Image need [middleman-sprockets](https://github.com/middleman/middleman-sprockets/).
|
20
|
+
Go to your GemFile and set the following line wherever you want:
|
21
|
+
```
|
22
|
+
gem "middleman-sprockets"
|
23
|
+
```
|
24
|
+
then, set `activate :sprockets` in your config.rb.
|
25
|
+
|
7
26
|
## Configuration
|
8
27
|
You can set the image-dir of your choice (follow the Middleman assets directories configuration).
|
9
28
|
|
10
29
|
Simple configuration: just add `gem 'middleman-async-image'` to your __Gemfile__ and `activate :async_image` to your __config.rb__. If will work whatever your images dir.
|
11
30
|
|
31
|
+
Then, go to your main CSS file and set `//= require async-image`. Do the same in your JS application'file.
|
32
|
+
|
33
|
+
|
34
|
+
### Options
|
35
|
+
|
12
36
|
By default, compressed images are stored in the *compress* dir in your image folder. If you want to name this dir differently : add the following configuration to your __config.rb__:
|
13
37
|
```RUBY
|
14
38
|
activate :async_image do |i|
|
@@ -19,13 +43,11 @@ end
|
|
19
43
|
By default again, the compression level is *low (15)*. If you want to use a different one, you can configure it as the following:
|
20
44
|
```RUBY
|
21
45
|
activate :async_image do |i|
|
22
|
-
i.quality =
|
46
|
+
i.quality = 10
|
23
47
|
end
|
24
48
|
```
|
25
|
-
|
26
|
-
|
27
|
-
- Medium: 25
|
28
|
-
- High: 35
|
49
|
+
|
50
|
+
You can else set the scale as you want, using `i.scale` but we do not recommand to use this parameter if you don't know how to use it. By default it's by *.3*.
|
29
51
|
|
30
52
|
## Contributing
|
31
53
|
|
data/demo.gif
ADDED
Binary file
|
@@ -21,7 +21,7 @@ class AsyncImage < ::Middleman::Extension
|
|
21
21
|
end
|
22
22
|
|
23
23
|
def compress_dir
|
24
|
-
dir = "source/#{app.config[:images_dir]}/" +
|
24
|
+
dir = "source/#{app.config[:images_dir]}/" + extensions[:async_image].options[:compress_image_path]
|
25
25
|
unless Dir.exists?(dir)
|
26
26
|
FileUtils.mkdir(dir)
|
27
27
|
end
|
@@ -34,15 +34,15 @@ class AsyncImage < ::Middleman::Extension
|
|
34
34
|
|
35
35
|
helpers do
|
36
36
|
def image_async_tag(path, params={})
|
37
|
-
complete_path = "source/#{app.config[:images_dir]}/" +
|
37
|
+
complete_path = "source/#{app.config[:images_dir]}/" + extensions[:async_image].options[:compress_image_path] + '/' + path
|
38
38
|
FileUtils.mkdir_p(complete_path.match(/(.*\/)+(.*$)/)[1])
|
39
39
|
|
40
40
|
Magick::Image::read("source/#{app.config[:images_dir]}/" + path)[0]
|
41
|
-
.scale(
|
42
|
-
.write(complete_path){|f| f.quality =
|
41
|
+
.scale(extensions[:async_image].options[:scale])
|
42
|
+
.write(complete_path){|f| f.quality = extensions[:async_image].options[:quality] }
|
43
43
|
print(path + ' has been compressed')
|
44
44
|
|
45
|
-
params['data-compress'] = image_path(
|
45
|
+
params['data-compress'] = image_path(extensions[:async_image].options[:compress_image_path] + '/' + path)
|
46
46
|
begin
|
47
47
|
params[:class] += ' async-image'
|
48
48
|
rescue
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: middleman-async-image
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Bastien Robert
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-12-
|
11
|
+
date: 2017-12-26 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: middleman-core
|
@@ -50,6 +50,7 @@ files:
|
|
50
50
|
- README.md
|
51
51
|
- Rakefile
|
52
52
|
- TODO.md
|
53
|
+
- demo.gif
|
53
54
|
- features/support/env.rb
|
54
55
|
- lib/middleman-async-image.rb
|
55
56
|
- lib/middleman-async-image/extension.rb
|