blurred_image_tag 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d30dd20bfad9d09db6fc1f1ae5776eb7b3149655
4
- data.tar.gz: 01f07c1ad79c6b3cff5dde2e4448b0980e2a490e
3
+ metadata.gz: f93e316be10ed28cea9f0621f25be626c7087550
4
+ data.tar.gz: c6d3e71064ecebc8b2e16af05b4b1d5616da7edf
5
5
  SHA512:
6
- metadata.gz: c0655f9a168c29c83e523dfbbe41941e66142efdb7d640577d7c877a3c7ade61edb79ba999adba9e6dc60672ea0743036aa45d6043dec3ac1700107077b19253
7
- data.tar.gz: d2c7cb1850d5b20e169879a14494028d8a90c491d96083e9612d6d1f2a0887b8198320536e4a7bfbc4a1831e8556d68ba723aa0420c1af011871e7c54fa788b5
6
+ metadata.gz: 378cdd1084de2ebac6ee50cb0c85998f4aec6858b5a61f470fb2b36969a9867d1200b1ff661c30c6ccdd4657e3d6c7177c0cb72c2a7ab56247f2c02e10d49e73
7
+ data.tar.gz: a2087ba65bb3ae07f8e995f48de75368fd305f84c19cf7fe4cc60548f5ec131b54ed6f4cca6613649efd9364ced9b942d71d466c5fc04193282ce320b225ebd6
data/README.md CHANGED
@@ -1,35 +1,87 @@
1
- # BlurredImageTag
1
+ # blurred\_image\_tag
2
2
 
3
- TODO: Write a gem description
4
- *= require blurred_image_tag
5
- gem 'blurred_image_tag'
6
- blurred_image_tag 'missing.png'
7
- parent div the width you want
3
+ 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.
4
+
5
+ Great for fixed width/height `<div>` that may contain different image sizes and aspect ratios, like sliders.
6
+
7
+ <img style="display: block; margin: 0 auto" src="http://alexeguia.net/wp-content/uploads/2015/07/blurred_logos.png" alt="Blurred logos example">
8
8
 
9
9
  ## Installation
10
10
 
11
- Add this line to your application's Gemfile:
11
+ Add this line to your application's `Gemfile`
12
12
 
13
13
  ```ruby
14
14
  gem 'blurred_image_tag'
15
15
  ```
16
16
 
17
- And then execute:
17
+ and run
18
18
 
19
- $ bundle
19
+ ```ruby
20
+ bundle install
21
+ ```
22
+
23
+ In your `application.css`, include the CSS file:
20
24
 
21
- Or install it yourself as:
25
+ ```css
26
+ /*
27
+ *= require blurred_image_tag
28
+ */
29
+ ```
22
30
 
23
- $ gem install blurred_image_tag
31
+ Then restart your webserver if it was previously running.
24
32
 
25
33
  ## Usage
26
34
 
27
- TODO: Write usage instructions here
35
+ ### Helper
36
+
37
+ You can use the helper `blurred_image_tag` just as the `image_tag` helper in Rails:
38
+
39
+ ```ruby
40
+ blurred_image_tag source, options = {}
41
+ ```
42
+
43
+ * The `source` parameter takes the image src (in your assets pipeline or wherever it is placed).
44
+ * The `options` hash accepts the same HTML attributes as `image_tag`.
45
+ * Passing a `width` attribute will set the box's width (in any CSS units). Defaults to 100%.
46
+ * Passing a `height` attribute will set the box's height (in any CSS units). Defaults to 100%.
47
+ * Any other atributes used by gems like lazy_load will keep working.
48
+
49
+ ### Examples
50
+
51
+ ```ruby
52
+ blurred_image_tag 'avatar.png'
53
+ # => Creates a div with width: 100%, height: 100%
54
+
55
+ blurred_image_tag 'avatar.png', width: '200px'
56
+ # => Creates a div with width: 200px, height: 100%
57
+
58
+ blurred_image_tag 'avatar.png', width: '480px', height: '360px'
59
+ # => Creates a div with width: 480px, height: 360px
60
+ ```
61
+
62
+ ### Output
63
+
64
+ The HTML output will be as follows:
65
+
66
+ ```html
67
+ <div class="blurred-image-wrapper">
68
+ <img class="blurred" src="...">
69
+ <img class="original" src="...">
70
+ </div>
71
+ ```
72
+
73
+ Any classes added via `blurred_image_tag` helper will be added to the image tags, but no to the parent div.
74
+
75
+ 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.
76
+
77
+ ### Just CSS!
78
+
79
+ Every positioning, blurring and scaling is done purely by CSS. No, no, JS is no here.
28
80
 
29
81
  ## Contributing
30
82
 
31
- 1. Fork it ( https://github.com/[my-github-username]/blurred_image_tag/fork )
32
- 2. Create your feature branch (`git checkout -b my-new-feature`)
33
- 3. Commit your changes (`git commit -am 'Add some feature'`)
34
- 4. Push to the branch (`git push origin my-new-feature`)
35
- 5. Create a new Pull Request
83
+ 1. Fork it https://github.com/KRaikk/blurred_image_tag/fork
84
+ 2. Create your feature branch `git checkout -b my-new-feature`
85
+ 3. Commit your changes `git commit -am 'Add some feature'`
86
+ 4. Push to the branch `git push origin my-new-feature`
87
+ 5. Create a new Pull Request https://github.com/KRaikk/blurred_image_tag/pulls
@@ -1,17 +1,18 @@
1
1
  module BlurredImageTagHelper
2
2
  def blurred_image_tag(source, options = {})
3
- # Add internal class name to coming classes
4
- original_classes = [options[:class], 'original'].join(' ')
5
- blurred_classes = [options[:class], 'blurred'].join(' ')
3
+ # Add internal class names to coming classes
4
+ parent_div_classes = [options[:class], 'blurred-image-wrapper'].join(' ')
5
+ original_img_classes = [options[:class], 'original'].join(' ')
6
+ blurred_img_classes = [options[:class], 'blurred'].join(' ')
6
7
 
7
- # Retrieve width and heigth of the image, 100% by default
8
+ # Retrieve width and height of the image, 100% by default
8
9
  width = options[:width].nil? ? '100%' : options[:width]
9
- heigth = options[:height].nil? ? '100%' : options[:height]
10
+ height = options[:height].nil? ? '100%' : options[:height]
10
11
 
11
12
  # Generate parent div with two images, one blurred and the original non-blurred one on top
12
- output = '<div class="blurred-image-wrapper" style="width: ' + width + '; padding-top: ' + heigth + '">'
13
- output += image_tag source, options.merge(class: blurred_classes).except(:width).except(:heigth)
14
- output += image_tag source, options.merge(class: original_classes).except(:width).except(:heigth)
13
+ output = '<div class="' + parent_div_classes + '" style="width: ' + width + '; padding-top: ' + height + '">'
14
+ output += image_tag source, options.merge(class: blurred_img_classes).except(:width, :height)
15
+ output += image_tag source, options.merge(class: original_img_classes).except(:width, :height)
15
16
  output += '</div>'
16
17
  output.html_safe
17
18
  end
@@ -1,3 +1,3 @@
1
1
  module BlurredImageTag
2
- VERSION = "0.1.0"
2
+ VERSION = "0.1.1"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: blurred_image_tag
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - KRaikk
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2015-07-13 00:00:00.000000000 Z
11
+ date: 2015-07-22 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: railties