kamifusen 0.9.2 → 0.9.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +30 -16
- data/app/views/kamifusen/_view.html.erb +27 -6
- data/lib/kamifusen.rb +5 -0
- data/lib/kamifusen/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2664cf5dea01a7294d0f2c9b017b2d6bd00a3d0a81daaa161f95f924ee62479e
|
4
|
+
data.tar.gz: 5301c3d3ad0733b2a7376f3a8a417b4a02d74c59eebf35f5cde3906e2e179523
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3c06c337ed793d477bd3dd9539517c4ba09011e8c0e801b084e8ae477991dc168f45d63165fa4754170003b60aab1ce0ef886eacd98bf2a80823f9dc7ab81eda
|
7
|
+
data.tar.gz: 69acef22af9cb3beb364f593f7fb6005e564f3f93ec95af6005bf3255b166715cb79f11fd3253e56f1fc0e3b1c6cb09f1d171126236a148bb180b737736fa5a0
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -2,6 +2,34 @@
|
|
2
2
|
|
3
3
|
![Kamifūsen in Yamagata](https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/%E4%B8%AD%E6%B4%A5%E5%B7%9D%E9%9B%AA%E3%81%BE%E3%81%A4%E3%82%8A.jpg/1024px-%E4%B8%AD%E6%B4%A5%E5%B7%9D%E9%9B%AA%E3%81%BE%E3%81%A4%E3%82%8A.jpg)
|
4
4
|
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'kamifusen'
|
11
|
+
```
|
12
|
+
|
13
|
+
And then execute:
|
14
|
+
|
15
|
+
$ bundle install
|
16
|
+
|
17
|
+
Or install it yourself as:
|
18
|
+
|
19
|
+
$ gem install kamifusen
|
20
|
+
|
21
|
+
In the views, use (where object is an active record model, and image is an active storage attachment):
|
22
|
+
|
23
|
+
```erb
|
24
|
+
<%= kamifusen_tag object.image, alt: 'A nice image' %>
|
25
|
+
```
|
26
|
+
|
27
|
+
If you want to disable webp, in config/initializers/kamifusen.rb:
|
28
|
+
|
29
|
+
```ruby
|
30
|
+
Kamifusen.with_webp = false
|
31
|
+
```
|
32
|
+
|
5
33
|
## Usage
|
6
34
|
|
7
35
|
Simply use `kamifusen_tag` instead of `image_tag` in your rails views.## What's the problem?
|
@@ -76,11 +104,13 @@ Webp and AVIF are more efficient formats than jpg and png. They allow better com
|
|
76
104
|
https://sebousan.github.io/kamifusen/
|
77
105
|
|
78
106
|
The new helper is:
|
107
|
+
|
79
108
|
```erb
|
80
109
|
<%= kamifusen_tag object.image, alt: 'A nice image' %>
|
81
110
|
```
|
82
111
|
|
83
112
|
It generates a code like:
|
113
|
+
|
84
114
|
```html
|
85
115
|
<picture>
|
86
116
|
<source srcset="image-800w.avif, image-1600w.avif 2x" type="image/avif" media="(min-width: 800px)">
|
@@ -93,22 +123,6 @@ It generates a code like:
|
|
93
123
|
</picture>
|
94
124
|
```
|
95
125
|
|
96
|
-
## Installation
|
97
|
-
|
98
|
-
Add this line to your application's Gemfile:
|
99
|
-
|
100
|
-
```ruby
|
101
|
-
gem 'kamifusen'
|
102
|
-
```
|
103
|
-
|
104
|
-
And then execute:
|
105
|
-
|
106
|
-
$ bundle install
|
107
|
-
|
108
|
-
Or install it yourself as:
|
109
|
-
|
110
|
-
$ gem install kamifusen
|
111
|
-
|
112
126
|
## References
|
113
127
|
|
114
128
|
- https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
|
@@ -17,14 +17,35 @@ parameters += " class=\"#{ options[:class] }\"" if klass
|
|
17
17
|
sizes = [320, 576, 640, 768, 992, 1152, 1200, 1400, 1536, 1984, 2400]
|
18
18
|
quality = 80
|
19
19
|
# Computing
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
20
|
+
if width
|
21
|
+
width_retina = width * 2
|
22
|
+
# If we ask for a 175px width, we should have 320 and 576 sizes
|
23
|
+
size_is_too_big = false
|
24
|
+
sizes.reject! do |size|
|
25
|
+
# If the previous size was too big, we should reject this one
|
26
|
+
should_reject_this_size = size_is_too_big
|
27
|
+
# If this size is the first "too big" size, we should take it
|
28
|
+
size_is_too_big = size > width_retina
|
29
|
+
should_reject_this_size
|
30
|
+
end
|
31
|
+
end
|
32
|
+
default_width = sizes.max
|
33
|
+
default_width = width_retina if width_retina && width_retina > default_width
|
34
|
+
if Kamifusen.with_webp
|
35
|
+
srcset_webp = sizes.map { |size|
|
36
|
+
"#{ url_for source.variant(resize: "#{size}>", format: :webp, quality: quality) } #{ size }w"
|
37
|
+
}.join(', ')
|
38
|
+
end
|
39
|
+
srcset_default = sizes.map { |size|
|
40
|
+
"#{ url_for source.variant(resize: "#{size}>", quality: quality) } #{ size }w"
|
41
|
+
}.join(', ')
|
42
|
+
default = url_for source.variant(resize: "#{default_width}>", quality: quality)
|
24
43
|
%>
|
25
44
|
<picture>
|
26
|
-
|
27
|
-
|
45
|
+
<% if Kamifusen.with_webp %>
|
46
|
+
<source srcset="<%= srcset_webp %>">
|
47
|
+
<% end %>
|
48
|
+
<img src="<%= default %>" srcset="<%= srcset_default %>"<%= raw parameters %>>
|
28
49
|
</picture>
|
29
50
|
<% else %>
|
30
51
|
<picture>
|
data/lib/kamifusen.rb
CHANGED
data/lib/kamifusen/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: kamifusen
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.9.
|
4
|
+
version: 0.9.7
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Sébastien Moulène
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: exe
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-
|
12
|
+
date: 2021-06-02 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|