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.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/.rubocop.yml +2 -0
  3. data/.travis.yml +11 -0
  4. data/Gemfile +2 -2
  5. data/Rakefile +28 -0
  6. data/contributing.md +67 -0
  7. data/docs/examples/_config.yml +10 -0
  8. data/{examples → docs/examples}/_data/picture.yml +39 -19
  9. data/docs/examples/post.md +46 -0
  10. data/docs/global_configuration.md +115 -0
  11. data/docs/installation.md +30 -0
  12. data/docs/migration.md +178 -0
  13. data/docs/notes.md +85 -0
  14. data/docs/presets.md +407 -0
  15. data/docs/readme.md +23 -0
  16. data/docs/usage.md +131 -0
  17. data/jekyll-picture-tag.gemspec +3 -12
  18. data/jekyll_picture_tag.gemspec +8 -3
  19. data/lib/jekyll-picture-tag.rb +5 -3
  20. data/lib/jekyll_picture_tag.rb +45 -42
  21. data/lib/jekyll_picture_tag/defaults/global.yml +0 -3
  22. data/lib/jekyll_picture_tag/defaults/presets.yml +1 -0
  23. data/lib/jekyll_picture_tag/generated_image.rb +60 -39
  24. data/lib/jekyll_picture_tag/img_uri.rb +55 -0
  25. data/lib/jekyll_picture_tag/instructions.rb +1 -102
  26. data/lib/jekyll_picture_tag/instructions/configuration.rb +30 -74
  27. data/lib/jekyll_picture_tag/instructions/html_attributes.rb +18 -27
  28. data/lib/jekyll_picture_tag/instructions/preset.rb +14 -3
  29. data/lib/jekyll_picture_tag/instructions/set.rb +61 -0
  30. data/lib/jekyll_picture_tag/instructions/tag_parser.rb +80 -23
  31. data/lib/jekyll_picture_tag/output_formats.rb +1 -1
  32. data/lib/jekyll_picture_tag/output_formats/{basics.rb → basic.rb} +24 -19
  33. data/lib/jekyll_picture_tag/output_formats/data_attributes.rb +2 -2
  34. data/lib/jekyll_picture_tag/output_formats/direct_url.rb +1 -3
  35. data/lib/jekyll_picture_tag/output_formats/img.rb +4 -4
  36. data/lib/jekyll_picture_tag/output_formats/naked_srcset.rb +5 -4
  37. data/lib/jekyll_picture_tag/output_formats/picture.rb +6 -16
  38. data/lib/jekyll_picture_tag/output_formats/readme.md +8 -15
  39. data/lib/jekyll_picture_tag/router.rb +98 -0
  40. data/lib/jekyll_picture_tag/source_image.rb +15 -23
  41. data/lib/jekyll_picture_tag/srcsets.rb +1 -1
  42. data/lib/jekyll_picture_tag/srcsets/{basics.rb → basic.rb} +22 -13
  43. data/lib/jekyll_picture_tag/srcsets/pixel_ratio.rb +6 -11
  44. data/lib/jekyll_picture_tag/srcsets/width.rb +3 -11
  45. data/lib/jekyll_picture_tag/utils.rb +32 -49
  46. data/lib/jekyll_picture_tag/version.rb +1 -1
  47. data/readme.md +70 -70
  48. metadata +97 -16
  49. data/bin/console +0 -14
  50. data/bin/setup +0 -7
  51. data/examples/_config.yml +0 -4
  52. data/examples/post.md +0 -18
@@ -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)
@@ -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 %}`
@@ -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/jekyll-picture-tag'
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.add_development_dependency 'bundler', '~> 1.16'
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
@@ -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/jekyll-picture-tag'
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', '~> 1.16'
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 'fastimage', '~> 2'
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'
@@ -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
- require_relative 'jekyll_picture_tag'
25
+ require 'jekyll_picture_tag'
@@ -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/version'
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
- # 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/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
- # We can't initialize the tag until we have a context.
42
- PictureTag.init(@raw_params, context)
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
- private
57
+ # The instruction set depends on both the context and the tag parameters:
58
+ PictureTag.instructions = Instructions::Set.new(@raw_params)
49
59
 
50
- # Super clever metaprogramming. It's the dynamic version of MyClass.new;
51
- # instantiate the class defined in our config.
52
- def build_markup
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
- # This is the class name of whichever output format we are selecting:
57
- def output_class
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
@@ -7,6 +7,3 @@ picture:
7
7
  cdn_environments: ['production']
8
8
  nomarkdown: true
9
9
  ignore_missing_images: false
10
-
11
- url: ''
12
- baseurl: ''
@@ -5,3 +5,4 @@ fallback_width: 800
5
5
  fallback_format: original
6
6
  noscript: false
7
7
  link_source: false
8
+ quality: 75
@@ -1,54 +1,75 @@
1
- # Generated Image
2
- # Represents a generated source file.
3
- class GeneratedImage
4
- require 'mini_magick'
5
- require 'fastimage'
1
+ require 'mini_magick'
6
2
 
7
- attr_reader :width
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
- def initialize(source_file:, width:, format:)
10
- @source = source_file
11
- @width = width
12
- @format = format
10
+ def initialize(source_file:, width:, format:)
11
+ @source = source_file
12
+ @width = width
13
+ @format = process_format format
13
14
 
14
- generate_image unless File.exist?(absolute_filename) || @source.missing
15
- end
15
+ generate_image unless File.exist?(absolute_filename) || @source.missing
16
+ end
16
17
 
17
- def name
18
- name = @source.base_name
19
- name << "-#{@width}-"
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
- def absolute_filename
25
- @absolute_filename ||= File.join(PictureTag.config.dest_dir, name)
26
- end
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
- private
30
+ private
29
31
 
30
- def generate_image
31
- puts 'Generating new image file: ' + name
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
- image.format @format
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
- check_dest_dir
43
+ image.format @format
44
+ image.quality PictureTag.quality(@format)
45
+ end
43
46
 
44
- image.write absolute_filename
47
+ def generate_image
48
+ puts 'Generating new image file: ' + name
49
+ process_image
50
+ write_image
51
+ end
45
52
 
46
- FileUtils.chmod(0o644, absolute_filename)
47
- end
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
- # Make sure destination directory exists
50
- def check_dest_dir
51
- dir = File.dirname absolute_filename
52
- FileUtils.mkdir_p(dir) unless Dir.exist?(dir)
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