jekyll_picture_tag 1.6.0 → 1.7.0

data/docs/readme.md

@@ -0,0 +1,23 @@
+# Table of Contents
+
+* [Installation](installation.md)
+  - Get up and running
+
+* [Usage](usage.md)
+  - How to write liquid tags and actually put pictures on your site
+
+* [Global settings](global_configuration.md)
+  - Settings which apply to all presets
+
+* [Presets](presets.md)
+  - How to customize what images are generated and which markup is generated.
+
+* [Other notes](notes.md)
+  - Caveats and gotchas
+
+* [Contribute](/contributing.md)
+  - Appreciate the help!
+
+* [License](/LICENSE.txt)
+
+* [Release History](/readme.md#release-history)

data/docs/usage.md

@@ -0,0 +1,131 @@
+# Liquid Tag Usage
+
+The tag takes a mix of user input and pointers to configuration settings. The only required argument
+is the base image:
+
+`{% picture [preset] (source image) [alternate images] [attributes] %}`
+
+For filenames with spaces, you can either surround it with quotes (`"my image.jpg"`) or escape the
+space with a backslash (`"my\ image.jpg"`).
+
+## Examples:
+
+`{% picture example.jpg %}`
+
+`{% picture thumbnail example.jpg %}`
+
+`{% picture blog_index {{ post.image }} --link {{ post.url }} %}`
+
+`{% picture "some example.jpg" mobile: other\ example.jpg %}`
+
+```
+{% picture 
+  hero 
+  example.jpg 
+  mobile: example_cropped.jpg 
+  --alt Happy Puppy 
+  --picture class="hero" 
+  --link /
+%}
+```
+
+## Argument reference
+
+* **Preset**
+
+  *Format:* `(name of a markup preset described in _data/picture.yml)`
+
+  *Default:* `default`
+
+  Optionally specify a markup
+  [preset](https://github.com/rbuchberger/jekyll_picture_tag/wiki/Writing-Presets) to use, or leave
+  blank for the `default` preset.
+
+* **Source Image** (Required)
+
+  *Format:* `(Image filename, relative to source setting in _config.yml)`
+
+  The base image that will be resized for your picture sources. Can be pretty much any raster image
+  (as long as imagemagick understands it).
+
+* **Alternate images**
+
+    *Format:* `(media query preset): (image filename, relative to source directory)`
+
+    *Example:* `tablet: img_cropped.jpg mobile: img_cropped_more.jpg`
+
+  Optionally specify any number of alternate base images for given [media queries](#media-presets)
+  (specified in `_data/picture.yml`). This is one of of picture's strongest features, often referred
+  to as the [art direction use case](http://usecases.responsiveimages.org/#art-direction).
+
+  Give your images in order of ascending specificity (The first image is the most general). They will
+  be provided to the browser in reverse order, and it will select the first one with a media query
+  that evaluates true.
+
+* **Attributes**
+
+  Optionally specify any number of HTML attributes. These will be added to any attributes you've
+  set in a preset. They can take a few different formats:
+
+  ##### `--link`
+
+  *Format:* `--link (some url)`
+
+  *Examples*: `--link https://example.com`, `--link /blog/some_post/`
+
+    Wrap the image in an anchor tag, with the `href` attribute set to whatever value you give it.
+    This will override automatic source image linking, if you have enabled it.
+
+    **Note**: Don't disable the `nomarkdown` global setting if you would like do this within markdown
+    files and you are using Kramdown (Jekyll's default markdown parser.)
+  ##### `--alt`
+  
+  *Format:* `--alt (alt text)`
+
+  *Example:* `--alt Here is my alt text!`
+
+  Shortcut for `--img alt="..."`
+  
+  ##### `--(element)`
+
+  *Format:* `--(picture|img|source|a|parent) (Standard HTML attributes)`
+
+  *Example:* `--img class="awesome-fade-in" id="coolio" --a data-awesomeness="11"`
+
+  Apply attributes to a given HTML element. Your options are:
+
+  * `picture`
+  * `img`
+  * `source`
+  * `a` (anchor tag)
+  * `parent`
+
+  `--parent` will be applied to the `<picture>` if present, otherwise the `<img>`; useful when using
+    the `auto` output format.
+
+  ##### Old syntax
+
+  The old syntax is to just dump all attributes at the end:
+
+  `{% picture example.jpg alt="alt text" class="super-duper" %}`
+
+  This will continue to work. For backwards compatibility, behavior of previous versions is
+  maintained: all attributes specified this way are applied to the img tag.
+
+#### Line breaks
+Line breaks and spaces are interchangeable, the following is perfectly acceptable:
+
+```
+{%
+  picture my-preset
+    img.jpg
+    mobile: alt.jpg
+    --alt Alt Text
+    --picture class="stumpy"
+%}
+```
+#### Liquid variables
+
+You can use liquid variables in a picture tag:
+
+`{% picture {{ post.featured_image }} --alt Our Project %}`

data/jekyll-picture-tag.gemspec

@@ -1,5 +1,5 @@
 # Why 2 gemspecs?
-
+#
 # Originally, this gem was named 'jekyll-picture-tag', and published on rubygems
 # under this name. There was a break in development, during which push access to
 # rubygems was lost. Development was later resumed, and as a workaround for that
@@ -38,7 +38,7 @@ Gem::Specification.new do |spec|
     This gem has been renamed! Use jekyll_picture_tag instead, which is now
     hosted on rubygems.
   HEREDOC
-  spec.homepage      = 'https://github.com/rbuchberger/jekyll-picture-tag'
+  spec.homepage      = 'https://github.com/rbuchberger/jekyll_picture_tag'
   spec.license       = 'BSD-3-Clause'
   spec.require_paths = ['lib']
 
@@ -48,14 +48,5 @@ Gem::Specification.new do |spec|
 
   spec.required_ruby_version = ['>= 2.5', '< 3']
 
-  spec.add_development_dependency 'bundler', '~> 1.16'
-  spec.add_development_dependency 'pry'
-  spec.add_development_dependency 'rake', '~> 12.3'
-
-  spec.add_dependency 'fastimage', '~> 2'
-  spec.add_dependency 'mime-types', '~> 3'
-  spec.add_dependency 'mini_magick', '~> 4'
-  spec.add_dependency 'objective_elements', '~> 1.1'
-
-  spec.add_runtime_dependency 'jekyll', '< 5'
+  spec.add_dependency 'jekyll_picture_tag'
 end

data/jekyll_picture_tag.gemspec

@@ -17,7 +17,7 @@ Gem::Specification.new do |spec|
     direction and resolution switching — with a little YAML configuration and a
     simple template tag.
   HEREDOC
-  spec.homepage      = 'https://github.com/rbuchberger/jekyll-picture-tag'
+  spec.homepage      = 'https://github.com/rbuchberger/jekyll_picture_tag'
   spec.license       = 'BSD-3-Clause'
   spec.require_paths = ['lib']
 
@@ -27,11 +27,16 @@ Gem::Specification.new do |spec|
 
   spec.required_ruby_version = ['>= 2.5', '< 3']
 
-  spec.add_development_dependency 'bundler', '~> 1.16'
+  spec.add_development_dependency 'bundler', '~> 2.0'
+  spec.add_development_dependency 'minitest', '~> 5.11'
+  spec.add_development_dependency 'mocha', '~> 1.9'
+  spec.add_development_dependency 'nokogiri', '~> 1.10'
   spec.add_development_dependency 'pry'
   spec.add_development_dependency 'rake', '~> 12.3'
+  spec.add_development_dependency 'rubocop'
+  spec.add_development_dependency 'simplecov'
 
-  spec.add_dependency 'fastimage', '~> 2'
+  spec.add_dependency 'addressable', '~> 2.6'
   spec.add_dependency 'mime-types', '~> 3'
   spec.add_dependency 'mini_magick', '~> 4'
   spec.add_dependency 'objective_elements', '~> 1.1'

data/lib/jekyll-picture-tag.rb

@@ -1,4 +1,6 @@
+# rubocop:disable Naming/FileName
 puts '-' * 80
+# rubocop:enable Naming/FileName
 
 puts <<~HEREDOC
   \033[31;1;4m
@@ -9,9 +11,9 @@ puts <<~HEREDOC
 
   gem 'jekyll-picture-tag', git: 'https://github.com/robwierzbowski/jekyll-picture-tag/'
 
-  and replace it with:
+  and replace it with something like:
 
-  gem 'jekyll_picture_tag'
+  gem 'jekyll_picture_tag', '~> 1.6'
 
   Sorry about that. For an explanation, see issue #120:
   https://github.com/rbuchberger/jekyll-picture-tag/issues/120
@@ -20,4 +22,4 @@ HEREDOC
 
 puts '-' * 80
 
-require_relative 'jekyll_picture_tag'
+require 'jekyll_picture_tag'

data/lib/jekyll_picture_tag.rb

@@ -1,36 +1,48 @@
+require 'jekyll'
 require 'objective_elements'
 
 require_relative 'jekyll_picture_tag/generated_image'
-require_relative 'jekyll_picture_tag/source_image'
 require_relative 'jekyll_picture_tag/instructions'
 require_relative 'jekyll_picture_tag/output_formats'
+require_relative 'jekyll_picture_tag/source_image'
 require_relative 'jekyll_picture_tag/srcsets'
 require_relative 'jekyll_picture_tag/utils'
-require_relative 'jekyll_picture_tag/version'
+require_relative 'jekyll_picture_tag/img_uri'
+require_relative 'jekyll_picture_tag/router'
 
+# Title: Jekyll Picture Tag
+# Authors: Rob Wierzbowski   : @robwierzbowski
+#          Justin Reese      : @justinxreese
+#          Welch Canavan     : @xiwcx
+#          Robert Buchberger : @celeritas_5k
+#
+# Description: Easy responsive images for Jekyll.
+#
+# Download: https://github.com/rbuchberger/jekyll_picture_tag
+# Documentation: https://github.com/rbuchberger/jekyll_picture_tag/readme.md
+# Issues: https://github.com/rbuchberger/jekyll_picture_tag/issues
+#
+# Syntax:
+# {% picture [preset] img.jpg [media_query: alt-img.jpg] [attributes] %}
+#
+# Examples:
+#
+#   {% picture poster.jpg --alt The strange case of responsive images %}
+#
+#   {% picture
+#      gallery
+#      poster.jpg
+#      source_small: poster_closeus.jpg
+#      --alt The strange case of responsive images
+#      --img class="gal-img"
+#   %}
+#
+# See the documentation for full configuration and usage instructions.
 module PictureTag
+  extend Router
   ROOT_PATH = __dir__
-  # Title: Jekyll Picture Tag
-  # Authors: Rob Wierzbowski   : @robwierzbowski
-  #          Justin Reese      : @justinxreese
-  #          Welch Canavan     : @xiwcx
-  #          Robert Buchberger : @celeritas_5k
-  #
-  # Description: Easy responsive images for Jekyll.
-  #
-  # Download: https://github.com/robwierzbowski/jekyll-picture-tag
-  # Documentation: https://github.com/robwierzbowski/jekyll-picture-tag/readme.md
-  # Issues: https://github.com/robwierzbowski/jekyll-picture-tag/issues
-  #
-  # Syntax:
-  #   {% picture [preset] img.jpg [media_query: alt-img.jpg] [attr="value"] %}
-  #
-  # Example:
-  #   {% picture poster.jpg --alt The strange case of responsive images %}
-  #   {% picture gallery poster.jpg source_small: poster_closeus.jpg
-  #   alt="The strange case of responsive images" class="gal-img" %}
-  #
-  # See the documentation for full configuration and usage instructions.
+
+  # This is the actual liquid tag, which provides the interface with Jekyll.
   class Picture < Liquid::Tag
     def initialize(tag_name, raw_params, tokens)
       @raw_params = raw_params
@@ -38,28 +50,19 @@ module PictureTag
     end
 
     def render(context)
-      # We can't initialize the tag until we have a context.
-      PictureTag.init(@raw_params, context)
-
-      # Return a string:
-      build_markup.to_s
-    end
+      # Jekyll passes in a mostly undocumented context object, which appears to
+      # hold the entire site, including configuration and the _data dir.
+      PictureTag.context = context
 
-    private
+      # The instruction set depends on both the context and the tag parameters:
+      PictureTag.instructions = Instructions::Set.new(@raw_params)
 
-    # Super clever metaprogramming. It's the dynamic version of MyClass.new;
-    # instantiate the class defined in our config.
-    def build_markup
-      Object.const_get(output_class).new
-    end
+      # We need to explicitly prevent jekyll from overwriting our generated
+      # files:
+      Utils.keep_files
 
-    # This is the class name of whichever output format we are selecting:
-    def output_class
-      'PictureTag::OutputFormats::' + titleize(PictureTag.preset['markup'])
-    end
-
-    def titleize(input)
-      input.split('_').map(&:capitalize).join
+      # Return a string:
+      PictureTag.output_class.new.to_s
     end
   end
 end

data/lib/jekyll_picture_tag/defaults/global.yml

@@ -7,6 +7,3 @@ picture:
   cdn_environments: ['production']
   nomarkdown: true
   ignore_missing_images: false
-
-url: ''
-baseurl: ''

data/lib/jekyll_picture_tag/defaults/presets.yml

@@ -5,3 +5,4 @@ fallback_width: 800
 fallback_format: original
 noscript: false
 link_source: false
+quality: 75

data/lib/jekyll_picture_tag/generated_image.rb

@@ -1,54 +1,75 @@
-# Generated Image
-# Represents a generated source file.
-class GeneratedImage
-  require 'mini_magick'
-  require 'fastimage'
+require 'mini_magick'
 
-  attr_reader :width
+module PictureTag
+  # Generated Image
+  # Represents a generated source file.
+  class GeneratedImage
+    attr_reader :width, :format
+    include MiniMagick
 
-  def initialize(source_file:, width:, format:)
-    @source = source_file
-    @width  = width
-    @format = format
+    def initialize(source_file:, width:, format:)
+      @source = source_file
+      @width  = width
+      @format = process_format format
 
-    generate_image unless File.exist?(absolute_filename) || @source.missing
-  end
+      generate_image unless File.exist?(absolute_filename) || @source.missing
+    end
 
-  def name
-    name = @source.base_name
-    name << "-#{@width}-"
-    name << @source.digest
-    name << '.' + @format
-  end
+    def name
+      "#{@source.base_name}-#{@width}-#{@source.digest}.#{@format}"
+    end
 
-  def absolute_filename
-    @absolute_filename ||= File.join(PictureTag.config.dest_dir, name)
-  end
+    def absolute_filename
+      @absolute_filename ||= File.join(PictureTag.dest_dir, name)
+    end
+
+    def uri
+      ImgURI.new(name).to_s
+    end
 
-  private
+    private
 
-  def generate_image
-    puts 'Generating new image file: ' + name
-    image = MiniMagick::Image.open(@source.name)
-    # Scale and crop
-    image.combine_options do |i|
-      i.resize "#{@width}x"
-      i.auto_orient
-      i.strip
+    def image
+      @image ||= Image.open(@source.name)
     end
 
-    image.format @format
+    def process_image
+      image.combine_options do |i|
+        i.resize "#{@width}x"
+        i.auto_orient
+        i.strip
+      end
 
-    check_dest_dir
+      image.format @format
+      image.quality PictureTag.quality(@format)
+    end
 
-    image.write absolute_filename
+    def generate_image
+      puts 'Generating new image file: ' + name
+      process_image
+      write_image
+    end
 
-    FileUtils.chmod(0o644, absolute_filename)
-  end
+    def write_image
+      check_dest_dir
+
+      image.write absolute_filename
+
+      FileUtils.chmod(0o644, absolute_filename)
+    end
+
+    # Make sure destination directory exists
+    def check_dest_dir
+      dir = File.dirname absolute_filename
+      FileUtils.mkdir_p(dir) unless Dir.exist?(dir)
+    end
 
-  # Make sure destination directory exists
-  def check_dest_dir
-    dir = File.dirname absolute_filename
-    FileUtils.mkdir_p(dir) unless Dir.exist?(dir)
+    def process_format(format)
+      if format.casecmp('original').zero?
+        @source.ext
+      else
+        format.downcase
+      end
+    end
   end
 end