blurred_image_tag 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d30dd20bfad9d09db6fc1f1ae5776eb7b3149655
-  data.tar.gz: 01f07c1ad79c6b3cff5dde2e4448b0980e2a490e
+  metadata.gz: f93e316be10ed28cea9f0621f25be626c7087550
+  data.tar.gz: c6d3e71064ecebc8b2e16af05b4b1d5616da7edf
 SHA512:
-  metadata.gz: c0655f9a168c29c83e523dfbbe41941e66142efdb7d640577d7c877a3c7ade61edb79ba999adba9e6dc60672ea0743036aa45d6043dec3ac1700107077b19253
-  data.tar.gz: d2c7cb1850d5b20e169879a14494028d8a90c491d96083e9612d6d1f2a0887b8198320536e4a7bfbc4a1831e8556d68ba723aa0420c1af011871e7c54fa788b5
+  metadata.gz: 378cdd1084de2ebac6ee50cb0c85998f4aec6858b5a61f470fb2b36969a9867d1200b1ff661c30c6ccdd4657e3d6c7177c0cb72c2a7ab56247f2c02e10d49e73
+  data.tar.gz: a2087ba65bb3ae07f8e995f48de75368fd305f84c19cf7fe4cc60548f5ec131b54ed6f4cca6613649efd9364ced9b942d71d466c5fc04193282ce320b225ebd6

data/README.md

@@ -1,35 +1,87 @@
-# BlurredImageTag
+# blurred\_image\_tag
 
-TODO: Write a gem description
-*= require blurred_image_tag
-gem 'blurred_image_tag'
-blurred_image_tag 'missing.png'
-parent div the width you want
+Place an image into a fixed width/height box without being stretching in your Rails application, adjusting automatically no matter if it is landscape or portrait. Plus, add a blurred background of the same image to fill the box.
+
+Great for fixed width/height `<div>` that may contain different image sizes and aspect ratios, like sliders.
+
+<img style="display: block; margin: 0 auto" src="http://alexeguia.net/wp-content/uploads/2015/07/blurred_logos.png" alt="Blurred logos example">
 
 ## Installation
 
-Add this line to your application's Gemfile:
+Add this line to your application's `Gemfile`
 
 ```ruby
 gem 'blurred_image_tag'
 ```
 
-And then execute:
+and run
 
-    $ bundle
+```ruby
+bundle install
+```
+
+In your `application.css`, include the CSS file:
 
-Or install it yourself as:
+```css
+/*
+ *= require blurred_image_tag
+ */
+```
 
-    $ gem install blurred_image_tag
+Then restart your webserver if it was previously running.
 
 ## Usage
 
-TODO: Write usage instructions here
+### Helper
+
+You can use the helper `blurred_image_tag` just as the `image_tag` helper in Rails:
+
+```ruby
+blurred_image_tag source, options = {}
+```
+
+* The `source` parameter takes the image src (in your assets pipeline or wherever it is placed).
+* The `options` hash accepts the same HTML attributes as `image_tag`.
+  * Passing a `width` attribute will set the box's width (in any CSS units). Defaults to 100%.
+  * Passing a `height` attribute will set the box's height (in any CSS units). Defaults to 100%.
+  * Any other atributes used by gems like lazy_load will keep working.
+
+### Examples
+
+```ruby
+blurred_image_tag 'avatar.png'
+# => Creates a div with width: 100%, height: 100%
+
+blurred_image_tag 'avatar.png', width: '200px'
+# => Creates a div with width: 200px, height: 100%
+
+blurred_image_tag 'avatar.png', width: '480px', height: '360px'
+# => Creates a div with width: 480px, height: 360px
+```
+
+### Output
+
+The HTML output will be as follows:
+
+```html
+<div class="blurred-image-wrapper">
+  <img class="blurred" src="...">
+  <img class="original" src="...">
+</div>
+```
+
+Any classes added via `blurred_image_tag` helper will be added to the image tags, but no to the parent div.
+
+If you want to override the CSS properties added by this gem, you can do it calling the CSS selector `.blurred-image-wrapper` (and children) in your own CSS files.
+
+### Just CSS!
+
+Every positioning, blurring and scaling is done purely by CSS. No, no, JS is no here.
 
 ## Contributing
 
-1. Fork it ( https://github.com/[my-github-username]/blurred_image_tag/fork )
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am 'Add some feature'`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create a new Pull Request
+1. Fork it https://github.com/KRaikk/blurred_image_tag/fork
+2. Create your feature branch `git checkout -b my-new-feature`
+3. Commit your changes `git commit -am 'Add some feature'`
+4. Push to the branch `git push origin my-new-feature`
+5. Create a new Pull Request https://github.com/KRaikk/blurred_image_tag/pulls

data/app/helpers/blurred_image_tag_helper.rb

@@ -1,17 +1,18 @@
 module BlurredImageTagHelper
   def blurred_image_tag(source, options = {})
-    # Add internal class name to coming classes
-    original_classes = [options[:class], 'original'].join(' ')
-    blurred_classes  = [options[:class], 'blurred'].join(' ')
+    # Add internal class names to coming classes
+    parent_div_classes   = [options[:class], 'blurred-image-wrapper'].join(' ')
+    original_img_classes = [options[:class], 'original'].join(' ')
+    blurred_img_classes  = [options[:class], 'blurred'].join(' ')
 
-    # Retrieve width and heigth of the image, 100% by default
+    # Retrieve width and height of the image, 100% by default
     width  = options[:width].nil? ? '100%' : options[:width]
-    heigth = options[:height].nil? ? '100%' : options[:height]
+    height = options[:height].nil? ? '100%' : options[:height]
 
     # Generate parent div with two images, one blurred and the original non-blurred one on top
-    output = '<div class="blurred-image-wrapper" style="width: ' + width + '; padding-top: ' + heigth + '">'
-    output += image_tag source, options.merge(class: blurred_classes).except(:width).except(:heigth)
-    output += image_tag source, options.merge(class: original_classes).except(:width).except(:heigth)
+    output = '<div class="' + parent_div_classes + '" style="width: ' + width + '; padding-top: ' + height + '">'
+    output += image_tag source, options.merge(class: blurred_img_classes).except(:width, :height)
+    output += image_tag source, options.merge(class: original_img_classes).except(:width, :height)
     output += '</div>'
     output.html_safe
   end

data/lib/blurred_image_tag/version.rb

@@ -1,3 +1,3 @@
 module BlurredImageTag
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: blurred_image_tag
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - KRaikk
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-13 00:00:00.000000000 Z
+date: 2015-07-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties