jekyll_picture_tag 1.7.0 → 1.7.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/.gitignore +3 -0
- data/.solargraph.yml +15 -0
- data/docs/Gemfile +4 -0
- data/docs/Gemfile.lock +154 -0
- data/docs/_config.yml +13 -0
- data/docs/_layouts/directory.html +32 -0
- data/docs/assets/style.css +31 -0
- data/{contributing.md → docs/contributing.md} +18 -10
- data/docs/{examples/_data/picture.yml → example_presets.md} +35 -24
- data/docs/global_configuration.md +6 -1
- data/docs/index.md +108 -0
- data/docs/installation.md +22 -22
- data/docs/migration.md +4 -0
- data/docs/notes.md +57 -61
- data/docs/output.md +52 -0
- data/docs/presets.md +79 -180
- data/docs/releases.md +49 -0
- data/docs/usage.md +59 -77
- data/jekyll_picture_tag.gemspec +2 -1
- data/lib/jekyll_picture_tag/instructions/html_attributes.rb +14 -8
- data/lib/jekyll_picture_tag/version.rb +1 -1
- data/readme.md +14 -192
- metadata +29 -9
- data/docs/examples/_config.yml +0 -10
- data/docs/examples/post.md +0 -46
- data/docs/readme.md +0 -23
data/docs/usage.md
CHANGED
@@ -1,131 +1,113 @@
|
|
1
|
-
|
1
|
+
---
|
2
|
+
---
|
3
|
+
# How to use the Liquid Tag:
|
2
4
|
|
3
|
-
|
4
|
-
is the base image:
|
5
|
+
## Format:
|
5
6
|
|
6
|
-
|
7
|
+
{% raw %}
|
8
|
+
`{% picture [preset] (base image) [alternate images] [attributes] %}`
|
9
|
+
{% endraw %}
|
7
10
|
|
8
|
-
|
9
|
-
|
11
|
+
The only required argument is the base image. Line breaks and extra spaces are fine, and you can
|
12
|
+
use liquid variables anywhere.
|
10
13
|
|
11
14
|
## Examples:
|
12
15
|
|
16
|
+
{% raw %}
|
13
17
|
`{% picture example.jpg %}`
|
14
18
|
|
15
|
-
`{% picture thumbnail example.jpg %}`
|
19
|
+
`{% picture thumbnail example.jpg --alt Example Image %}`
|
20
|
+
|
21
|
+
`{% picture example.jpg --picture class="attribute-demo" %}`
|
16
22
|
|
17
23
|
`{% picture blog_index {{ post.image }} --link {{ post.url }} %}`
|
18
24
|
|
19
25
|
`{% picture "some example.jpg" mobile: other\ example.jpg %}`
|
20
26
|
|
21
|
-
```
|
27
|
+
```md
|
22
28
|
{% picture
|
23
29
|
hero
|
24
30
|
example.jpg
|
25
|
-
|
31
|
+
tablet: example_cropped.jpg
|
32
|
+
mobile: example_cropped_more.jpg
|
26
33
|
--alt Happy Puppy
|
27
34
|
--picture class="hero"
|
28
35
|
--link /
|
29
36
|
%}
|
30
37
|
```
|
38
|
+
{% endraw %}
|
31
39
|
|
32
40
|
## Argument reference
|
33
41
|
|
34
|
-
|
42
|
+
Given in order:
|
35
43
|
|
36
|
-
|
37
|
-
|
38
|
-
*Default:* `default`
|
44
|
+
* **Preset**
|
39
45
|
|
40
|
-
|
41
|
-
|
42
|
-
|
46
|
+
Select a [markup preset]({{ site.baseurl }}/presets#markup-presets), or omit to use the `default` preset. Presets
|
47
|
+
are collections of settings that determine nearly everything about JPT's output, from the image
|
48
|
+
formats used to the exact format your markup will take.
|
43
49
|
|
44
|
-
* **
|
50
|
+
* **Base Image** (Required)
|
45
51
|
|
46
|
-
|
52
|
+
Can be any raster image (as long as you have the required ImageMagick delegate). Relative to
|
53
|
+
jekyll's root directory, or the `source` [setting]({{ site.baseurl }}/global_configuration) if you've configured it.
|
47
54
|
|
48
|
-
|
49
|
-
|
55
|
+
For filenames with spaces, either use double quotes (`"my image.jpg"`) or a backslash (`my\
|
56
|
+
image.jpg`).
|
50
57
|
|
51
58
|
* **Alternate images**
|
52
59
|
|
53
|
-
*Format:* `(media query preset): (
|
60
|
+
*Format:* `(media query preset): (filename) (...)`
|
54
61
|
|
55
62
|
*Example:* `tablet: img_cropped.jpg mobile: img_cropped_more.jpg`
|
56
63
|
|
57
|
-
Optionally specify any number of alternate base images for given [
|
58
|
-
(specified in `_data/picture.yml`). This is
|
59
|
-
|
64
|
+
Optionally specify any number of alternate base images for given [screen
|
65
|
+
sizes]({{ site.baseurl }}/presets/#media-presets) (specified in `_data/picture.yml`). This is called [art
|
66
|
+
direction](http://usecases.responsiveimages.org/#art-direction), and is one of JPT's strongest
|
67
|
+
features.
|
60
68
|
|
61
69
|
Give your images in order of ascending specificity (The first image is the most general). They will
|
62
|
-
be provided to the browser in reverse order, and it will select the first one with
|
63
|
-
|
70
|
+
be provided to the browser in reverse order, and it will select the first one with an applicable
|
71
|
+
media query.
|
64
72
|
|
65
73
|
* **Attributes**
|
66
74
|
|
67
|
-
Optionally specify any number of HTML attributes. These will be added to any
|
68
|
-
set in a preset.
|
75
|
+
Optionally specify any number of HTML attributes, or an href target. These will be added to any
|
76
|
+
attributes you've set in a preset.
|
69
77
|
|
70
|
-
|
78
|
+
* **`--link`**
|
71
79
|
|
72
|
-
|
80
|
+
*Format:* `--link (some url)`
|
73
81
|
|
74
|
-
|
82
|
+
*Examples*: `--link https://example.com`, `--link /blog/some_post/`
|
75
83
|
|
76
|
-
|
77
|
-
|
84
|
+
Wrap the image in an anchor tag, with the `href` attribute set to whatever value you give it.
|
85
|
+
This will override automatic source image linking, if you have enabled it.
|
78
86
|
|
79
|
-
|
80
|
-
|
81
|
-
##### `--alt`
|
82
|
-
|
83
|
-
*Format:* `--alt (alt text)`
|
84
|
-
|
85
|
-
*Example:* `--alt Here is my alt text!`
|
87
|
+
**Note**: If you get either mangled HTML or extra {::nomarkdown} tags when using this, read
|
88
|
+
[here]({{ site.baseurl }}/notes).
|
86
89
|
|
87
|
-
|
90
|
+
* **`--alt`**
|
88
91
|
|
89
|
-
|
90
|
-
|
91
|
-
*Format:* `--(picture|img|source|a|parent) (Standard HTML attributes)`
|
92
|
-
|
93
|
-
*Example:* `--img class="awesome-fade-in" id="coolio" --a data-awesomeness="11"`
|
92
|
+
*Format:* `--alt (alt text)`
|
94
93
|
|
95
|
-
|
94
|
+
*Example:* `--alt Here is my alt text!`
|
96
95
|
|
97
|
-
|
98
|
-
|
99
|
-
*
|
100
|
-
* `a` (anchor tag)
|
101
|
-
* `parent`
|
102
|
-
|
103
|
-
`--parent` will be applied to the `<picture>` if present, otherwise the `<img>`; useful when using
|
104
|
-
the `auto` output format.
|
105
|
-
|
106
|
-
##### Old syntax
|
107
|
-
|
108
|
-
The old syntax is to just dump all attributes at the end:
|
109
|
-
|
110
|
-
`{% picture example.jpg alt="alt text" class="super-duper" %}`
|
96
|
+
Convenience shortcut for `--img alt="..."`
|
97
|
+
|
98
|
+
* **`--(element)`**
|
111
99
|
|
112
|
-
|
113
|
-
maintained: all attributes specified this way are applied to the img tag.
|
100
|
+
*Format:* `--(picture|img|source|a|parent) (Standard HTML attributes)`
|
114
101
|
|
115
|
-
|
116
|
-
Line breaks and spaces are interchangeable, the following is perfectly acceptable:
|
102
|
+
*Example:* `--img class="awesome-fade-in" id="coolio" --a data-awesomeness="11"`
|
117
103
|
|
118
|
-
|
119
|
-
{%
|
120
|
-
picture my-preset
|
121
|
-
img.jpg
|
122
|
-
mobile: alt.jpg
|
123
|
-
--alt Alt Text
|
124
|
-
--picture class="stumpy"
|
125
|
-
%}
|
126
|
-
```
|
127
|
-
#### Liquid variables
|
104
|
+
Apply attributes to a given HTML element. Your options are:
|
128
105
|
|
129
|
-
|
106
|
+
* `picture`
|
107
|
+
* `img`
|
108
|
+
* `source`
|
109
|
+
* `a` (anchor tag)
|
110
|
+
* `parent`
|
130
111
|
|
131
|
-
`
|
112
|
+
`--parent` will be applied to the `<picture>` if present, otherwise the `<img>`; useful when
|
113
|
+
using an `auto` output format.
|
data/jekyll_picture_tag.gemspec
CHANGED
@@ -35,11 +35,12 @@ Gem::Specification.new do |spec|
|
|
35
35
|
spec.add_development_dependency 'rake', '~> 12.3'
|
36
36
|
spec.add_development_dependency 'rubocop'
|
37
37
|
spec.add_development_dependency 'simplecov'
|
38
|
+
spec.add_development_dependency 'solargraph'
|
38
39
|
|
39
40
|
spec.add_dependency 'addressable', '~> 2.6'
|
40
41
|
spec.add_dependency 'mime-types', '~> 3'
|
41
42
|
spec.add_dependency 'mini_magick', '~> 4'
|
42
|
-
spec.add_dependency 'objective_elements', '~> 1.1'
|
43
|
+
spec.add_dependency 'objective_elements', '~> 1.1.1'
|
43
44
|
|
44
45
|
spec.add_runtime_dependency 'jekyll', '< 5'
|
45
46
|
end
|
@@ -4,22 +4,28 @@ module PictureTag
|
|
4
4
|
# sent to various elements.
|
5
5
|
# Stored as a hash, with string keys.
|
6
6
|
class HTMLAttributeSet
|
7
|
-
# Initialize with leftovers passed into the liquid tag
|
7
|
+
# Initialize with leftovers passed into the liquid tag. These leftovers
|
8
|
+
# (params) take the form of an array of strings, called words, which the
|
9
|
+
# tag parser has separated.
|
8
10
|
def initialize(params)
|
9
|
-
@
|
11
|
+
@attributes = load_preset
|
10
12
|
|
11
13
|
parse_params(params) if params
|
12
14
|
handle_source_url
|
13
15
|
end
|
14
16
|
|
15
17
|
def [](key)
|
16
|
-
@
|
18
|
+
@attributes[key]
|
17
19
|
end
|
18
20
|
|
19
21
|
private
|
20
22
|
|
21
23
|
def load_preset
|
22
|
-
|
24
|
+
# Shamelessly stolen from stackoverflow. Deep cloning a hash is
|
25
|
+
# surprisingly tricky! I could pull in ActiveSupport and get
|
26
|
+
# Hash#deep_dup, but for now I don't think it's necessary.
|
27
|
+
|
28
|
+
Marshal.load(Marshal.dump(PictureTag.preset['attributes'])) || {}
|
23
29
|
end
|
24
30
|
|
25
31
|
# Syntax this function processes:
|
@@ -30,10 +36,10 @@ module PictureTag
|
|
30
36
|
words.each do |word|
|
31
37
|
if word.match(/^--/)
|
32
38
|
key = word.delete_prefix('--')
|
33
|
-
elsif @
|
34
|
-
@
|
39
|
+
elsif @attributes[key]
|
40
|
+
@attributes[key] << ' ' + word
|
35
41
|
else
|
36
|
-
@
|
42
|
+
@attributes[key] = word
|
37
43
|
end
|
38
44
|
end
|
39
45
|
end
|
@@ -43,7 +49,7 @@ module PictureTag
|
|
43
49
|
|
44
50
|
target = PictureTag.source_images.first.shortname
|
45
51
|
|
46
|
-
@
|
52
|
+
@attributes['link'] = ImgURI.new(target, source_image: true).to_s
|
47
53
|
end
|
48
54
|
end
|
49
55
|
end
|
data/readme.md
CHANGED
@@ -6,211 +6,33 @@ It's easy to throw an image on a webpage and call it a day. Doing justice to you
|
|
6
6
|
it efficiently on all browsers and screen sizes is tedious and tricky. Tedious, tricky things should be
|
7
7
|
automated.
|
8
8
|
|
9
|
-
Jekyll Picture Tag
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
formats, and can be configured to work with JavaScript libraries such as
|
14
|
-
[LazyLoad](https://github.com/verlok/lazyload).
|
9
|
+
Jekyll Picture Tag adds responsive images to your [Jekyll](http://jekyllrb.com) static site. It
|
10
|
+
automatically creates resized, reformatted source images, is fully configurable, implements sensible
|
11
|
+
defaults, and solves both the art direction and resolution switching problems with a little YAML
|
12
|
+
configuration and a simple template tag.
|
15
13
|
|
16
|
-
##
|
17
|
-
|
18
|
-
It's all in the [`docs`](docs/) folder:
|
19
|
-
|
20
|
-
* [Installation](docs/installation.md)
|
21
|
-
* [Usage](docs/usage.md)
|
22
|
-
* [Global settings](docs/global_configuration.md)
|
23
|
-
* [Presets](docs/presets.md)
|
24
|
-
* [Other notes](docs/notes.md)
|
25
|
-
* [Contribute](contributing.md)
|
26
|
-
* [Release History](#release-history)
|
27
|
-
* [License](LICENSE.txt)
|
28
|
-
|
29
|
-
## Why use Jekyll Picture Tag?
|
14
|
+
## Why use Responsive Images?
|
30
15
|
|
31
16
|
**Performance:** The fastest sites are static sites, but when you plonk a 2mb picture of your dog at
|
32
|
-
the top of a blog post you're throwing it all away.
|
17
|
+
the top of a blog post you're throwing it all away. Responsive images allow you to keep your site
|
18
|
+
fast, without compromising image quality.
|
33
19
|
|
34
20
|
**Design:** Your desktop image may not work well on mobile, regardless of its resolution. We often
|
35
21
|
want to do more than just resize images for different screen sizes, we want to crop them or use a
|
36
22
|
different image entirely.
|
37
23
|
|
38
|
-
|
39
|
-
JavaScript; this gets them on the page *fast*, but it leads to some ridiculously verbose markup.
|
40
|
-
To serve responsive images correctly, we must:
|
41
|
-
|
42
|
-
- Generate, name, and organize the required images (formats \* resolutions \* source images)
|
43
|
-
- Inform the browser about the image itself-- format, size, URI, and the screen sizes where it
|
44
|
-
should be used.
|
45
|
-
- Inform the browser how large the space for that image on the page will be (which also probably
|
46
|
-
has associated media queries).
|
24
|
+
## Why use Jekyll Picture Tag?
|
47
25
|
|
48
|
-
|
26
|
+
**Developer Sanity:** If you want to serve multiple images in multiple formats and resolutions, you
|
27
|
+
have a litany of markup to write and a big pile of images to generate. Jekyll Picture Tag is your
|
28
|
+
responsive images minion - give it simple instructions and it'll handle the rest.
|
49
29
|
|
50
30
|
## Features
|
51
31
|
|
52
|
-
* Automatic generation of resized
|
32
|
+
* Automatic generation and organization of resized image files in basically any format(s).
|
53
33
|
* Automatic generation of complex markup in several different formats.
|
54
34
|
* No configuration required, extensive configuration available.
|
55
|
-
* `sizes` attribute assistance.
|
56
|
-
* Optionally, automatically link to the source image. Or manually link to anywhere else, with just a
|
57
|
-
tag parameter!
|
58
|
-
|
59
|
-
## Quick start / Demo
|
60
|
-
|
61
|
-
**All configuration is optional.** Here's the simplest possible use case:
|
62
|
-
|
63
|
-
Add j_p_t to your gemfile:
|
64
|
-
|
65
|
-
```ruby
|
66
|
-
group :jekyll_plugins do
|
67
|
-
gem 'jekyll_picture_tag'
|
68
|
-
end
|
69
|
-
```
|
70
|
-
|
71
|
-
Run `bundle install`
|
72
|
-
|
73
|
-
Put this liquid tag somewhere:
|
74
|
-
|
75
|
-
`{% picture test.jpg %}`
|
76
|
-
|
77
|
-
Get this in your generated site:
|
78
|
-
|
79
|
-
```html
|
80
|
-
<!-- Formatted for readability -->
|
81
|
-
|
82
|
-
<img src="/generated/test-800-195f7d.jpg"
|
83
|
-
srcset="
|
84
|
-
/generated/test-400-195f7d.jpg 400w,
|
85
|
-
/generated/test-600-195f7d.jpg 600w,
|
86
|
-
/generated/test-800-195f7d.jpg 800w,
|
87
|
-
/generated/test-1000-195f7d.jpg 1000w
|
88
|
-
">
|
89
|
-
```
|
90
|
-
|
91
|
-
### Look man, that's cool and all but I just want webp.
|
92
|
-
|
93
|
-
Create `_data/picture.yml`, add the following:
|
94
|
-
|
95
|
-
```yml
|
96
|
-
markup_presets:
|
97
|
-
default:
|
98
|
-
formats: [webp, original]
|
99
|
-
```
|
100
|
-
|
101
|
-
If you get errors, make sure you have imagemagick installed with a webp delegate.
|
102
|
-
|
103
|
-
### Here's a more complex example:
|
104
|
-
|
105
|
-
```yml
|
106
|
-
# _data/picture.yml
|
107
|
-
|
108
|
-
media_presets:
|
109
|
-
mobile: 'max-width: 600px'
|
110
|
-
|
111
|
-
markup_presets:
|
112
|
-
default:
|
113
|
-
widths: [600, 900, 1200]
|
114
|
-
formats: [webp, original]
|
115
|
-
sizes:
|
116
|
-
mobile: 80vw
|
117
|
-
size: 500px
|
118
|
-
```
|
119
|
-
|
120
|
-
Write this:
|
121
|
-
|
122
|
-
`{% picture test.jpg mobile: test2.jpg --alt Alternate Text %}`
|
123
|
-
|
124
|
-
Get this:
|
125
|
-
|
126
|
-
```html
|
127
|
-
<!-- Formatted for readability -->
|
128
|
-
|
129
|
-
<picture>
|
130
|
-
<source
|
131
|
-
sizes="(max-width: 600px) 80vw, 600px"
|
132
|
-
media="(max-width: 600px)"
|
133
|
-
srcset="
|
134
|
-
/generated/test2-600-21bb6f.webp 600w,
|
135
|
-
/generated/test2-900-21bb6f.webp 900w,
|
136
|
-
/generated/test2-1200-21bb6f.webp 1200w
|
137
|
-
"
|
138
|
-
type="image/webp">
|
139
|
-
<source
|
140
|
-
sizes="(max-width: 600px) 80vw, 600px"
|
141
|
-
srcset="
|
142
|
-
/generated/test-600-195f7d.webp 600w,
|
143
|
-
/generated/test-900-195f7d.webp 900w,
|
144
|
-
/generated/test-1200-195f7d.webp 1200w
|
145
|
-
"
|
146
|
-
type="image/webp">
|
147
|
-
<source
|
148
|
-
sizes="(max-width: 600px) 80vw, 600px"
|
149
|
-
media="(max-width: 600px)"
|
150
|
-
srcset="
|
151
|
-
/generated/test2-600-21bb6f.jpg 600w,
|
152
|
-
/generated/test2-900-21bb6f.jpg 900w,
|
153
|
-
/generated/test2-1200-21bb6f.jpg 1200w
|
154
|
-
"
|
155
|
-
type="image/jpeg">
|
156
|
-
<source
|
157
|
-
sizes="(max-width: 600px) 80vw, 600px"
|
158
|
-
srcset="
|
159
|
-
/generated/test-600-195f7d.jpg 600w,
|
160
|
-
/generated/test-900-195f7d.jpg 900w,
|
161
|
-
/generated/test-1200-195f7d.jpg 1200w
|
162
|
-
"
|
163
|
-
type="image/jpeg">
|
164
|
-
<img src="/generated/test-800-195f7d.jpg" alt="Alternate Text">
|
165
|
-
</picture>
|
166
|
-
```
|
167
|
-
|
168
|
-
Jekyll Picture Tag ultimately relies on [ImageMagick](https://www.imagemagick.org/script/index.php)
|
169
|
-
for image conversions, so it must be installed on your system. There's a very good chance you
|
170
|
-
already have it. If you want to build webp images, you will need to install a webp delegate for it
|
171
|
-
as well.
|
172
35
|
|
173
|
-
##
|
36
|
+
## Documentation:
|
174
37
|
|
175
|
-
|
176
|
-
* Add support for setting generated image quality, either generally or specific to given
|
177
|
-
formats.
|
178
|
-
* Add support for spaces and other url-encoded characters in filenames
|
179
|
-
* Documentation restructure - Moved it out of the wiki, into the `docs` folder.
|
180
|
-
* Bugfix: Fallback image width will now be checked against source image width.
|
181
|
-
* Bugfix: Minor fix to nomarkdown wrapper output
|
182
|
-
* link_source will now target the base source image, rather than finding the biggest one.
|
183
|
-
* Remove fastimage dependency, add addressable dependency.
|
184
|
-
* Moderately significant refactoring and code cleanup
|
185
|
-
* Decent set of tests added
|
186
|
-
* 1.6.0 Jul 2, 2019:
|
187
|
-
* Missing Preset warning respects `data_dir` setting
|
188
|
-
* Add `continue_on_missing` option
|
189
|
-
* 1.5.0 Jun 26, 2019:
|
190
|
-
* better `{::nomarkdown}` necessity detection
|
191
|
-
* allow user to override `{::nomarkdown}` autodetection
|
192
|
-
* 1.4.0 Jun 26, 2019:
|
193
|
-
* Rename gem from `jekyll-picture-tag` to `jekyll_picture_tag`, allowing us to use rubygems again.
|
194
|
-
* Add new output format: `naked_srcset`.
|
195
|
-
* 1.3.1 Jun 21, 2019: Bugfix
|
196
|
-
* 1.3.0 Jun 7, 2019:
|
197
|
-
* Initial compatibility with Jekyll 4.0
|
198
|
-
* bugfixes
|
199
|
-
* change to generated image naming-- The first build after this update will be longer, and you
|
200
|
-
might want to clear out your generated images.
|
201
|
-
* 1.2.0 Feb 9, 2019:
|
202
|
-
* Add nomarkdown fix
|
203
|
-
* noscript option
|
204
|
-
* relative url option
|
205
|
-
* anchor tag wrappers
|
206
|
-
* 1.1.0 Jan 22, 2019:
|
207
|
-
* Add direct_url markup format,
|
208
|
-
* auto-orient images before stripping metadata
|
209
|
-
* 1.0.2 Jan 18, 2019: Fix ruby version specification
|
210
|
-
* 1.0.1 Jan 13, 2019: Added ruby version checking
|
211
|
-
* **1.0.0** Nov 27, 2018: Rewrite from the ground up. See the [migration guide](docs/migration.md).
|
212
|
-
* 0.2.2 Aug 2, 2013: Bugfixes
|
213
|
-
* 0.2.1 Jul 17, 2013: Refactor again, add Liquid parsing.
|
214
|
-
* 0.2.0 Jul 14, 2013: Rewrite code base, bring in line with Jekyll Image Tag.
|
215
|
-
* 0.1.1 Jul 5, 2013: Quick round of code improvements.
|
216
|
-
* 0.1.0 Jul 5, 2013: Initial release.
|
38
|
+
https://rbuchberger.github.io/jekyll_picture_tag/
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: jekyll_picture_tag
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.7.
|
4
|
+
version: 1.7.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Robert Wierzbowski
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2019-
|
13
|
+
date: 2019-11-14 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: bundler
|
@@ -124,6 +124,20 @@ dependencies:
|
|
124
124
|
- - ">="
|
125
125
|
- !ruby/object:Gem::Version
|
126
126
|
version: '0'
|
127
|
+
- !ruby/object:Gem::Dependency
|
128
|
+
name: solargraph
|
129
|
+
requirement: !ruby/object:Gem::Requirement
|
130
|
+
requirements:
|
131
|
+
- - ">="
|
132
|
+
- !ruby/object:Gem::Version
|
133
|
+
version: '0'
|
134
|
+
type: :development
|
135
|
+
prerelease: false
|
136
|
+
version_requirements: !ruby/object:Gem::Requirement
|
137
|
+
requirements:
|
138
|
+
- - ">="
|
139
|
+
- !ruby/object:Gem::Version
|
140
|
+
version: '0'
|
127
141
|
- !ruby/object:Gem::Dependency
|
128
142
|
name: addressable
|
129
143
|
requirement: !ruby/object:Gem::Requirement
|
@@ -172,14 +186,14 @@ dependencies:
|
|
172
186
|
requirements:
|
173
187
|
- - "~>"
|
174
188
|
- !ruby/object:Gem::Version
|
175
|
-
version:
|
189
|
+
version: 1.1.1
|
176
190
|
type: :runtime
|
177
191
|
prerelease: false
|
178
192
|
version_requirements: !ruby/object:Gem::Requirement
|
179
193
|
requirements:
|
180
194
|
- - "~>"
|
181
195
|
- !ruby/object:Gem::Version
|
182
|
-
version:
|
196
|
+
version: 1.1.1
|
183
197
|
- !ruby/object:Gem::Dependency
|
184
198
|
name: jekyll
|
185
199
|
requirement: !ruby/object:Gem::Requirement
|
@@ -209,20 +223,26 @@ files:
|
|
209
223
|
- ".gitignore"
|
210
224
|
- ".rubocop.yml"
|
211
225
|
- ".ruby-version"
|
226
|
+
- ".solargraph.yml"
|
212
227
|
- ".travis.yml"
|
213
228
|
- Gemfile
|
214
229
|
- LICENSE.txt
|
215
230
|
- Rakefile
|
216
|
-
-
|
217
|
-
- docs/
|
218
|
-
- docs/
|
219
|
-
- docs/
|
231
|
+
- docs/Gemfile
|
232
|
+
- docs/Gemfile.lock
|
233
|
+
- docs/_config.yml
|
234
|
+
- docs/_layouts/directory.html
|
235
|
+
- docs/assets/style.css
|
236
|
+
- docs/contributing.md
|
237
|
+
- docs/example_presets.md
|
220
238
|
- docs/global_configuration.md
|
239
|
+
- docs/index.md
|
221
240
|
- docs/installation.md
|
222
241
|
- docs/migration.md
|
223
242
|
- docs/notes.md
|
243
|
+
- docs/output.md
|
224
244
|
- docs/presets.md
|
225
|
-
- docs/
|
245
|
+
- docs/releases.md
|
226
246
|
- docs/usage.md
|
227
247
|
- jekyll-picture-tag.gemspec
|
228
248
|
- jekyll_picture_tag.gemspec
|
data/docs/examples/_config.yml
DELETED
@@ -1,10 +0,0 @@
|
|
1
|
-
# Sample Jekyll Picture Tag settings
|
2
|
-
# Note that all of these settings have sensible defaults. Don't just copy-paste
|
3
|
-
# this into your _config.yml!
|
4
|
-
picture:
|
5
|
-
source: assets/images/_fullsize
|
6
|
-
output: generated
|
7
|
-
suppress_warnings: false
|
8
|
-
ignore_missing_images: [development, test]
|
9
|
-
cdn_url: cdn.example.com
|
10
|
-
cdn_environments: production
|
data/docs/examples/post.md
DELETED
@@ -1,46 +0,0 @@
|
|
1
|
-
```
|
2
|
-
---
|
3
|
-
layout: post
|
4
|
-
title: Tag examples
|
5
|
-
image: img.jpg
|
6
|
-
---
|
7
|
-
```
|
8
|
-
|
9
|
-
- Standard image, default preset, with alt text:
|
10
|
-
|
11
|
-
`{% picture portrait.jpg --alt An unsual picture %}`
|
12
|
-
|
13
|
-
- Select the `gallery` `markup_preset` (which you must define!):
|
14
|
-
|
15
|
-
`{% picture gallery portrait.jpg %} `
|
16
|
-
|
17
|
-
- Specify html attributes:
|
18
|
-
|
19
|
-
`{% picture portrait.jpg --picture class="some classes" data-downloadable="true" %}`
|
20
|
-
|
21
|
-
- Provide multiple source images for different screen sizes: (note that you must
|
22
|
-
define the mobile `media_preset`):
|
23
|
-
|
24
|
-
`{% picture portrait.jpg mobile: portrait-cropped.jpg %}`
|
25
|
-
|
26
|
-
- Wrap picture in a link to something:
|
27
|
-
|
28
|
-
`{% picture portrait.jpg --link /profile.html %}`
|
29
|
-
|
30
|
-
- Use liquid variables:
|
31
|
-
|
32
|
-
`{% picture {{ post.image }} %}`
|
33
|
-
|
34
|
-
- Line breaks and indentation are fine:
|
35
|
-
|
36
|
-
```
|
37
|
-
{%
|
38
|
-
picture
|
39
|
-
gallery
|
40
|
-
portrait.jpg
|
41
|
-
mobile: portrait-cropped.jpg
|
42
|
-
--picture class="portrait" data-downloadable="true"
|
43
|
-
--img data-awesomeness="11"
|
44
|
-
--alt Ugly Mug
|
45
|
-
%}
|
46
|
-
```
|
data/docs/readme.md
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
# Table of Contents
|
2
|
-
|
3
|
-
* [Installation](installation.md)
|
4
|
-
- Get up and running
|
5
|
-
|
6
|
-
* [Usage](usage.md)
|
7
|
-
- How to write liquid tags and actually put pictures on your site
|
8
|
-
|
9
|
-
* [Global settings](global_configuration.md)
|
10
|
-
- Settings which apply to all presets
|
11
|
-
|
12
|
-
* [Presets](presets.md)
|
13
|
-
- How to customize what images are generated and which markup is generated.
|
14
|
-
|
15
|
-
* [Other notes](notes.md)
|
16
|
-
- Caveats and gotchas
|
17
|
-
|
18
|
-
* [Contribute](/contributing.md)
|
19
|
-
- Appreciate the help!
|
20
|
-
|
21
|
-
* [License](/LICENSE.txt)
|
22
|
-
|
23
|
-
* [Release History](/readme.md#release-history)
|