picture_tag 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +13 -7
- data/lib/picture_tag/version.rb +1 -1
- data/lib/picture_tag/view_helpers.rb +3 -2
- data/test/picture_tag/view_helpers_test.rb +2 -2
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0a522369e8c238d79c3f8c1c28f57552bb74e04b
|
|
4
|
+
data.tar.gz: 518c916b7b43430a9c8bf01b4ca5fa231962b41f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f14b02492f53b234d0ec0ad812095784a6667270ae815d8267b197035125e8ecf859ee7a90b1b670250e1c54d6213a20d00c4dafb9a32867ebadbd1adf9f76bb
|
|
7
|
+
data.tar.gz: b0368f9d0f5768b68caa1d3e85219062e546640f9d4fe8026545c4acd308155b0559d229184c9ae036b1b8590abfa05a8dcadc3f4c387db75fa6ecebb8b98f2e
|
data/README.md
CHANGED
|
@@ -26,19 +26,25 @@ To make it work you need to add this to your `application.js`:
|
|
|
26
26
|
|
|
27
27
|
```Slim
|
|
28
28
|
= picture_tag '/images/fallback.jpg', image: { alt: 'Your smart alt attribute' } do
|
|
29
|
-
= source_tag srcset: '/images/
|
|
30
|
-
= source_tag srcset: '/images/
|
|
31
|
-
= source_tag srcset: '/images/medium.jpg', sizes: '100vw'
|
|
29
|
+
= source_tag srcset: '/images/large.jpg', media: '(min-width: 2000px)', sizes: '100vw'
|
|
30
|
+
= source_tag srcset: '/images/large_retina.jpg 2x', media: '(min-width: 2000px)', sizes: '100vw'
|
|
31
|
+
= source_tag srcset: '/images/medium.jpg', media: '(min-width: 1000px)', sizes: '100vw'
|
|
32
|
+
= source_tag srcset: '/images/medium_retina.jpg 2x', media: '(min-width: 1000px)', sizes: '100vw'
|
|
33
|
+
= source_tag srcset: '/images/small.jpg', sizes: '100vw'
|
|
34
|
+
= source_tag srcset: '/images/small_retina.jpg 2x', sizes: '100vw'
|
|
32
35
|
```
|
|
33
36
|
|
|
34
37
|
produces
|
|
35
38
|
|
|
36
39
|
```HTML
|
|
37
40
|
<picture>
|
|
38
|
-
<source srcset="/images/
|
|
39
|
-
<source srcset="/images/
|
|
40
|
-
<source srcset="/images/medium.jpg" sizes="100vw">
|
|
41
|
-
<
|
|
41
|
+
<source srcset="/images/large.jpg" media="(min-width: 2000px)" sizes="100vw">
|
|
42
|
+
<source srcset="/images/large_retina.jpg 2x" media="(min-width: 2000px)" sizes="100vw">
|
|
43
|
+
<source srcset="/images/medium.jpg" media="(min-width: 1000px)" sizes="100vw" >
|
|
44
|
+
<source srcset="/images/medium_retina.jpg 2x" media="(min-width: 1000px)" sizes="100vw" >
|
|
45
|
+
<source srcset="/images/small.jpg" sizes="100vw">
|
|
46
|
+
<source srcset="/images/small_retina.jpg 2x" sizes="100vw">
|
|
47
|
+
<img alt="Your smart alt attribute" srcset="/images/fallback.jpg">
|
|
42
48
|
</picture>
|
|
43
49
|
```
|
|
44
50
|
|
data/lib/picture_tag/version.rb
CHANGED
|
@@ -10,14 +10,15 @@ module PictureTag
|
|
|
10
10
|
end
|
|
11
11
|
|
|
12
12
|
def picture_tag src, options={}, &block
|
|
13
|
-
image_options = options.fetch(:image, {})
|
|
14
13
|
picture_options = options.except(:image)
|
|
14
|
+
image_options = options.fetch(:image, {})
|
|
15
|
+
image_options[:srcset] = src
|
|
15
16
|
|
|
16
17
|
content_tag :picture, picture_options do
|
|
17
18
|
"<!--[if IE 9]><video style='display: none;'><![endif]-->".html_safe +
|
|
18
19
|
capture(&block) +
|
|
19
20
|
"<!--[if IE 9]></video><![endif]-->".html_safe +
|
|
20
|
-
|
|
21
|
+
tag("img", image_options)
|
|
21
22
|
end
|
|
22
23
|
end
|
|
23
24
|
|
|
@@ -37,8 +37,8 @@ module PictureTag
|
|
|
37
37
|
picture_tag(src, image: image_options) { content }.must_match Regexp.new("#{content}.*<img.*?/></picture>")
|
|
38
38
|
end
|
|
39
39
|
|
|
40
|
-
it 'passes src to the image tag' do
|
|
41
|
-
picture_tag(src) { content }.must_match Regexp.new("<img.*?
|
|
40
|
+
it 'passes src to the image tag srcset' do
|
|
41
|
+
picture_tag(src) { content }.must_match Regexp.new("<img.*?srcset=\".*?#{src}.*?\".*?/>")
|
|
42
42
|
end
|
|
43
43
|
|
|
44
44
|
it 'passes image options to the image tag' do
|