middleman-async-image 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b79a5d5c6b42ad27c77b3ff63f5f3432e37e0fde
-  data.tar.gz: e5539a9e1455be03aa3cf3e9ef0fe86bc7150a65
+  metadata.gz: 2695b7fdcd355ab7149c49eba1eb6d8c07f714c8
+  data.tar.gz: 4b3fd03f53092eadabf83271543462e507546f93
 SHA512:
-  metadata.gz: d241d8f39f5c368b1c57656ff57f043f5d2e135d62d8ce36726dc3478f7a03b7e46744ff9a7ab82dc2faf73500282a0e5483e744b5df1c8ba8de97fd8ac77e5a
-  data.tar.gz: e583f8da7d4174173b9c947960a8bf66d9111d7fd58dadaaf3a9a331774689cd128d4ecb0a4e74dcc90c80c9de1f98f4f96e2f8515da678e37a621edac76c538
+  metadata.gz: e59ccc7fd382cf9a201806d9f99883ec619b6af583bd8f71de8feba6f7a9d738385147df1cd11e5fc87a942cf11da0846f2cae339bf03b6b83fcc1f388ffd065
+  data.tar.gz: 3865e1b878b21dc532f16c2e09d511aab6825c0eedf2a86efff0ccfbaab31857440231eb940e224a46c9d87ed47530b1660978e2daf4878dcd8c7473dbfbfc8e

data/README.md

@@ -1,14 +1,38 @@
 # Middleman Async Image
 Load your images asynchronously with Middleman : like Medium.
 
+![demo](demo.gif?raw=true)
+
 ## Why?
 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.
 
+## But how exactly it works ?
+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.
+
+All you need to do, is using the following helper:
+```
+image_async_tag(path, options)
+```
+it works exactly as the middleman image_tag default helper.
+
+## Dependencies
+Middleman Async Image need [middleman-sprockets](https://github.com/middleman/middleman-sprockets/).
+Go to your GemFile and set the following line wherever you want:
+```
+gem "middleman-sprockets"
+```
+then, set `activate :sprockets` in your config.rb.
+
 ## Configuration
 You can set the image-dir of your choice (follow the Middleman assets directories configuration).
 
 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.
 
+Then, go to your main CSS file and set `//= require async-image`. Do the same in your JS application'file.
+
+
+### Options
+
 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__:
 ```RUBY
 activate :async_image do |i|
@@ -19,13 +43,11 @@ end
 By default again, the compression level is *low (15)*. If you want to use a different one, you can configure it as the following:
 ```RUBY
 activate :async_image do |i|
-  i.quality = "medium"
+  i.quality = 10
 end
 ```
-List of options:
-- Low: 10
-- Medium: 25
-- High: 35
+
+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*.
 
 ## Contributing
 

data/lib/middleman-async-image/extension.rb

@@ -21,7 +21,7 @@ class AsyncImage < ::Middleman::Extension
   end
 
   def compress_dir
-    dir = "source/#{app.config[:images_dir]}/" + AsyncImage.config[:compress_image_path]
+    dir = "source/#{app.config[:images_dir]}/" + extensions[:async_image].options[:compress_image_path]
     unless Dir.exists?(dir)
       FileUtils.mkdir(dir)
     end
@@ -34,15 +34,15 @@ class AsyncImage < ::Middleman::Extension
 
   helpers do
     def image_async_tag(path, params={})
-      complete_path = "source/#{app.config[:images_dir]}/" + AsyncImage.config[:compress_image_path] + '/' + path
+      complete_path = "source/#{app.config[:images_dir]}/" + extensions[:async_image].options[:compress_image_path] + '/' + path
       FileUtils.mkdir_p(complete_path.match(/(.*\/)+(.*$)/)[1])
 
       Magick::Image::read("source/#{app.config[:images_dir]}/" + path)[0]
-      .scale(AsyncImage.config[:scale])
-      .write(complete_path){|f| f.quality = AsyncImage.config[:quality] }
+      .scale(extensions[:async_image].options[:scale])
+      .write(complete_path){|f| f.quality = extensions[:async_image].options[:quality] }
       print(path + ' has been compressed')
 
-      params['data-compress'] = image_path(AsyncImage.config[:compress_image_path] + '/' + path)
+      params['data-compress'] = image_path(extensions[:async_image].options[:compress_image_path] + '/' + path)
       begin
         params[:class] += ' async-image'
       rescue

data/middleman-async-image.gemspec

@@ -3,7 +3,7 @@ $:.push File.expand_path("../lib", __FILE__)
 
 Gem::Specification.new do |s|
   s.name        = "middleman-async-image"
-  s.version     = "0.0.1"
+  s.version     = "0.0.2"
   s.platform    = Gem::Platform::RUBY
   s.authors     = ["Bastien Robert"]
   # s.email       = ["email@example.com"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: middleman-async-image
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Bastien Robert
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-24 00:00:00.000000000 Z
+date: 2017-12-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: middleman-core
@@ -50,6 +50,7 @@ files:
 - README.md
 - Rakefile
 - TODO.md
+- demo.gif
 - features/support/env.rb
 - lib/middleman-async-image.rb
 - lib/middleman-async-image/extension.rb