jekyll_picture_tag 1.6.0 → 1.7.0

data/lib/jekyll_picture_tag/source_image.rb

@@ -1,21 +1,23 @@
 module PictureTag
   # Handles a given source image file and its properties. Provides a speed
   # advantage by storing expensive file reads and writes in instance variables,
-  # to be reused by many different source images.
+  # to be reused by many different generated images.
   class SourceImage
-    attr_reader :name, :shortname, :missing
+    attr_reader :name, :shortname, :missing, :media_preset
+    include MiniMagick
 
-    def initialize(relative_filename)
+    def initialize(relative_filename, media_preset = nil)
       @shortname = relative_filename
       @name = grab_file relative_filename
-    end
-
-    def size
-      @size ||= build_size
+      @media_preset = media_preset
     end
 
     def width
-      size[:width]
+      @width ||= if @missing
+                   999_999
+                 else
+                   image.width
+                 end
     end
 
     def digest
@@ -39,33 +41,23 @@ module PictureTag
 
     private
 
-    def build_size
-      if @missing
-        width = 999_999
-        height = 999_999
-      else
-        width, height = FastImage.size(@name)
-      end
-
-      {
-        width: width,
-        height: height
-      }
+    def image
+      @image ||= Image.open(@name)
     end
 
     # Turn a relative filename into an absolute one, and make sure it exists.
     def grab_file(source_file)
-      source_name = File.join(PictureTag.config.source_dir, source_file)
+      source_name = File.join(PictureTag.source_dir, source_file)
 
       if File.exist? source_name
         @missing = false
 
-      elsif PictureTag.config.continue_on_missing?
+      elsif PictureTag.continue_on_missing?
         @missing = true
         Utils.warning missing_image_warning(source_name)
 
       else
-        raise missing_image_error(source_name)
+        raise ArgumentError, missing_image_error(source_name)
       end
 
       source_name

data/lib/jekyll_picture_tag/srcsets.rb

@@ -1,3 +1,3 @@
-require_relative 'srcsets/basics'
+require_relative 'srcsets/basic'
 require_relative 'srcsets/pixel_ratio'
 require_relative 'srcsets/width'

data/lib/jekyll_picture_tag/srcsets/{basics.rb → basic.rb}

@@ -1,3 +1,4 @@
+require 'mime-types'
 module PictureTag
   # Handles srcset generation, which also handles file generation.
   module Srcsets
@@ -7,18 +8,27 @@ module PictureTag
     # - Return an array of srcset entries.
     # - Call generate_file for each entry, giving it the desired width in
     #   pixels.
-    module Basics
-      require 'fastimage'
-      require 'mime-types'
-      attr_reader :media, :source_image
+    class Basic
+      attr_reader :source_image, :media
 
-      def initialize(media:, format:)
-        @media = media # Associated Media Query, can be nil
+      def initialize(source_image, input_format)
+        @source_image = source_image
+        @input_format = input_format
+        @media = source_image.media_preset
+      end
 
-        # Output format:
-        @format = Utils.process_format(format, media)
+      def format
+        # Input format might be 'original', which is handled by the generated
+        # image.
+        @format ||= files.first.format
+      end
 
-        @source_image = PictureTag.source_images[@media]
+      def files
+        @files ||= widths.collect { |w| generate_file(w) }
+      end
+
+      def to_a
+        files.collect { |f| build_srcset_entry(f) }
       end
 
       def to_s
@@ -28,7 +38,7 @@ module PictureTag
       # Allows us to add a type attribute to whichever element contains this
       # srcset.
       def mime_type
-        MIME::Types.type_for(@format).first.to_s
+        MIME::Types.type_for(format).first.to_s
       end
 
       # Some srcsets have them, for those that don't return nil.
@@ -53,7 +63,7 @@ module PictureTag
       private
 
       def handle_small_source(targets, image_width)
-        PictureTag::Utils.warning(
+        Utils.warning(
           " #{@source_image.shortname} is #{image_width}px wide, smaller than" \
           " at least one size in the set #{targets}. Will not enlarge."
         )
@@ -69,10 +79,9 @@ module PictureTag
         GeneratedImage.new(
           source_file: @source_image,
           width: width,
-          format: @format
+          format: @input_format
         )
       end
-
     end
   end
 end

data/lib/jekyll_picture_tag/srcsets/pixel_ratio.rb

@@ -2,13 +2,7 @@ module PictureTag
   module Srcsets
     # Creates a srcset in the "(filename) (pixel_ratio)x" format.
     # Example: "img.jpg 1x, img2.jpg 1.5x, img3.jpg 2x"
-    class PixelRatio
-      include Basics
-
-      def to_a
-        widths.collect { |w| build_srcset_entry(w) }
-      end
-
+    class PixelRatio < Basic
       private
 
       def widths
@@ -19,13 +13,14 @@ module PictureTag
         check_widths target
       end
 
-      def build_srcset_entry(width)
+      def build_srcset_entry(file)
         # We have to recalculate the pixel ratio after verifying our source
         # image is large enough.
-        pixel_ratio = (width.to_f / PictureTag.preset['base_width']).round(2)
-        file = generate_file(width)
+        pixel_ratio = (
+          file.width.to_f / PictureTag.preset['base_width']
+        ).round(2)
 
-        "#{PictureTag.build_url(file.name)} #{pixel_ratio}x"
+        "#{file.uri} #{pixel_ratio}x"
       end
     end
   end

data/lib/jekyll_picture_tag/srcsets/width.rb

@@ -2,13 +2,7 @@ module PictureTag
   module Srcsets
     # Creates a srcset in the "(filename) (width)w, (...)" format.
     # Example: "img.jpg 400w, img2.jpg 600w, img3.jpg 800w"
-    class Width
-      include Basics
-
-      def to_a
-        widths.collect { |w| build_srcset_entry(w) }
-      end
-
+    class Width < Basic
       # Sizes html attribute. Since it's intimately related to srcset, we
       # generate it at the same time.
       def sizes
@@ -31,10 +25,8 @@ module PictureTag
         check_widths PictureTag.widths(@media)
       end
 
-      def build_srcset_entry(width)
-        file = generate_file(width)
-
-        "#{PictureTag.build_url(file.name)} #{file.width}w"
+      def build_srcset_entry(file)
+        "#{file.uri} #{file.width}w"
       end
 
       def build_size_entry(media, size)

data/lib/jekyll_picture_tag/utils.rb

@@ -2,66 +2,49 @@ module PictureTag
   # This is a little module to hold logic that doesn't fit other places. If it
   # starts getting big, refactor.
   module Utils
-    # Configure Jekyll to keep our generated files
-    def self.keep_files
-      dest_dir = PictureTag.config['picture']['output']
+    class << self
+      # Configure Jekyll to keep our generated files
+      def keep_files
+        dest_dir = PictureTag.config['picture']['output']
 
-      # Chop a slash off the end, if it's there. Doesn't work otherwise.
-      dest_dir = dest_dir[0..-2] if dest_dir =~ %r{/\z}
+        # Chop a slash off the end, if it's there. Doesn't work otherwise.
+        dest_dir = dest_dir[0..-2] if dest_dir =~ %r{/\z}
 
-      return if PictureTag.site.config['keep_files'].include?(dest_dir)
+        return if PictureTag.site.config['keep_files'].include?(dest_dir)
 
-      PictureTag.site.config['keep_files'] << dest_dir
-    end
-
-    # Print a warning to the console
-    def self.warning(message)
-      return if PictureTag.config['picture']['suppress_warnings']
-
-      warn 'Jekyll Picture Tag Warning: '.yellow + message
-    end
-
-    # Parse a liquid template; allows liquid variables to be included as tag
-    # params.
-    def self.liquid_lookup(params)
-      Liquid::Template.parse(params).render(PictureTag.context)
+        PictureTag.site.config['keep_files'] << dest_dir
+      end
 
-      # This gsub allows people to include template code for javascript
-      # libraries such as handlebar.js. It adds complication and I'm not sure
-      # it has much value now, so I'm commenting it out. If someone has a use
-      # case for it we can add it back in.
-      # .gsub(/\\\{\\\{|\\\{\\%/, '\{\{' => '{{', '\{\%' => '{%')
-    end
+      # Print a warning to the console
+      def warning(message)
+        return if PictureTag.config['picture']['suppress_warnings']
 
-    # Allows us to use 'original' as a format name.
-    def self.process_format(format, media)
-      if format.casecmp('original').zero?
-        PictureTag.source_images[media].ext
-      else
-        format.downcase
+        warn 'Jekyll Picture Tag Warning: '.yellow + message
       end
-    end
 
-    # Used for auto markup configuration and such
-    def self.count_srcsets
-      formats = PictureTag.preset['formats'].length
-      source_images = PictureTag.source_images.length
+      # Parse a liquid template; allows liquid variables to be included as tag
+      # params.
+      def liquid_lookup(params)
+        Liquid::Template.parse(params).render(PictureTag.context)
+      end
 
-      formats * source_images
-    end
+      # Used for auto markup configuration and such
+      def count_srcsets
+        PictureTag.formats.length * PictureTag.source_images.length
+      end
 
-    # Returns whether or not the current page is a markdown file.
-    def self.markdown_page?
-      page_name = PictureTag.page['name']
-      page_ext = PictureTag.page['ext']
-      ext = page_ext ? page_ext : File.extname(page_name)
+      # Returns whether or not the current page is a markdown file.
+      def markdown_page?
+        page_name = PictureTag.page['name']
+        page_ext = PictureTag.page['ext']
+        ext = page_ext || File.extname(page_name)
 
-      ext.casecmp('.md').zero? || ext.casecmp('.markdown').zero?
-    end
+        ext.casecmp('.md').zero? || ext.casecmp('.markdown').zero?
+      end
 
-    # Returns the widest source image
-    def self.biggest_source
-      PictureTag.source_images.values.max_by(&:width)
+      def titleize(input)
+        input.split('_').map(&:capitalize).join
+      end
     end
   end
 end

data/lib/jekyll_picture_tag/version.rb

@@ -1,3 +1,3 @@
 module PictureTag
-  VERSION = '1.6.0'.freeze
+  VERSION = '1.7.0'.freeze
 end

data/readme.md

@@ -2,67 +2,61 @@
 
 **Easy responsive images for Jekyll.**
 
-It's easy to throw an image on a webpage and call it a day. Doing justice to your users by serving it
-efficiently on all screen sizes is tedious and tricky. Tedious, tricky things should be automated.
-
-Jekyll Picture Tag is a liquid tag that adds responsive images to your
-[Jekyll](http://jekyllrb.com) static site. It automatically creates resized,
-reformatted source images, is fully configurable, implements sensible defaults,
-and solves both the art direction and resolution switching problems, with a
-little YAML configuration and a simple template tag. It can be configured to
-work with JavaScript libraries such as
+It's easy to throw an image on a webpage and call it a day. Doing justice to your users by serving
+it efficiently on all browsers and screen sizes is tedious and tricky. Tedious, tricky things should be
+automated.
+
+Jekyll Picture Tag is a liquid tag that adds responsive images to your [Jekyll](http://jekyllrb.com)
+static site. It automatically creates resized, reformatted source images, is fully configurable,
+implements sensible defaults, and solves both the art direction and resolution switching problems,
+with a little YAML configuration and a simple template tag. It offers several different output
+formats, and can be configured to work with JavaScript libraries such as
 [LazyLoad](https://github.com/verlok/lazyload).
 
+## Documentation
+
+It's all in the [`docs`](docs/) folder:
+
+* [Installation](docs/installation.md)
+* [Usage](docs/usage.md)
+* [Global settings](docs/global_configuration.md)
+* [Presets](docs/presets.md)
+* [Other notes](docs/notes.md)
+* [Contribute](contributing.md)
+* [Release History](#release-history)
+* [License](LICENSE.txt)
+
 ## Why use Jekyll Picture Tag?
 
-**Performance:** The fastest sites are static sites. If we're not using responsive images we're
-throwing those performance gains away by serving kilobytes of pixels a user will never see.
+**Performance:** The fastest sites are static sites, but when you plonk a 2mb picture of your dog at
+the top of a blog post you're throwing it all away.
 
 **Design:** Your desktop image may not work well on mobile, regardless of its resolution. We often
-want to do more than just resize images for different screen sizes.
+want to do more than just resize images for different screen sizes, we want to crop them or use a
+different image entirely.
 
 **Developer Sanity:** Image downloading starts before the browser has parsed your CSS and
 JavaScript; this gets them on the page *fast*, but it leads to some ridiculously verbose markup.
-Ultimately, to serve responsive images correctly, we must:
+To serve responsive images correctly, we must:
 
--   Generate, name, and organize the required images (formats \* resolutions, for each source image)
--   Inform the browser about the image itself-- format, size, URI, and the screen sizes where it
-    should be used.
--   Inform the browser how large the space for that image on the page will be (which also probably has associated media
-    queries).
+- Generate, name, and organize the required images (formats \* resolutions \* source images)
+- Inform the browser about the image itself-- format, size, URI, and the screen sizes where it
+  should be used.
+- Inform the browser how large the space for that image on the page will be (which also probably
+  has associated media queries).
 
-It's a lot. It's tedious and complicated. Jekyll Picture Tag automates it.
+It's a lot. It's tedious and complicated. Jekyll Picture Tag makes it easy.  
 
 ## Features
 
 * Automatic generation of resized, converted image files.
-* Automatic generation of complex markup in one of several different formats.
+* Automatic generation of complex markup in several different formats.
 * No configuration required, extensive configuration available.
-* Auto-select between `<picture>` or lone `<img>` as necessary.
-* Support for both width based and pixel ratio based srcsets.
-* Webp conversion.
 * `sizes` attribute assistance.
-* named media queries so you don't have to remember them.
-* Optional `<noscript>` tag with a basic fallback image, so you can lazy load without excluding your
-    javascript-impaired users.
 * Optionally, automatically link to the source image. Or manually link to anywhere else, with just a
-    tag parameter!
+  tag parameter!
 
-
-# Documentation
-
-It's mostly in the wiki.
-
-* [Installation](https://github.com/rbuchberger/jekyll-picture-tag/wiki/Installation)
-* [Usage](https://github.com/rbuchberger/jekyll-picture-tag/wiki/Liquid-Tag-Usage)
-* [Global settings](https://github.com/rbuchberger/jekyll-picture-tag/wiki/Global-Configuration)
-* [Presets](https://github.com/rbuchberger/jekyll-picture-tag/wiki/Writing-Presets)
-* [Other notes](https://github.com/rbuchberger/jekyll-picture-tag/wiki/Miscellaneous-notes-and-FAQ)
-* [Contribute](#contribute)
-* [Release History](#release-history)
-* [License](#license)
-
-# Quick start / Demo
+## Quick start / Demo
 
 **All configuration is optional.** Here's the simplest possible use case:
 
@@ -74,6 +68,8 @@ group :jekyll_plugins do
 end
 ```
 
+Run `bundle install`
+
 Put this liquid tag somewhere:
 
 `{% picture test.jpg %}`
@@ -81,21 +77,32 @@ Put this liquid tag somewhere:
 Get this in your generated site:
 
 ```html
-<!-- Line breaks added for readability, the actual markup will not have them. -->
+<!-- Formatted for readability -->
 
 <img src="/generated/test-800-195f7d.jpg"
-  srcset="/generated/test-400-195f7d.jpg 400w,
-          /generated/test-600-195f7d.jpg 600w,
-          /generated/test-800-195f7d.jpg 800w,
-          /generated/test-1000-195f7d.jpg 1000w">
+  srcset="
+    /generated/test-400-195f7d.jpg   400w,
+    /generated/test-600-195f7d.jpg   600w,
+    /generated/test-800-195f7d.jpg   800w,
+    /generated/test-1000-195f7d.jpg 1000w
+    ">
 ```
 
-### Here's a more complete example:
+### Look man, that's cool and all but I just want webp.
 
-With this configuration:
+Create `_data/picture.yml`, add the following:
 
 ```yml
+markup_presets:
+  default:
+    formats: [webp, original]
+```
+
+If you get errors, make sure you have imagemagick installed with a webp delegate.
+
+### Here's a more complex example:
 
+```yml
 # _data/picture.yml
 
 media_presets:
@@ -108,7 +115,6 @@ markup_presets:
     sizes:
       mobile: 80vw
     size: 500px
-
 ```
 
 Write this:
@@ -164,20 +170,19 @@ for image conversions, so it must be installed on your system. There's a very go
 already have it. If you want to build webp images, you will need to install a webp delegate for it
 as well.
 
-# Contribute
-
-Report bugs and feature proposals in the
-[Github issue tracker](https://github.com/robwierzbowski/jekyll-picture-tag/issues).
-
-Pull requests are encouraged. With a few exceptions, this plugin is written to follow the Rubocop
-default settings (except the frozen string literal comment).
-
-If you add a new setting, it is helpful to add a default value (look under `lib/defaults/`) and
-relevant documentation. Don't let that stop you from submitting a pull request, though! Just allow
-modifications and I'll take care of it.
-
-# Release History
-
+## Release History
+
+* 1.7.0 Aug 12, 2019
+  * Add support for setting generated image quality, either generally or specific to given
+    formats.
+  * Add support for spaces and other url-encoded characters in filenames
+  * Documentation restructure - Moved it out of the wiki, into the `docs` folder.
+  * Bugfix: Fallback image width will now be checked against source image width.
+  * Bugfix: Minor fix to nomarkdown wrapper output
+  * link_source will now target the base source image, rather than finding the biggest one.
+  * Remove fastimage dependency, add addressable dependency.
+  * Moderately significant refactoring and code cleanup 
+  * Decent set of tests added
 * 1.6.0 Jul  2, 2019:
   * Missing Preset warning respects `data_dir` setting
   * Add `continue_on_missing` option
@@ -203,14 +208,9 @@ modifications and I'll take care of it.
   * auto-orient images before stripping metadata
 * 1.0.2 Jan 18, 2019: Fix ruby version specification
 * 1.0.1 Jan 13, 2019: Added ruby version checking
-* **1.0.0** Nov 27, 2018: Rewrite from the ground up. See [the migration
-  guide](https://github.com/rbuchberger/jekyll-picture-tag/wiki/Migrating-from-versions-prior-to-1.0).
+* **1.0.0** Nov 27, 2018: Rewrite from the ground up. See the [migration guide](docs/migration.md).
 * 0.2.2 Aug  2, 2013: Bugfixes
 * 0.2.1 Jul 17, 2013: Refactor again, add Liquid parsing.
 * 0.2.0 Jul 14, 2013: Rewrite code base, bring in line with Jekyll Image Tag.
 * 0.1.1 Jul  5, 2013: Quick round of code improvements.
 * 0.1.0 Jul  5, 2013: Initial release.
-
-# License
-
-[BSD-NEW](http://en.wikipedia.org/wiki/BSD_License)