jekyll_picture_tag 1.9.0 → 1.12.0

data/lib/jekyll_picture_tag/output_formats/basic.rb

@@ -6,6 +6,10 @@ module PictureTag
     class Basic
       include ObjectiveElements
 
+      def to_s
+        wrap(base_markup).to_s
+      end
+
       # Used for both the fallback image, and for the complete markup.
       def build_base_img
         img = SingleTag.new 'img'
@@ -23,10 +27,6 @@ module PictureTag
         img
       end
 
-      def to_s
-        wrap(base_markup).to_s
-      end
-
       private
 
       # Handles various wrappers around basic markup
@@ -71,22 +71,30 @@ module PictureTag
 
       # GeneratedImage class, not HTML
       def build_fallback_image
-        fallback = GeneratedImage.new(
+        return fallback_candidate if fallback_candidate.exists?
+
+        image = GeneratedImage.new(
           source_file: PictureTag.source_images.first,
           format: PictureTag.fallback_format,
-          width: PictureTag.fallback_width
+          width: checked_fallback_width,
+          crop: PictureTag.crop,
+          gravity: PictureTag.gravity
         )
 
-        return fallback if fallback.exists?
+        image.generate
 
-        build_new_fallback_image
+        image
       end
 
-      def build_new_fallback_image
-        GeneratedImage.new(
+      # It's only a candidate, because we don't know if the fallback width
+      # setting is larger than the source file.
+      def fallback_candidate
+        @fallback_candidate ||= GeneratedImage.new(
           source_file: PictureTag.source_images.first,
           format: PictureTag.fallback_format,
-          width: checked_fallback_width
+          width: PictureTag.fallback_width,
+          crop: PictureTag.crop,
+          gravity: PictureTag.gravity
         )
       end
 
@@ -107,15 +115,26 @@ module PictureTag
         content.add_parent anchor
       end
 
+      def source
+        PictureTag.source_images.first
+      end
+
+      def source_width
+        if PictureTag.crop
+          fallback_candidate.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/img.rb

@@ -3,6 +3,8 @@ module PictureTag
     # Represents a bare <img> tag with a srcset attribute.
     # Used when <picture> is unnecessary.
     class Img < Basic
+      private
+
       def srcset
         @srcset ||= build_srcset(
           PictureTag.source_images.first, PictureTag.formats.first
@@ -17,8 +19,17 @@ module PictureTag
 
         img.attributes << PictureTag.html_attributes['parent']
 
+        add_dimensions(img, srcset)
+
         img
       end
+
+      def add_dimensions(img, srcset)
+        return unless PictureTag.preset['dimension_attributes']
+
+        img.width = srcset.width_attribute
+        img.height = srcset.height_attribute
+      end
     end
   end
 end

data/lib/jekyll_picture_tag/output_formats/picture.rb

@@ -3,7 +3,13 @@ module PictureTag
     # Represents a <picture> tag, enclosing at least 2 <source> tags and an
     # <img> tag.
     class Picture < Basic
+      private
+
       def srcsets
+        @srcsets ||= build_srcsets
+      end
+
+      def build_srcsets
         formats = PictureTag.formats
         # Source images are provided in reverse order and must be flipped:
         images = PictureTag.source_images.reverse
@@ -37,6 +43,22 @@ module PictureTag
         source
       end
 
+      def build_base_img
+        img = super
+
+        # Only add source dimensions if there is a single source image.
+        # Currently you can't use both art direction and intrinsic image sizes.
+        if PictureTag.preset['dimension_attributes'] &&
+           PictureTag.source_images.length == 1
+          img.attributes << {
+            width: srcsets.first.width_attribute,
+            height: srcsets.first.height_attribute
+          }
+        end
+
+        img
+      end
+
       def base_markup
         picture = DoubleTag.new(
           'picture',

data/lib/jekyll_picture_tag/router.rb

@@ -9,6 +9,7 @@ module PictureTag
   # gets big, I'll refactor.
   module Router
     attr_accessor :instructions, :context
+
     # Context forwarding
 
     # Global site data
@@ -47,6 +48,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

data/lib/jekyll_picture_tag/source_image.rb

@@ -3,84 +3,100 @@ module PictureTag
   # advantage by storing expensive file reads and writes in instance variables,
   # to be reused by many different generated images.
   class SourceImage
-    attr_reader :name, :shortname, :missing, :media_preset
-    attr_accessor :digest_guess
+    attr_reader :shortname, :missing, :media_preset
+
     include MiniMagick
 
     def initialize(relative_filename, media_preset = nil)
+      # /home/dave/my_blog/assets/images/somefolder/myimage.jpg
+      #                                  ^^^^^^^^^^^^^^^^^^^^^^
       @shortname = relative_filename
-      @name = grab_file relative_filename
       @media_preset = media_preset
+
+      @missing = missing?
+      check_cache
+    end
+
+    def digest
+      @digest ||= cache[:digest] || ''
     end
 
     def width
-      @width ||= if @missing
-                   999_999
-                 else
-                   image.width
-                 end
+      @width ||= cache[:width] || 999_999
     end
 
-    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
+    def height
+      @height ||= cache[:height] || 999_999
     end
 
-    # Includes path relative to default source folder and the original filename.
+    # /home/dave/my_blog/assets/images/somefolder/myimage.jpg
+    # ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    def name
+      @name ||= File.join(PictureTag.source_dir, @shortname)
+    end
+
+    # /home/dave/my_blog/assets/images/somefolder/myimage.jpg
+    #                                  ^^^^^^^^^^^^^^^^^^
     def base_name
       @shortname.delete_suffix File.extname(@shortname)
     end
 
-    # File exention
+    # /home/dave/my_blog/assets/images/somefolder/myimage.jpg
+    #                                                     ^^^
     def ext
-      # [1..-1] will strip the leading period.
-      @ext ||= File.extname(@name)[1..-1].downcase
+      @ext ||= File.extname(name)[1..-1].downcase
     end
 
     private
 
-    def image
-      @image ||= Image.open(@name)
+    def cache
+      @cache ||= Cache::Source.new(@shortname)
     end
 
-    # Turn a relative filename into an absolute one, and make sure it exists.
-    def grab_file(source_file)
-      source_name = File.join(PictureTag.source_dir, source_file)
-
-      if File.exist? source_name
-        @missing = false
+    def missing?
+      if File.exist? name
+        false
 
       elsif PictureTag.continue_on_missing?
-        @missing = true
-        Utils.warning missing_image_warning(source_name)
+        Utils.warning(missing_image_warning)
+        true
 
       else
-        raise ArgumentError, missing_image_error(source_name)
+        raise ArgumentError, missing_image_error
       end
+    end
 
-      source_name
+    def check_cache
+      return if @missing
+      return if cache[:digest] && PictureTag.fast_build?
+
+      update_cache if source_digest != cache[:digest]
     end
 
-    def missing_image_warning(source_name)
-      <<~HEREDOC
-        Could not find #{source_name}. Your site will have broken images in it.
-        Continuing.
-      HEREDOC
+    def update_cache
+      cache[:digest] = source_digest
+      cache[:width] = image.width
+      cache[:height] = image.height
+
+      cache.write
+    end
+
+    def image
+      @image ||= Image.open(name)
+    end
+
+    def source_digest
+      @source_digest ||= Digest::MD5.hexdigest(File.read(name))
+    end
+
+    def missing_image_warning
+      "JPT Could not find #{name}. Your site will have broken images. Continuing."
     end
 
-    def missing_image_error(source_name)
+    def missing_image_error
       <<~HEREDOC
-        Jekyll Picture Tag could not find #{source_name}. You can force the
-        build to continue anyway by setting "picture: ignore_missing_images:
-        true" in "_config.yml". This setting can also accept a jekyll build
-        environment, or an array of environments.
+        Could not find #{name}. You can force the build to continue anyway by
+        setting "picture: ignore_missing_images: true" in "_config.yml".
       HEREDOC
     end
   end

data/lib/jekyll_picture_tag/srcsets/basic.rb

@@ -23,6 +23,7 @@ module PictureTag
         @format ||= files.first.format
       end
 
+      # GeneratedImage class
       def files
         @files ||= build_files
       end
@@ -51,6 +52,14 @@ module PictureTag
         "(#{PictureTag.media_presets[@media]})"
       end
 
+      def width_attribute
+        files.first.source_width.to_s
+      end
+
+      def height_attribute
+        files.first.source_height.to_s
+      end
+
       private
 
       def build_files
@@ -65,26 +74,37 @@ module PictureTag
       end
 
       def checked_targets
-        if target_files.any? { |f| f.width > @source_image.width }
+        if target_files.any? { |f| f.width > source_width }
 
           small_source_warn
 
-          files = target_files.reject { |f| f.width >= @source_image.width }
-          files.push(generate_file(@source_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.source_width
+                          else
+                            @source_image.width
+                          end
+      end
+
       def target_files
         @target_files ||= widths.collect { |w| generate_file(w) }
       end
 
       def small_source_warn
         Utils.warning(
-          " #{@source_image.shortname} is #{@source_image.width}px wide,"\
-          " smaller than at least one size in the set #{widths}. Will not"\
-          ' enlarge.'
+          <<~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
 
@@ -92,7 +112,9 @@ module PictureTag
         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/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.9.0'.freeze
+  VERSION = '1.12.0'.freeze
 end

data/readme.md

@@ -1,21 +1,20 @@
 # 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 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.
+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.
 
 ## Why use Responsive Images?
 
-**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.  Responsive images allow you to keep your site
-fast, without compromising image quality.
+**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.
 
 **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
@@ -24,15 +23,40 @@ different image entirely.
 ## Why use Jekyll Picture Tag?
 
 **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. Jekyll Picture Tag is your
-responsive images minion - give it simple instructions and it'll handle the rest. 
+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. 
 
 ## Features
 
-* Automatic generation and organization of resized image files in basically any format(s).
-* Automatic generation of complex markup in several different formats.
-* No configuration required, extensive configuration available.
+* 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.
 
 ## Documentation:
 
 https://rbuchberger.github.io/jekyll_picture_tag/
+
+## Changelog:
+
+https://rbuchberger.github.io/jekyll_picture_tag/releases
+
+Latest versions: 
+
+* 1.10.1 July 2, 2020
+  * Bugfix for erroneously regenerated images
+* 1.10.2 July 6, 2020
+  * Bugfix for fallback image files not actually getting generated
+* 1.11.0 July 27, 2020
+  * **Width and height attribute support!** Begone, page reflow.
+  * Cache image information between builds
+  * Change image naming format. This update will trigger all images to be regenerated, so you may
+    want to delete your generated images folder beforehand.
+
+## Help Wanted
+
+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.