jekyll_picture_tag 1.6.0 → 1.7.0
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/.rubocop.yml +2 -0
- data/.travis.yml +11 -0
- data/Gemfile +2 -2
- data/Rakefile +28 -0
- data/contributing.md +67 -0
- data/docs/examples/_config.yml +10 -0
- data/{examples → docs/examples}/_data/picture.yml +39 -19
- data/docs/examples/post.md +46 -0
- data/docs/global_configuration.md +115 -0
- data/docs/installation.md +30 -0
- data/docs/migration.md +178 -0
- data/docs/notes.md +85 -0
- data/docs/presets.md +407 -0
- data/docs/readme.md +23 -0
- data/docs/usage.md +131 -0
- data/jekyll-picture-tag.gemspec +3 -12
- data/jekyll_picture_tag.gemspec +8 -3
- data/lib/jekyll-picture-tag.rb +5 -3
- data/lib/jekyll_picture_tag.rb +45 -42
- data/lib/jekyll_picture_tag/defaults/global.yml +0 -3
- data/lib/jekyll_picture_tag/defaults/presets.yml +1 -0
- data/lib/jekyll_picture_tag/generated_image.rb +60 -39
- data/lib/jekyll_picture_tag/img_uri.rb +55 -0
- data/lib/jekyll_picture_tag/instructions.rb +1 -102
- data/lib/jekyll_picture_tag/instructions/configuration.rb +30 -74
- data/lib/jekyll_picture_tag/instructions/html_attributes.rb +18 -27
- data/lib/jekyll_picture_tag/instructions/preset.rb +14 -3
- data/lib/jekyll_picture_tag/instructions/set.rb +61 -0
- data/lib/jekyll_picture_tag/instructions/tag_parser.rb +80 -23
- data/lib/jekyll_picture_tag/output_formats.rb +1 -1
- data/lib/jekyll_picture_tag/output_formats/{basics.rb → basic.rb} +24 -19
- data/lib/jekyll_picture_tag/output_formats/data_attributes.rb +2 -2
- data/lib/jekyll_picture_tag/output_formats/direct_url.rb +1 -3
- data/lib/jekyll_picture_tag/output_formats/img.rb +4 -4
- data/lib/jekyll_picture_tag/output_formats/naked_srcset.rb +5 -4
- data/lib/jekyll_picture_tag/output_formats/picture.rb +6 -16
- data/lib/jekyll_picture_tag/output_formats/readme.md +8 -15
- data/lib/jekyll_picture_tag/router.rb +98 -0
- data/lib/jekyll_picture_tag/source_image.rb +15 -23
- data/lib/jekyll_picture_tag/srcsets.rb +1 -1
- data/lib/jekyll_picture_tag/srcsets/{basics.rb → basic.rb} +22 -13
- data/lib/jekyll_picture_tag/srcsets/pixel_ratio.rb +6 -11
- data/lib/jekyll_picture_tag/srcsets/width.rb +3 -11
- data/lib/jekyll_picture_tag/utils.rb +32 -49
- data/lib/jekyll_picture_tag/version.rb +1 -1
- data/readme.md +70 -70
- metadata +97 -16
- data/bin/console +0 -14
- data/bin/setup +0 -7
- data/examples/_config.yml +0 -4
- data/examples/post.md +0 -18
data/docs/readme.md
ADDED
@@ -0,0 +1,23 @@
|
|
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)
|
data/docs/usage.md
ADDED
@@ -0,0 +1,131 @@
|
|
1
|
+
# Liquid Tag Usage
|
2
|
+
|
3
|
+
The tag takes a mix of user input and pointers to configuration settings. The only required argument
|
4
|
+
is the base image:
|
5
|
+
|
6
|
+
`{% picture [preset] (source image) [alternate images] [attributes] %}`
|
7
|
+
|
8
|
+
For filenames with spaces, you can either surround it with quotes (`"my image.jpg"`) or escape the
|
9
|
+
space with a backslash (`"my\ image.jpg"`).
|
10
|
+
|
11
|
+
## Examples:
|
12
|
+
|
13
|
+
`{% picture example.jpg %}`
|
14
|
+
|
15
|
+
`{% picture thumbnail example.jpg %}`
|
16
|
+
|
17
|
+
`{% picture blog_index {{ post.image }} --link {{ post.url }} %}`
|
18
|
+
|
19
|
+
`{% picture "some example.jpg" mobile: other\ example.jpg %}`
|
20
|
+
|
21
|
+
```
|
22
|
+
{% picture
|
23
|
+
hero
|
24
|
+
example.jpg
|
25
|
+
mobile: example_cropped.jpg
|
26
|
+
--alt Happy Puppy
|
27
|
+
--picture class="hero"
|
28
|
+
--link /
|
29
|
+
%}
|
30
|
+
```
|
31
|
+
|
32
|
+
## Argument reference
|
33
|
+
|
34
|
+
* **Preset**
|
35
|
+
|
36
|
+
*Format:* `(name of a markup preset described in _data/picture.yml)`
|
37
|
+
|
38
|
+
*Default:* `default`
|
39
|
+
|
40
|
+
Optionally specify a markup
|
41
|
+
[preset](https://github.com/rbuchberger/jekyll_picture_tag/wiki/Writing-Presets) to use, or leave
|
42
|
+
blank for the `default` preset.
|
43
|
+
|
44
|
+
* **Source Image** (Required)
|
45
|
+
|
46
|
+
*Format:* `(Image filename, relative to source setting in _config.yml)`
|
47
|
+
|
48
|
+
The base image that will be resized for your picture sources. Can be pretty much any raster image
|
49
|
+
(as long as imagemagick understands it).
|
50
|
+
|
51
|
+
* **Alternate images**
|
52
|
+
|
53
|
+
*Format:* `(media query preset): (image filename, relative to source directory)`
|
54
|
+
|
55
|
+
*Example:* `tablet: img_cropped.jpg mobile: img_cropped_more.jpg`
|
56
|
+
|
57
|
+
Optionally specify any number of alternate base images for given [media queries](#media-presets)
|
58
|
+
(specified in `_data/picture.yml`). This is one of of picture's strongest features, often referred
|
59
|
+
to as the [art direction use case](http://usecases.responsiveimages.org/#art-direction).
|
60
|
+
|
61
|
+
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 a media query
|
63
|
+
that evaluates true.
|
64
|
+
|
65
|
+
* **Attributes**
|
66
|
+
|
67
|
+
Optionally specify any number of HTML attributes. These will be added to any attributes you've
|
68
|
+
set in a preset. They can take a few different formats:
|
69
|
+
|
70
|
+
##### `--link`
|
71
|
+
|
72
|
+
*Format:* `--link (some url)`
|
73
|
+
|
74
|
+
*Examples*: `--link https://example.com`, `--link /blog/some_post/`
|
75
|
+
|
76
|
+
Wrap the image in an anchor tag, with the `href` attribute set to whatever value you give it.
|
77
|
+
This will override automatic source image linking, if you have enabled it.
|
78
|
+
|
79
|
+
**Note**: Don't disable the `nomarkdown` global setting if you would like do this within markdown
|
80
|
+
files and you are using Kramdown (Jekyll's default markdown parser.)
|
81
|
+
##### `--alt`
|
82
|
+
|
83
|
+
*Format:* `--alt (alt text)`
|
84
|
+
|
85
|
+
*Example:* `--alt Here is my alt text!`
|
86
|
+
|
87
|
+
Shortcut for `--img alt="..."`
|
88
|
+
|
89
|
+
##### `--(element)`
|
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"`
|
94
|
+
|
95
|
+
Apply attributes to a given HTML element. Your options are:
|
96
|
+
|
97
|
+
* `picture`
|
98
|
+
* `img`
|
99
|
+
* `source`
|
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" %}`
|
111
|
+
|
112
|
+
This will continue to work. For backwards compatibility, behavior of previous versions is
|
113
|
+
maintained: all attributes specified this way are applied to the img tag.
|
114
|
+
|
115
|
+
#### Line breaks
|
116
|
+
Line breaks and spaces are interchangeable, the following is perfectly acceptable:
|
117
|
+
|
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
|
128
|
+
|
129
|
+
You can use liquid variables in a picture tag:
|
130
|
+
|
131
|
+
`{% picture {{ post.featured_image }} --alt Our Project %}`
|
data/jekyll-picture-tag.gemspec
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
# Why 2 gemspecs?
|
2
|
-
|
2
|
+
#
|
3
3
|
# Originally, this gem was named 'jekyll-picture-tag', and published on rubygems
|
4
4
|
# under this name. There was a break in development, during which push access to
|
5
5
|
# rubygems was lost. Development was later resumed, and as a workaround for that
|
@@ -38,7 +38,7 @@ Gem::Specification.new do |spec|
|
|
38
38
|
This gem has been renamed! Use jekyll_picture_tag instead, which is now
|
39
39
|
hosted on rubygems.
|
40
40
|
HEREDOC
|
41
|
-
spec.homepage = 'https://github.com/rbuchberger/
|
41
|
+
spec.homepage = 'https://github.com/rbuchberger/jekyll_picture_tag'
|
42
42
|
spec.license = 'BSD-3-Clause'
|
43
43
|
spec.require_paths = ['lib']
|
44
44
|
|
@@ -48,14 +48,5 @@ Gem::Specification.new do |spec|
|
|
48
48
|
|
49
49
|
spec.required_ruby_version = ['>= 2.5', '< 3']
|
50
50
|
|
51
|
-
spec.
|
52
|
-
spec.add_development_dependency 'pry'
|
53
|
-
spec.add_development_dependency 'rake', '~> 12.3'
|
54
|
-
|
55
|
-
spec.add_dependency 'fastimage', '~> 2'
|
56
|
-
spec.add_dependency 'mime-types', '~> 3'
|
57
|
-
spec.add_dependency 'mini_magick', '~> 4'
|
58
|
-
spec.add_dependency 'objective_elements', '~> 1.1'
|
59
|
-
|
60
|
-
spec.add_runtime_dependency 'jekyll', '< 5'
|
51
|
+
spec.add_dependency 'jekyll_picture_tag'
|
61
52
|
end
|
data/jekyll_picture_tag.gemspec
CHANGED
@@ -17,7 +17,7 @@ Gem::Specification.new do |spec|
|
|
17
17
|
direction and resolution switching — with a little YAML configuration and a
|
18
18
|
simple template tag.
|
19
19
|
HEREDOC
|
20
|
-
spec.homepage = 'https://github.com/rbuchberger/
|
20
|
+
spec.homepage = 'https://github.com/rbuchberger/jekyll_picture_tag'
|
21
21
|
spec.license = 'BSD-3-Clause'
|
22
22
|
spec.require_paths = ['lib']
|
23
23
|
|
@@ -27,11 +27,16 @@ Gem::Specification.new do |spec|
|
|
27
27
|
|
28
28
|
spec.required_ruby_version = ['>= 2.5', '< 3']
|
29
29
|
|
30
|
-
spec.add_development_dependency 'bundler', '~>
|
30
|
+
spec.add_development_dependency 'bundler', '~> 2.0'
|
31
|
+
spec.add_development_dependency 'minitest', '~> 5.11'
|
32
|
+
spec.add_development_dependency 'mocha', '~> 1.9'
|
33
|
+
spec.add_development_dependency 'nokogiri', '~> 1.10'
|
31
34
|
spec.add_development_dependency 'pry'
|
32
35
|
spec.add_development_dependency 'rake', '~> 12.3'
|
36
|
+
spec.add_development_dependency 'rubocop'
|
37
|
+
spec.add_development_dependency 'simplecov'
|
33
38
|
|
34
|
-
spec.add_dependency '
|
39
|
+
spec.add_dependency 'addressable', '~> 2.6'
|
35
40
|
spec.add_dependency 'mime-types', '~> 3'
|
36
41
|
spec.add_dependency 'mini_magick', '~> 4'
|
37
42
|
spec.add_dependency 'objective_elements', '~> 1.1'
|
data/lib/jekyll-picture-tag.rb
CHANGED
@@ -1,4 +1,6 @@
|
|
1
|
+
# rubocop:disable Naming/FileName
|
1
2
|
puts '-' * 80
|
3
|
+
# rubocop:enable Naming/FileName
|
2
4
|
|
3
5
|
puts <<~HEREDOC
|
4
6
|
\033[31;1;4m
|
@@ -9,9 +11,9 @@ puts <<~HEREDOC
|
|
9
11
|
|
10
12
|
gem 'jekyll-picture-tag', git: 'https://github.com/robwierzbowski/jekyll-picture-tag/'
|
11
13
|
|
12
|
-
and replace it with:
|
14
|
+
and replace it with something like:
|
13
15
|
|
14
|
-
gem 'jekyll_picture_tag'
|
16
|
+
gem 'jekyll_picture_tag', '~> 1.6'
|
15
17
|
|
16
18
|
Sorry about that. For an explanation, see issue #120:
|
17
19
|
https://github.com/rbuchberger/jekyll-picture-tag/issues/120
|
@@ -20,4 +22,4 @@ HEREDOC
|
|
20
22
|
|
21
23
|
puts '-' * 80
|
22
24
|
|
23
|
-
|
25
|
+
require 'jekyll_picture_tag'
|
data/lib/jekyll_picture_tag.rb
CHANGED
@@ -1,36 +1,48 @@
|
|
1
|
+
require 'jekyll'
|
1
2
|
require 'objective_elements'
|
2
3
|
|
3
4
|
require_relative 'jekyll_picture_tag/generated_image'
|
4
|
-
require_relative 'jekyll_picture_tag/source_image'
|
5
5
|
require_relative 'jekyll_picture_tag/instructions'
|
6
6
|
require_relative 'jekyll_picture_tag/output_formats'
|
7
|
+
require_relative 'jekyll_picture_tag/source_image'
|
7
8
|
require_relative 'jekyll_picture_tag/srcsets'
|
8
9
|
require_relative 'jekyll_picture_tag/utils'
|
9
|
-
require_relative 'jekyll_picture_tag/
|
10
|
+
require_relative 'jekyll_picture_tag/img_uri'
|
11
|
+
require_relative 'jekyll_picture_tag/router'
|
10
12
|
|
13
|
+
# Title: Jekyll Picture Tag
|
14
|
+
# Authors: Rob Wierzbowski : @robwierzbowski
|
15
|
+
# Justin Reese : @justinxreese
|
16
|
+
# Welch Canavan : @xiwcx
|
17
|
+
# Robert Buchberger : @celeritas_5k
|
18
|
+
#
|
19
|
+
# Description: Easy responsive images for Jekyll.
|
20
|
+
#
|
21
|
+
# Download: https://github.com/rbuchberger/jekyll_picture_tag
|
22
|
+
# Documentation: https://github.com/rbuchberger/jekyll_picture_tag/readme.md
|
23
|
+
# Issues: https://github.com/rbuchberger/jekyll_picture_tag/issues
|
24
|
+
#
|
25
|
+
# Syntax:
|
26
|
+
# {% picture [preset] img.jpg [media_query: alt-img.jpg] [attributes] %}
|
27
|
+
#
|
28
|
+
# Examples:
|
29
|
+
#
|
30
|
+
# {% picture poster.jpg --alt The strange case of responsive images %}
|
31
|
+
#
|
32
|
+
# {% picture
|
33
|
+
# gallery
|
34
|
+
# poster.jpg
|
35
|
+
# source_small: poster_closeus.jpg
|
36
|
+
# --alt The strange case of responsive images
|
37
|
+
# --img class="gal-img"
|
38
|
+
# %}
|
39
|
+
#
|
40
|
+
# See the documentation for full configuration and usage instructions.
|
11
41
|
module PictureTag
|
42
|
+
extend Router
|
12
43
|
ROOT_PATH = __dir__
|
13
|
-
|
14
|
-
#
|
15
|
-
# Justin Reese : @justinxreese
|
16
|
-
# Welch Canavan : @xiwcx
|
17
|
-
# Robert Buchberger : @celeritas_5k
|
18
|
-
#
|
19
|
-
# Description: Easy responsive images for Jekyll.
|
20
|
-
#
|
21
|
-
# Download: https://github.com/robwierzbowski/jekyll-picture-tag
|
22
|
-
# Documentation: https://github.com/robwierzbowski/jekyll-picture-tag/readme.md
|
23
|
-
# Issues: https://github.com/robwierzbowski/jekyll-picture-tag/issues
|
24
|
-
#
|
25
|
-
# Syntax:
|
26
|
-
# {% picture [preset] img.jpg [media_query: alt-img.jpg] [attr="value"] %}
|
27
|
-
#
|
28
|
-
# Example:
|
29
|
-
# {% picture poster.jpg --alt The strange case of responsive images %}
|
30
|
-
# {% picture gallery poster.jpg source_small: poster_closeus.jpg
|
31
|
-
# alt="The strange case of responsive images" class="gal-img" %}
|
32
|
-
#
|
33
|
-
# See the documentation for full configuration and usage instructions.
|
44
|
+
|
45
|
+
# This is the actual liquid tag, which provides the interface with Jekyll.
|
34
46
|
class Picture < Liquid::Tag
|
35
47
|
def initialize(tag_name, raw_params, tokens)
|
36
48
|
@raw_params = raw_params
|
@@ -38,28 +50,19 @@ module PictureTag
|
|
38
50
|
end
|
39
51
|
|
40
52
|
def render(context)
|
41
|
-
#
|
42
|
-
|
43
|
-
|
44
|
-
# Return a string:
|
45
|
-
build_markup.to_s
|
46
|
-
end
|
53
|
+
# Jekyll passes in a mostly undocumented context object, which appears to
|
54
|
+
# hold the entire site, including configuration and the _data dir.
|
55
|
+
PictureTag.context = context
|
47
56
|
|
48
|
-
|
57
|
+
# The instruction set depends on both the context and the tag parameters:
|
58
|
+
PictureTag.instructions = Instructions::Set.new(@raw_params)
|
49
59
|
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
Object.const_get(output_class).new
|
54
|
-
end
|
60
|
+
# We need to explicitly prevent jekyll from overwriting our generated
|
61
|
+
# files:
|
62
|
+
Utils.keep_files
|
55
63
|
|
56
|
-
|
57
|
-
|
58
|
-
'PictureTag::OutputFormats::' + titleize(PictureTag.preset['markup'])
|
59
|
-
end
|
60
|
-
|
61
|
-
def titleize(input)
|
62
|
-
input.split('_').map(&:capitalize).join
|
64
|
+
# Return a string:
|
65
|
+
PictureTag.output_class.new.to_s
|
63
66
|
end
|
64
67
|
end
|
65
68
|
end
|
@@ -1,54 +1,75 @@
|
|
1
|
-
|
2
|
-
# Represents a generated source file.
|
3
|
-
class GeneratedImage
|
4
|
-
require 'mini_magick'
|
5
|
-
require 'fastimage'
|
1
|
+
require 'mini_magick'
|
6
2
|
|
7
|
-
|
3
|
+
module PictureTag
|
4
|
+
# Generated Image
|
5
|
+
# Represents a generated source file.
|
6
|
+
class GeneratedImage
|
7
|
+
attr_reader :width, :format
|
8
|
+
include MiniMagick
|
8
9
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
10
|
+
def initialize(source_file:, width:, format:)
|
11
|
+
@source = source_file
|
12
|
+
@width = width
|
13
|
+
@format = process_format format
|
13
14
|
|
14
|
-
|
15
|
-
|
15
|
+
generate_image unless File.exist?(absolute_filename) || @source.missing
|
16
|
+
end
|
16
17
|
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
name << @source.digest
|
21
|
-
name << '.' + @format
|
22
|
-
end
|
18
|
+
def name
|
19
|
+
"#{@source.base_name}-#{@width}-#{@source.digest}.#{@format}"
|
20
|
+
end
|
23
21
|
|
24
|
-
|
25
|
-
|
26
|
-
|
22
|
+
def absolute_filename
|
23
|
+
@absolute_filename ||= File.join(PictureTag.dest_dir, name)
|
24
|
+
end
|
25
|
+
|
26
|
+
def uri
|
27
|
+
ImgURI.new(name).to_s
|
28
|
+
end
|
27
29
|
|
28
|
-
|
30
|
+
private
|
29
31
|
|
30
|
-
|
31
|
-
|
32
|
-
image = MiniMagick::Image.open(@source.name)
|
33
|
-
# Scale and crop
|
34
|
-
image.combine_options do |i|
|
35
|
-
i.resize "#{@width}x"
|
36
|
-
i.auto_orient
|
37
|
-
i.strip
|
32
|
+
def image
|
33
|
+
@image ||= Image.open(@source.name)
|
38
34
|
end
|
39
35
|
|
40
|
-
|
36
|
+
def process_image
|
37
|
+
image.combine_options do |i|
|
38
|
+
i.resize "#{@width}x"
|
39
|
+
i.auto_orient
|
40
|
+
i.strip
|
41
|
+
end
|
41
42
|
|
42
|
-
|
43
|
+
image.format @format
|
44
|
+
image.quality PictureTag.quality(@format)
|
45
|
+
end
|
43
46
|
|
44
|
-
|
47
|
+
def generate_image
|
48
|
+
puts 'Generating new image file: ' + name
|
49
|
+
process_image
|
50
|
+
write_image
|
51
|
+
end
|
45
52
|
|
46
|
-
|
47
|
-
|
53
|
+
def write_image
|
54
|
+
check_dest_dir
|
55
|
+
|
56
|
+
image.write absolute_filename
|
57
|
+
|
58
|
+
FileUtils.chmod(0o644, absolute_filename)
|
59
|
+
end
|
60
|
+
|
61
|
+
# Make sure destination directory exists
|
62
|
+
def check_dest_dir
|
63
|
+
dir = File.dirname absolute_filename
|
64
|
+
FileUtils.mkdir_p(dir) unless Dir.exist?(dir)
|
65
|
+
end
|
48
66
|
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
67
|
+
def process_format(format)
|
68
|
+
if format.casecmp('original').zero?
|
69
|
+
@source.ext
|
70
|
+
else
|
71
|
+
format.downcase
|
72
|
+
end
|
73
|
+
end
|
53
74
|
end
|
54
75
|
end
|