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 +4 -4
- data/README.md +69 -17
- data/app/helpers/blurred_image_tag_helper.rb +9 -8
- data/lib/blurred_image_tag/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f93e316be10ed28cea9f0621f25be626c7087550
|
4
|
+
data.tar.gz: c6d3e71064ecebc8b2e16af05b4b1d5616da7edf
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 378cdd1084de2ebac6ee50cb0c85998f4aec6858b5a61f470fb2b36969a9867d1200b1ff661c30c6ccdd4657e3d6c7177c0cb72c2a7ab56247f2c02e10d49e73
|
7
|
+
data.tar.gz: a2087ba65bb3ae07f8e995f48de75368fd305f84c19cf7fe4cc60548f5ec131b54ed6f4cca6613649efd9364ced9b942d71d466c5fc04193282ce320b225ebd6
|
data/README.md
CHANGED
@@ -1,35 +1,87 @@
|
|
1
|
-
#
|
1
|
+
# blurred\_image\_tag
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
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
|
-
|
17
|
+
and run
|
18
18
|
|
19
|
-
|
19
|
+
```ruby
|
20
|
+
bundle install
|
21
|
+
```
|
22
|
+
|
23
|
+
In your `application.css`, include the CSS file:
|
20
24
|
|
21
|
-
|
25
|
+
```css
|
26
|
+
/*
|
27
|
+
*= require blurred_image_tag
|
28
|
+
*/
|
29
|
+
```
|
22
30
|
|
23
|
-
|
31
|
+
Then restart your webserver if it was previously running.
|
24
32
|
|
25
33
|
## Usage
|
26
34
|
|
27
|
-
|
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
|
32
|
-
2. Create your feature branch
|
33
|
-
3. Commit your changes
|
34
|
-
4. Push to the branch
|
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
|
4
|
-
|
5
|
-
|
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
|
8
|
+
# Retrieve width and height of the image, 100% by default
|
8
9
|
width = options[:width].nil? ? '100%' : options[:width]
|
9
|
-
|
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="
|
13
|
-
output += image_tag source, options.merge(class:
|
14
|
-
output += image_tag source, options.merge(class:
|
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
|
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.
|
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-
|
11
|
+
date: 2015-07-22 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|