jekyll_picture_tag 1.7.0 → 1.10.1

data/lib/jekyll_picture_tag/output_formats/basic.rb

@@ -69,12 +69,30 @@ module PictureTag
         element.media = srcset.media_attribute if srcset.media
       end
 
-      # File, not HTML
+      # GeneratedImage class, not HTML
       def build_fallback_image
+        return fallback_candidate if fallback_candidate.exists?
+
+        build_new_fallback_image
+      end
+
+      def fallback_candidate
+        @fallback_candidate ||= GeneratedImage.new(
+          source_file: PictureTag.source_images.first,
+          format: PictureTag.fallback_format,
+          width: PictureTag.fallback_width,
+          crop: PictureTag.crop,
+          gravity: PictureTag.gravity
+        )
+      end
+
+      def build_new_fallback_image
         GeneratedImage.new(
           source_file: PictureTag.source_images.first,
           format: PictureTag.fallback_format,
-          width: checked_fallback_width
+          width: checked_fallback_width,
+          crop: PictureTag.crop,
+          gravity: PictureTag.gravity
         )
       end
 
@@ -95,15 +113,26 @@ module PictureTag
         content.add_parent anchor
       end
 
+      def source
+        PictureTag.source_images.first
+      end
+
+      def source_width
+        if PictureTag.crop
+          fallback_candidate.cropped_source_width
+        else
+          source.width
+        end
+      end
+
       def checked_fallback_width
-        source = PictureTag.source_images.first
         target = PictureTag.fallback_width
 
-        if target > source.width
+        if target > source_width
           Utils.warning "#{source.shortname} is smaller than the " \
-            "requested fallback width of #{target}px. Using #{source.width}" \
+            "requested fallback width of #{target}px. Using #{source_width}" \
             ' px instead.'
-          source.width
+          source_width
         else
           target
         end

data/lib/jekyll_picture_tag/output_formats/data_attributes.rb

@@ -18,7 +18,10 @@ module PictureTag
       end
 
       def add_sizes(element, srcset)
-        element.attributes << { 'data-sizes' => srcset.sizes } if srcset.sizes
+        return unless srcset.sizes
+
+        attribute = PictureTag.preset['data_sizes'] ? 'data-sizes' : 'sizes'
+        element.attributes << { attribute => srcset.sizes }
       end
 
       def build_noscript(base_content)

data/lib/jekyll_picture_tag/router.rb

@@ -47,6 +47,14 @@ module PictureTag
       @instructions.source_images
     end
 
+    def crop(media = nil)
+      @instructions.crop(media)
+    end
+
+    def gravity(media = nil)
+      @instructions.gravity(media)
+    end
+
     # Config Forwarding
 
     def source_dir
@@ -69,6 +77,14 @@ module PictureTag
       config.pconfig
     end
 
+    def disabled?
+      config.disabled?
+    end
+
+    def fast_build?
+      config.fast_build?
+    end
+
     # Preset forwarding
 
     def widths(media)

data/lib/jekyll_picture_tag/source_image.rb

@@ -4,6 +4,7 @@ module PictureTag
   # to be reused by many different generated images.
   class SourceImage
     attr_reader :name, :shortname, :missing, :media_preset
+    attr_accessor :digest_guess
     include MiniMagick
 
     def initialize(relative_filename, media_preset = nil)
@@ -23,12 +24,16 @@ module PictureTag
     def digest
       @digest ||= if @missing
                     'x' * 6
+                  elsif PictureTag.fast_build? && @digest_guess
+                    # Digest guess will be handed off to this class by the first
+                    # generated image which needs it (via attr_accessor).
+                    @digest_guess
                   else
                     Digest::MD5.hexdigest(File.read(@name))[0..5]
                   end
     end
 
-    # Includes path relative to default sorce folder, and the original filename.
+    # Includes path relative to default source folder and the original filename.
     def base_name
       @shortname.delete_suffix File.extname(@shortname)
     end

data/lib/jekyll_picture_tag/srcsets/basic.rb

@@ -24,7 +24,7 @@ module PictureTag
       end
 
       def files
-        @files ||= widths.collect { |w| generate_file(w) }
+        @files ||= build_files
       end
 
       def to_a
@@ -46,15 +46,6 @@ module PictureTag
         nil
       end
 
-      # Check our source image size vs requested sizes
-      def check_widths(targets)
-        if targets.any? { |t| t > @source_image.width }
-          handle_small_source(targets, @source_image.width)
-        else
-          targets
-        end
-      end
-
       # Generates an HTML attribute
       def media_attribute
         "(#{PictureTag.media_presets[@media]})"
@@ -62,24 +53,59 @@ module PictureTag
 
       private
 
-      def handle_small_source(targets, image_width)
-        Utils.warning(
-          " #{@source_image.shortname} is #{image_width}px wide, smaller than" \
-          " at least one size in the set #{targets}. Will not enlarge."
-        )
+      def build_files
+        # By 'files', we mean the GeneratedImage class.
+        return target_files if target_files.all?(&:exists?)
+
+        # This triggers GeneratedImage to actually build an image file.
+        files = checked_targets
+        files.each(&:generate)
+
+        files
+      end
+
+      def checked_targets
+        if target_files.any? { |f| f.width > source_width }
 
-        small_targets = targets.dup.delete_if { |t| t >= image_width }
+          small_source_warn
 
-        small_targets.push image_width
+          files = target_files.reject { |f| f.width >= source_width }
+          files.push(generate_file(source_width))
+        end
+
+        files || target_files
+      end
+
+      def source_width
+        @source_width ||= if PictureTag.crop(@media)
+                            target_files.first.cropped_source_width
+                          else
+                            @source_image.width
+                          end
+      end
 
-        small_targets
+      def target_files
+        @target_files ||= widths.collect { |w| generate_file(w) }
+      end
+
+      def small_source_warn
+        Utils.warning(
+          <<~HEREDOC
+            #{@source_image.shortname}
+            is #{source_width}px wide (after cropping, if applicable),
+            smaller than at least one size in the set #{widths}.
+            Will not enlarge.
+          HEREDOC
+        )
       end
 
       def generate_file(width)
         GeneratedImage.new(
           source_file: @source_image,
           width: width,
-          format: @input_format
+          format: @input_format,
+          crop: PictureTag.crop(@media),
+          gravity: PictureTag.gravity(@media)
         )
       end
     end

data/lib/jekyll_picture_tag/srcsets/pixel_ratio.rb

@@ -6,11 +6,9 @@ module PictureTag
       private
 
       def widths
-        target = PictureTag.preset['pixel_ratios'].collect do |p|
+        PictureTag.preset['pixel_ratios'].collect do |p|
           p * PictureTag.preset['base_width']
         end
-
-        check_widths target
       end
 
       def build_srcset_entry(file)

data/lib/jekyll_picture_tag/srcsets/width.rb

@@ -22,7 +22,7 @@ module PictureTag
       private
 
       def widths
-        check_widths PictureTag.widths(@media)
+        PictureTag.widths(@media)
       end
 
       def build_srcset_entry(file)

data/lib/jekyll_picture_tag/utils.rb

@@ -2,6 +2,24 @@ module PictureTag
   # This is a little module to hold logic that doesn't fit other places. If it
   # starts getting big, refactor.
   module Utils
+    # These are valid ImageMagick gravity arguments (relevant to our use
+    # case):
+    GRAVITIES =
+      %w[center
+         north
+         northeast
+         east
+         southeast
+         south
+         southwest
+         west
+         northwest].freeze
+
+    # This is an attempt to recognize valid imagemagick geometry arguments
+    # with regex. It only tries to match values which don't preserve aspect
+    # ratio, as they're the ones people might actually need here.
+    GEOMETRY_REGEX = /\A\d*%?[x:]?\d*[%!]?([+-]\d+){,2}\Z/i.freeze
+
     class << self
       # Configure Jekyll to keep our generated files
       def keep_files

data/lib/jekyll_picture_tag/version.rb

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

data/readme.md

@@ -1,216 +1,59 @@
 # Jekyll Picture Tag
 
-**Easy responsive images for Jekyll.**
+**Responsive Images done correctly.**
 
-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.
+It's simple to throw a photo on a page and call it a day, but doing justice to users on all
+different browsers and devices 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).
+Jekyll Picture Tag automatically builds cropped, resized, and reformatted images, builds several
+kinds of markup, offers extensive configuration while requiring none, and solves both the art
+direction and resolution switching problems with a little YAML configuration and a simple template
+tag.
 
-## Documentation
+## Why use Responsive Images?
 
-It's all in the [`docs`](docs/) folder:
+**Performance:** The fastest sites are static sites, but if you plonk a 2mb picture of your dog at
+the top of a blog post you throw it all away. Responsive images allow you to keep your site fast,
+without compromising image quality.
 
-* [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)
+**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, we want to crop them or use a
+different image entirely.
 
 ## Why use Jekyll Picture Tag?
 
-**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.
+**Developer Sanity:** If you want to serve multiple images in multiple formats and resolutions, you
+have a litany of markup to write and a big pile of images to generate and organize. Jekyll Picture
+Tag is your responsive images minion - give it simple instructions and it'll handle the rest. 
 
-**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, we want to crop them or use a
-different image entirely.
+## Features
 
-**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.
-To serve responsive images correctly, we must:
+* Generate piles of cropped, resized, and converted image files.
+* Generate corresponding markup in several different formats.
+* Configure it easily, or not at all.
+* Make Lighthouse happy.
 
-- 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).
+## Documentation:
 
-It's a lot. It's tedious and complicated. Jekyll Picture Tag makes it easy.  
+https://rbuchberger.github.io/jekyll_picture_tag/
 
-## Features
+## Changelog:
+
+https://rbuchberger.github.io/jekyll_picture_tag/releases
+
+Latest versions: 
+
+* 1.10.0 May 11, 2020
+  * **Image Cropping support!** access the power of ImageMagick's `crop` function.
+  * Don't issue a warning when `default` preset is not found.
+  * Documentation improvements
+* 1.10.1 July 2, 2020
+  * Bugfix for erroneously regenerated images
+
+## Help Wanted
 
-* Automatic generation of resized, converted image files.
-* Automatic generation of complex markup in several different formats.
-* No configuration required, extensive configuration available.
-* `sizes` attribute assistance.
-* Optionally, automatically link to the source image. Or manually link to anywhere else, with just a
-  tag parameter!
-
-## Quick start / Demo
-
-**All configuration is optional.** Here's the simplest possible use case:
-
-Add j_p_t to your gemfile:
-
-```ruby
-group :jekyll_plugins do
-  gem 'jekyll_picture_tag'
-end
-```
-
-Run `bundle install`
-
-Put this liquid tag somewhere:
-
-`{% picture test.jpg %}`
-
-Get this in your generated site:
-
-```html
-<!-- 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
-    ">
-```
-
-### Look man, that's cool and all but I just want webp.
-
-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:
-  mobile: 'max-width: 600px'
-
-markup_presets:
-  default:
-    widths: [600, 900, 1200]
-    formats: [webp, original]
-    sizes:
-      mobile: 80vw
-    size: 500px
-```
-
-Write this:
-
-`{% picture test.jpg mobile: test2.jpg --alt Alternate Text %}`
-
-Get this:
-
-```html
-<!-- Formatted for readability -->
-
-<picture>
-  <source
-    sizes="(max-width: 600px) 80vw, 600px"
-    media="(max-width: 600px)"
-    srcset="
-      /generated/test2-600-21bb6f.webp   600w,
-      /generated/test2-900-21bb6f.webp   900w,
-      /generated/test2-1200-21bb6f.webp 1200w
-    "
-    type="image/webp">
-  <source
-    sizes="(max-width: 600px) 80vw, 600px"
-    srcset="
-      /generated/test-600-195f7d.webp   600w,
-      /generated/test-900-195f7d.webp   900w,
-      /generated/test-1200-195f7d.webp 1200w
-    "
-    type="image/webp">
-  <source
-    sizes="(max-width: 600px) 80vw, 600px"
-    media="(max-width: 600px)"
-    srcset="
-      /generated/test2-600-21bb6f.jpg   600w,
-      /generated/test2-900-21bb6f.jpg   900w,
-      /generated/test2-1200-21bb6f.jpg 1200w
-    "
-    type="image/jpeg">
-  <source
-    sizes="(max-width: 600px) 80vw, 600px"
-    srcset="
-      /generated/test-600-195f7d.jpg   600w,
-      /generated/test-900-195f7d.jpg   900w,
-      /generated/test-1200-195f7d.jpg 1200w
-    "
-    type="image/jpeg">
-  <img src="/generated/test-800-195f7d.jpg" alt="Alternate Text">
-</picture>
-```
-
-Jekyll Picture Tag ultimately relies on [ImageMagick](https://www.imagemagick.org/script/index.php)
-for image conversions, so it must be installed on your system. There's a very good chance you
-already have it. If you want to build webp images, you will need to install a webp delegate for it
-as well.
-
-## 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
-* 1.5.0 Jun 26, 2019: 
-  * better `{::nomarkdown}` necessity detection
-  * allow user to override `{::nomarkdown}` autodetection
-* 1.4.0 Jun 26, 2019:
-  * Rename gem from `jekyll-picture-tag` to `jekyll_picture_tag`, allowing us to use rubygems again.
-  * Add new output format: `naked_srcset`.
-* 1.3.1 Jun 21, 2019: Bugfix
-* 1.3.0 Jun  7, 2019:
-  * Initial compatibility with Jekyll 4.0
-  * bugfixes
-  * change to generated image naming-- The first build after this update will be longer, and you
-    might want to clear out your generated images.
-* 1.2.0 Feb  9, 2019:
-  * Add nomarkdown fix
-  * noscript option
-  * relative url option
-  * anchor tag wrappers
-* 1.1.0 Jan 22, 2019:
-  * Add direct_url markup format,
-  * 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](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.
+Writing code is only part of the job; often the harder part is knowing what needs to be changed. Any
+and all feedback is greatly appreciated, especially in regards to documentation. What are your pain
+points? See the [contributing
+guidelines](https://rbuchberger.github.io/jekyll_picture_tag/contributing), or the
+[issues](https://github.com/rbuchberger/jekyll_picture_tag/issues) page for more.