jekyll_picture_tag 1.2.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b7fc61d571c945d859aac14c2a85a9b80752c3642a314456c89516ae7c9632d4
-  data.tar.gz: 27f70f0b0a73101606ef098a4aceaf8183356607b9d3145c5bb514c9ea9c92cb
+  metadata.gz: 92f25151354c1e1d62aa3b9097316538012dfa84bcd91bad49af2349adc25b12
+  data.tar.gz: b80c014044abfb092c8949faf674281d57f130384ca2c37b0b17715a445048eb
 SHA512:
-  metadata.gz: b008e590e962f46f83de4506b9c0a1da77f887b89987442ef9af9756987dd1bbaaa9964703ed2da3245496c02ca0fa274014a788bfd623aa719e6d098a665d4b
-  data.tar.gz: 795bf04f0b5aa155f6386bb41f33d12643699ff0065cc88f80273589179234d1ba26b801aa12da6028b03283365309ea4449038386820eaa3b1f0a634d023dac
+  metadata.gz: b16a09afffe03178211c01840eb3767f0fc7c21b597f1148dff9d6f35fedefa6830288b23c63bd28bc75a67683ad3d8d633c2c3ce44af2c5916f7cee16722685
+  data.tar.gz: 45875378703e55d08f11f1d0a102fdfe9cae09c75a6aae8edd16d83277b8cccb4d72e3307c02a592a66481a7f39f5e8f3c078e97dbf57013dbc1d968d64a40e3

data/.gitignore

@@ -9,3 +9,4 @@
 /tmp/
 .idea
 jekyll-picture-tag.iml
+*.gem

data/Rakefile

@@ -1 +1,5 @@
-require 'bundler/gem_tasks'
+# Since we have two gemfiles, we can't just require 'bundler/gem_tasks'. We have
+# to explicitly set its name and install them:
+
+require 'bundler/gem_helper'
+Bundler::GemHelper.install_tasks name: 'jekyll_picture_tag'

data/jekyll-picture-tag.gemspec

@@ -0,0 +1,44 @@
+lib = File.expand_path('lib', __dir__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'jekyll_picture_tag/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'jekyll-picture-tag'
+  spec.version       = PictureTag::VERSION
+  spec.authors       = ['Robert Wierzbowski', 'Brendan Tobolaski',
+                        'Robert Buchberger']
+  spec.email         = ['robert@buchberger.cc']
+
+  spec.summary       = 'Easy responsive images for Jekyll.'
+  spec.description   = <<~HEREDOC
+     ____                                _           _
+    |  _ \  ___ _ __  _ __ ___  ___ __ _| |_ ___  __| |
+    | | | |/ _ \ '_ \| '__/ _ \/ __/ _` | __/ _ \/ _` |
+    | |_| |  __/ |_) | | |  __/ (_| (_| | ||  __/ (_| |
+    |____/ \___| .__/|_|  \___|\___\__,_|\__\___|\__,_|
+               |_|
+
+    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.license       = 'BSD-3-Clause'
+  spec.require_paths = ['lib']
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+
+  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'
+end

data/jekyll_picture_tag.gemspec

@@ -7,17 +7,17 @@ Gem::Specification.new do |spec|
   spec.version       = PictureTag::VERSION
   spec.authors       = ['Robert Wierzbowski', 'Brendan Tobolaski',
                         'Robert Buchberger']
-  spec.email         = ['hello@robwierzbowski.com', 'brendan@tobolaski.com',
-                        'robert@buchberger.cc']
+  spec.email         = ['robert@buchberger.cc']
 
   spec.summary       = 'Easy responsive images for Jekyll.'
   spec.description   = <<-HEREDOC
-    Jekyll Picture Tag is a liquid tag that adds responsive images to your Jekyll static site. It follows the picture
-    element pattern, and polyfills older browsers with Picturefill. Jekyll Picture Tag automatically creates resized
-    source images, is fully configurable, and covers all use cases — including art direction and resolution switching —
-    with a little YAML configuration and a simple template tag.
+    Jekyll Picture Tag is a liquid tag that adds responsive images to your
+    Jekyll static site.Jekyll Picture Tag automatically creates resized source
+    images, is fully configurable, and covers all use cases — including art
+    direction and resolution switching — with a little YAML configuration and a
+    simple template tag.
   HEREDOC
-  spec.homepage      = 'https://github.com/robwierzbowski/jekyll-picture-tag'
+  spec.homepage      = 'https://github.com/rbuchberger/jekyll-picture-tag'
   spec.license       = 'BSD-3-Clause'
   spec.require_paths = ['lib']
 
@@ -32,8 +32,9 @@ Gem::Specification.new do |spec|
   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', '< 4'
+  spec.add_runtime_dependency 'jekyll', '< 5'
 end

data/lib/jekyll-picture-tag.rb

@@ -0,0 +1,23 @@
+puts '-' * 80
+
+puts <<~HEREDOC
+  \033[31;1;4m
+  Important message from Jekyll Picture Tag:
+  \033[0m
+  Good news! We're back up on rubygems.
+  Bad news. You need to update your Gemfile. Remove the following line:
+
+  gem 'jekyll-picture-tag', git: 'https://github.com/robwierzbowski/jekyll-picture-tag/'
+
+  and replace it with:
+
+  gem 'jekyll_picture_tag', '~> 1.3'
+
+  Sorry about that. For an explanation, see issue #120:
+  https://github.com/rbuchberger/jekyll-picture-tag/issues/120
+
+HEREDOC
+
+puts '-' * 80
+
+require_relative 'jekyll_picture_tag'

data/lib/jekyll_picture_tag/defaults/global.yml

@@ -4,6 +4,7 @@ picture:
   output: generated
   suppress_warnings: false
   relative_url: true
+  cdn_environments: ['production']
   nomarkdown: true
 
 url: ''

data/lib/jekyll_picture_tag/generated_image.rb

@@ -6,16 +6,15 @@ class GeneratedImage
 
   def initialize(source_file:, width:, format:)
     @source = source_file
+    @width  = width
     @format = format
 
-    @size = build_size(width)
-
     generate_image unless File.exist? absolute_filename
   end
 
   def name
     name = @source.base_name
-    name << "-#{@size[:width]}by#{@size[:height]}-"
+    name << "-#{@width}-"
     name << @source.digest
     name << '.' + @format
   end
@@ -25,28 +24,17 @@ class GeneratedImage
   end
 
   def width
-    @size[:width]
+    @width
   end
 
   private
 
-  def build_size(width)
-    if width < @source.width
-      {
-        width: width,
-        height: (width / @source.aspect_ratio).round
-      }
-    else
-      @source.size
-    end
-  end
-
   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 "#{@size[:width]}x#{@size[:height]}^"
+      i.resize "#{@width}x"
       i.auto_orient
       i.strip
     end
@@ -56,6 +44,8 @@ class GeneratedImage
     check_dest_dir
 
     image.write absolute_filename
+
+    FileUtils.chmod(0644, absolute_filename)
   end
 
   # Make sure destination directory exists

data/lib/jekyll_picture_tag/instructions/configuration.rb

@@ -11,6 +11,13 @@ module PictureTag
         @content[key]
       end
 
+      # Digs into jekyll context, returns current environment
+      def jekyll_env
+        # It would be really great if the jekyll devs actually documented
+        # the context object. 
+        PictureTag.context.environments.first['jekyll']['environment']
+      end
+
       # Site.source is the master jekyll source directory
       # Source dir is the jekyll-picture-tag source directory.
       def source_dir
@@ -24,12 +31,18 @@ module PictureTag
         File.join PictureTag.site.dest, self['picture']['output']
       end
 
-      # Takes our config into account. Generated images, not source
+      # Generated images, not source images.
+      # https://example.com/my-base-path/assets/generated-images/image.jpg
+      # ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+      # |     domain       |  baseurl   |    j-p-t output dir   | filename
       def build_url(filename)
         File.join url_prefix, self['picture']['output'], filename
       end
 
       # For linking source images
+      # https://example.com/my-base-path/assets/source-images/image.jpg
+      # ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+      # |     domain       |  baseurl   |   j-p-t source dir | filename
       def build_source_url(filename)
         File.join url_prefix, self['picture']['source'], filename
       end
@@ -68,15 +81,37 @@ module PictureTag
         end
       end
 
+      # Juuust complicated enough to extract to its own function.
+      def cdn?
+        self['picture']['cdn_url'] &&
+          self['picture']['cdn_environments'].include?( jekyll_env )
+      end
+
+      # https://example.com/my-base-path/assets/generated-images/image.jpg
+      # ^^^^^^^^^^^^^^^^^^^^
+      # |     domain       |  baseurl   |    j-p-t output dir   | filename
+      def domain
+        if cdn? 
+          self['picture']['cdn_url']
+        elsif self['picture']['relative_url']
+          ''
+        else
+          self['url']
+        end
+      end
+
       # https://example.com/my-base-path/assets/generated-images/image.jpg
-      # ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-      # |     site url     | site path  |    j-p-t dest dir     |
+      # ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+      # |     domain       |  baseurl   |    j-p-t output dir   | filename
       def url_prefix
-        File.join(
-          self['picture']['relative_url'] ? '' : PictureTag.config['url'],
-          PictureTag.config['baseurl'],
-        )
+        # We use file.join because the ruby url methods don't like relative
+        # urls.
+          File.join(
+            domain,
+            self['baseurl'],
+          )
       end
+
     end
   end
 end

data/lib/jekyll_picture_tag/instructions/html_attributes.rb

@@ -19,7 +19,7 @@ module PictureTag
       private
 
       def load_preset
-        PictureTag.preset['attributes'] || {}
+        PictureTag.preset['attributes'].dup || {}
       end
 
       # Syntax this function processes:

data/lib/jekyll_picture_tag/output_formats.rb

@@ -7,3 +7,4 @@ require_relative 'output_formats/data_auto'
 require_relative 'output_formats/data_picture'
 require_relative 'output_formats/data_img'
 require_relative 'output_formats/direct_url'
+require_relative 'output_formats/naked_srcset'

data/lib/jekyll_picture_tag/output_formats/basics.rb

@@ -37,6 +37,7 @@ module PictureTag
         markup
       end
 
+      # Media is the media query associated with the desired source image.
       def build_srcset(media, format)
         if PictureTag.preset['pixel_ratios']
           build_pixel_ratio_srcset(media, format)

data/lib/jekyll_picture_tag/output_formats/naked_srcset.rb

@@ -0,0 +1,12 @@
+module PictureTag
+  module OutputFormats
+    # Returns only a srcset attribute, for more custom or complicated markup.
+    class NakedSrcset
+      include Basics
+
+      def to_s
+        build_srcset(nil, PictureTag.preset['formats'].first).to_s
+      end
+    end
+  end
+end

data/lib/jekyll_picture_tag/output_formats/readme.md

@@ -0,0 +1,48 @@
+# Writing Output Formats
+
+
+## Naming and Instantiating
+
+Names from the configuration wiAn output format is instantiated will be
+converted from snake case to title case (I'm not sure what it's called.) And
+instantiated. 
+
+Example:
+
+In `_data/picture.yml`: `markup: example_format` will cause the plugin to use
+an instance of `ExampleFormat` (with no arguments.)
+
+You'll need to add an appropriate `require_relative` statement to
+`../output_formats.rb`
+
+## Input
+
+When instantiated, your new class doesn't get any arguments. You can find
+information by calling class methods on PictureTag. I'm no computer scientist,
+so if this is a terrible way to do things I'd love to hear all about it. I did
+it this way because information flow was getting arduous; I was passing a lot
+of information to classes which only needed it to pass on to classes they
+instantiate.
+
+`PictureTag.source_images` returns a hash of the source images provided in the
+liquid tag. This relies on 2 properties of ruby hashes: They maintain their
+order, and `nil` is a perfectly good key. The first image (unqualified) is
+stored under `PictureTag.source_images[nil]`, and the rest of the keys are
+media queries named in `_data/picture.yml`.
+
+There's a lot of information available, dig around in `../instructions.rb`. Output formats should only consume this information, never modify it.
+
+## Producing output
+
+The instance of your new class should implement the `to_s` method, which
+returns the desired markup. In the course of generating this markup, it should
+also ensure that the necessary images are generated as well.
+
+When you generate one of the srcsets prodvided under `../srcsets/`, it will
+both provide an appropriate html attribute (only the part inside the quotes)
+and generate the respective images.
+
+## Basics module
+
+`basics.rb` is a module which includes a few methods to do things common to
+most/all output formats.

data/lib/jekyll_picture_tag/srcsets/basics.rb

@@ -9,6 +9,7 @@ module PictureTag
     #   pixels.
     module Basics
       require 'fastimage'
+      require 'mime-types'
       attr_reader :media, :source_image
 
       def initialize(media:, format:)
@@ -27,7 +28,7 @@ module PictureTag
       # Allows us to add a type attribute to whichever element contains this
       # srcset.
       def mime_type
-        mime_types[@format]
+        MIME::Types.type_for(@format).first.to_s
       end
 
       # Some srcsets have them, for those that don't return nil.
@@ -72,17 +73,6 @@ module PictureTag
         )
       end
 
-      # Hardcoding these isn't ideal, but I'm not pulling in a new dependency
-      # for 9 lines of easy code.
-      def mime_types
-        {
-          'gif'  => 'image/gif',
-          'jpg'  => 'image/jpeg',
-          'jpeg' => 'image/jpeg',
-          'png'  => 'image/png',
-          'webp' => 'image/webp'
-        }
-      end
     end
   end
 end

data/lib/jekyll_picture_tag/version.rb

@@ -1,3 +1,3 @@
 module PictureTag
-  VERSION = '1.2.0'.freeze
+  VERSION = '1.4.0'.freeze
 end

data/readme.md

@@ -10,7 +10,7 @@ Jekyll Picture Tag is a liquid tag that adds responsive images to your
 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 
+work with JavaScript libraries such as
 [LazyLoad](https://github.com/verlok/lazyload).
 
 ## Why use Jekyll Picture Tag?
@@ -23,7 +23,7 @@ want to do more than just resize images for different screen sizes.
 
 **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: 
+Ultimately, 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
@@ -48,22 +48,16 @@ It's a lot. It's tedious and complicated. Jekyll Picture Tag automates it.
 * Optionally, automatically link to the source image. Or manually link to anywhere else, with just a
     tag parameter!
 
-# Required Knowledge
 
-Jekyll Picture tag is basically a programmatic implementation of the [MDN Responsive Images
-guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
-If you don't know the difference between resolution switching and art direction, stop now and read it
-in detail. Ideally, play around with a basic HTML file, a few test images, and a few different
-browser widths until you understand it.
+# Documentation
 
-# Table of Contents
+It's mostly in the wiki.
 
-* [Installation](#installation)
-* [Usage](#usage)
-* [Configuration](#configuration)
-    * [Global](#global-configuration)
-    * [Presets](#preset-configuration)
-* [Other notes](#miscellaneous-tidbits)
+* [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)
@@ -72,33 +66,31 @@ browser widths until you understand it.
 
 **All configuration is optional.** Here's the simplest possible use case:
 
-Add j-p-t to your gemfile:
+Add j_p_t to your gemfile:
 
 ```ruby
-group :jekyll_plugins do 
-  gem 'jekyll-picture-tag', git: 'https://github.com/robwierzbowski/jekyll-picture-tag/'
-end 
+group :jekyll_plugins do
+  gem 'jekyll_picture_tag'
+end
 ```
 
-Write this:
+Put this liquid tag somewhere:
 
 `{% picture test.jpg %}`
 
-Get this:
+Get this in your generated site:
 
 ```html
 <!-- Line breaks added for readability, the actual markup will not have them. -->
-<img 
-  src="http://localhost:4000/generated/test-800by450-195f7d.jpg" 
-  srcset="
-    http://localhost:4000/generated/test-400by225-195f7d.jpg 400w,
-    http://localhost:4000/generated/test-600by338-195f7d.jpg 600w,
-    http://localhost:4000/generated/test-800by450-195f7d.jpg 800w,
-    http://localhost:4000/generated/test-1000by563-195f7d.jpg 1000w"
->
+
+<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">
 ```
 
-**Here's a more complete example:**
+### Here's a more complete example:
 
 With this configuration:
 
@@ -113,7 +105,7 @@ markup_presets:
   default:
     widths: [600, 900, 1200]
     formats: [webp, original]
-    sizes: 
+    sizes:
       mobile: 80vw
     size: 500px
 
@@ -126,657 +118,79 @@ Write this:
 Get this:
 
 ```html
-
 <!-- Formatted for readability -->
+
 <picture>
-  <source 
-    sizes="(max-width: 600px) 80vw, 500px"
+  <source
+    sizes="(max-width: 600px) 80vw, 600px"
     media="(max-width: 600px)"
-    type="image/webp"
-    srcset="http://localhost:4000/generated/test2-600by338-21bb6f.webp 600w,
-    http://localhost:4000/generated/test2-900by506-21bb6f.webp 900w,
-    http://localhost:4000/generated/test2-1200by675-21bb6f.webp 1200w">
-
-  <source 
-    sizes="(max-width: 600px) 80vw, 500px"
-    type="image/webp"
-    srcset="http://localhost:4000/generated/test-600by338-195f7d.webp 600w,
-    http://localhost:4000/generated/test-900by506-195f7d.webp 900w,
-    http://localhost:4000/generated/test-1200by675-195f7d.webp 1200w">
-
-  <source 
-    sizes="(max-width: 600px) 80vw, 500px"
+    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)"
-    type="image/jpeg"
-    srcset="http://localhost:4000/generated/test2-600by338-21bb6f.jpg 600w,
-    http://localhost:4000/generated/test2-900by506-21bb6f.jpg 900w,
-    http://localhost:4000/generated/test2-1200by675-21bb6f.jpg 1200w">
-
-  <source 
-    sizes="(max-width: 600px) 80vw, 500px"
-    type="image/jpeg"
-    srcset="http://localhost:4000/generated/test-600by338-195f7d.jpg 600w,
-    http://localhost:4000/generated/test-900by506-195f7d.jpg 900w,
-    http://localhost:4000/generated/test-1200by675-195f7d.jpg 1200w">
-
-  <img 
-    src="http://localhost:4000/generated/test-800by450-195f7d.jpg"
-    alt="Alternate Text">
+    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>
 ```
 
-# Installation
-
-Add `jekyll-picture-tag` to your Gemfile in the `:jekyll_plugins` group.
-For now I don't have push access to RubyGems, meaning you have to point your gemfile at this git repo. 
-If you don't you'll get an old, incompatible version.
-
-```ruby
-group :jekyll_plugins do 
-  gem 'jekyll-picture-tag', git: 'https://github.com/robwierzbowski/jekyll-picture-tag/'
-end 
-```
-
-### ImageMagick
-
 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.
 
-Verify it's installed by entering the following into a terminal:
-
-    $ convert --version
-
-You should see something like this:
-
-    chronos@localhost ~ $ convert --version
-    Version: ImageMagick 7.0.8-14 Q16 x86_64 2018-10-31 https://imagemagick.org
-    Copyright: © 1999-2018 ImageMagick Studio LLC
-    License: https://imagemagick.org/script/license.php
-    Features: Cipher DPC HDRI OpenMP 
-    Delegates (built-in): bzlib fontconfig freetype jng jp2 jpeg lcms lzma pangocairo png tiff webp xml zlib
-
-Note webp under delegates. This is required if you want to generate webp files.
-
-If you get a 'command not found' error, you'll need to install it. Most Linux package managers
-include it, otherwise it can be downloaded [here](https://imagemagick.org/script/download.php)
-
-# Usage
-
-The tag takes a mix of user input and pointers to configuration settings:
-
-`{% picture [preset] (source image) [alternate images] [attributes] %}`
-
-Note the tag parser separates arguments by looking for some whitespace followed by `'--'`. If you
-need to set HTML attribute values which begin with `'--'`, either set them first
-(`class="--my-class"`) or using `_data/picture.yml` settings. `class="some-class
---some-other-class"` will break things.  
-
-* **Preset**
-
-  *Format:* `(name of a markup preset described in _data/picture.yml)`
-
-  *Default:* `default`
-
-  Optionally specify a markup [preset](#markup-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 a jpeg, png, webp, or gif.
-
-* **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.)
-
-  ##### `--(element)` 
-
-  *Format:* `--(picture|img|source|a|parent|alt) (Whatever HTML attributes you want)`
-
-  *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`
-  * `alt`
-
-  `--parent` will be applied to the `<picture>` if present, otherwise the `<img>`; useful when using
-    the `auto` output format.
-
-  `--alt` is a shortcut for `--img alt="..."`
-    *Example:* `--alt Here is my alt text!`
-
-  ##### 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:
-
-`html {% picture {{ post.featured_image }} --alt Our Project %}`
-
-# Configuration
-
-**All configuration is optional**. If you are happy with the defaults, you don't have to touch a
-single yaml file. 
-
-## Global Configuration
-
-Global settings are stored under the `picture:` key in `/_config.yml`.
-
-**Example config:**
-
-```yml
-picture: 
-  source: "assets/images/fullsize"
-  output: "assets/images/generated"
-```
-
-* **Source Image Directory**
-
-  *Format:* `source: (directory)`
-
-  *Example:* `source: images/`
-
-  *Default:* Jekyll site root.
-
-  To make writing tags easier you can specify a source directory for your assets. Base images in the
-  tag will be relative to the `source` directory, which is relative to the Jekyll site root. 
-
-  For example, if `source` is set to `assets/images/_fullsize`, the tag 
-  `{% picture enishte/portrait.jpg --alt An unsual picture %}` will look for a file at
-  `assets/images/_fullsize/enishte/portrait.jpg`.
-
-* **Destination Image Directory**
-
-    *Format:* `output: (directory)`
-
-    *Example:* `output: resized_images/`
-
-    *Default*: `generated/` 
-
-  Jekyll Picture Tag saves resized, reformatted images to the `output` directory in your compiled
-  site. The organization of your `source` directory is maintained. 
-
-  This setting is relative to your compiled site, which means `_site` unless you've changed it.
-
-* **Suppress Warnings**
-
-    *Format:* `suppress_warnings: (true|false)`
-
-    *Example:* `suppress_warnings: true`
-
-    *Default*: `false`
-
-  Jekyll Picture Tag will warn you in a few different scenarios, such as when your base image is
-  smaller than one of the sizes in your preset. (Note that Jekyll Picture Tag will never resize an
-  image to be larger than its source). Set this value to `true`, and these warnings will not be shown.
-
-* **Use Relative Urls**
-
-    *Format:* `relative_url: (true|false)`
-
-    *Example:* `relative_url: false`
-
-    *Default*: `true`
-
-  Whether to use relative (`/generated/test(...).jpg`) or absolute
-  (`https://example.com/generated/test(...).jpg`) urls in your src and srcset attributes.
-
-* **Kramdown nomarkdown fix**
-
-  *Format:* `nomarkdown: (true|false)`
-
-  *Example:* `nomarkdown: false`
-
-  *Default*: `true`
-
-  Whether or not to surround j-p-t's output with a `{::nomarkdown}..{:/nomarkdown}` block when called
-  from within a markdown file. This one requires some explanation, but you can probably just leave
-  it enabled.
-
-  Under certain circumstances, Kramdown (Jekyll's default markdown parser) will get confused by HTML
-  and will subsequently butcher it. One instance is when you wrap a block level element (such as a
-  `<picture>`) within a span level element (such as an anchor tag). This flag fixes that issue.
-
-  You should disable this if one of the following applies:
-    * You have changed the markdown parser to something other than kramdown.
-    * You will never wrap your images with links within a markdown file, and it's important that
-      your generated markup is pretty.
-    * It's causing issues. If you're seeing stray `{::nomarkdown}` or garbled HTML, try disabling
-      this and in either case please file a bug report!
-
-  Kramdown is finicky about when it will or won't listen to the `nomarkdown` option, depending on the
-  line breaks before, after, and within the block. The most general solution I've found is to remove
-  all line breaks from j-p-t's output, giving the whole shebang on one line. It makes for ugly markup,
-  but it's pretty much only ever seen by the browser anyway. If you know a better way to accomplish
-  this, I'm all ears!
-
-## Preset Configuration
-
-Presets are stored in `_data/picture.yml`, to avoid cluttering `_config.yml`. You will have to
-create this file, and probably the `_data/` directory as well.
-
-All settings are optional, moderately sensible defaults have been implemented. A template can be
-found in the [example data file](examples/_data/picture.yml) in the examples directory.
-
-**Example settings:** 
-
-```yml
-
-# _data/picture.yml
-
-media_presets:
-  wide_desktop: 'min-width: 1801px'
-  desktop: 'max-width: 1800px'
-  wide_tablet: 'max-width: 1200px'
-  tablet: 'max-width: 900px'
-  mobile: 'max-width: 600px'
-
-markup_presets:
-  default:
-    formats: [webp, original]
-    widths: [200, 400, 800, 1600]
-    media_widths: 
-      mobile: [200, 400, 600] 
-      tablet: [400, 600, 800]
-    size: 800px
-    sizes: 
-      mobile: 100vw
-      desktop: 60vw
-    attributes:
-      picture: 'class="awesome" data-volume="11"'
-      img: 'class="some-other-class"'
-
-  icon:
-    base-width: 20
-    pixel_ratios: [1, 1.5, 2]
-
-  lazy:
-    markup: data_auto
-    formats: [webp, original]
-    widths: [200, 400, 600, 800]
-    noscript: true
-    attributes: 
-      img: class="lazy"
-
-```
-
-#### Media Presets
-
-*Format:* 
-
-```yml
-media_presets:
-  (name): (css media query)
-  (name): (css media query)
-  (name): (css media query)
-  (...)
-
-```
-
-*Example:* 
-
-```yml
-media_presets:
-  desktop: 'min-width: 1200px'
-```
-
-These are named media queries for use in a few different places.
-
-Keys are names by which you can refer to the media queries supplied as their respective values.
-These are used for specifying alternate source images in your liquid tag, and for building the
-'sizes' attribute within your presets. Quotes are required around the media
-queries, because yml gets confused by free colons.
-
-#### Markup Presets
-
-*Format:* 
-
-```yml
-markup_presets:
-  (name):
-    (option): (setting)
-    (option): (setting)
-    (option): (setting)
-    (...)
-  (another name):
-    (option): (setting)
-    (option): (setting)
-    (option): (setting)
-    (...)
-```
-
-*Example:*
-
-```yml
-markup_presets:
-  default:
-    formats: [webp, original]
-    widths: [200, 400, 800, 1600]
-    link_source: true
-  lazy:
-    markup: data_auto
-    widths: [200, 400, 800, 1600]
-    link_source: true
-    noscript: true
-```
-
-These are the 'presets' from previous versions, with different structure. Each entry is a
-pre-defined collection of settings to build a given chunk of HTML and its respective images. You
-can select one as the first argument given to the tag:
-
-`{% picture my-preset image.jpg %}`
-
-The `default` preset will be used if none is specified. A preset name can't contain the `.`, `:`,
-or `/` characters.
-
-#### A Note on srcsets, for the bad kids who didn't do the required reading.
-
-There are 2 srcset formats, one based on providing widths, the other based on providing multipliers.
-
-Width based srcsets look like this: `srcset="img.jpg 600w, img2.jpg 800w, img3.jpg 1000w"`. The
-`(number)w` tells the browser how wide that image file is. Browsers are smart, they know their
-device's pixel ratio, so in combination with the sizes attribute (if given, otherwise it assumes the
-image will be 100vw) they can select the best-fitting image for the space it will fill on the screen.
-
-Multiplier based srcsets look like this: `srcset="img.jpg 1x, img2.jpg 1.5x, img3.jpg 3x"`. The 
-browser is less smart here; it looks at its own device's pixel ratio, compares it to the given
-multiplier, and picks the closest one. It doesn't consider anything else at all. Multiplier based
-srcsets are best used when the image will always be the same size, on all screen sizes.
-
-To use a width based srcset in a preset, specify a `widths` setting (or don't, for the default), and
-optionally the `sizes` and `size` settings. 
-
-To use a multiplier based srcset, set `pixel_ratios` and `base_width`. 
-
-* **Markup format**
-
-  *Format:* `markup: (setting)`
-
-  *Default*: `auto`
-
-  Defines what format the generated HTML will take. Here are your options:
-
-  * `picture`: `<picture>` element surrounding a `<source>` tag for each required srcset, and a
-    fallback `<img>`.
-  * `img`: output a single `<img>` tag with a `srcset` entry.
-  * `auto`: Supply an img tag when you have only one srcset, otherwise supply a picture tag.
-  * `data_picture`, `data_img`, `data_auto`: Analogous to their counterparts,
-    but instead of `src`, `srcset`, and `sizes`, you get `data-src`, `data-srcset`, and
-    `data-sizes`. This allows you to use javascript for things like [lazy loading](https://github.com/verlok/lazyload)
-  * `direct_url`: Generates an image and returns only its url. Uses `fallback_` properties (width
-    and format)
-
-* **Image Formats**
-
-  *Format:* `format: [format1, format2, (...)]`  
-
-  *Example:* `format: [webp, original]`
-
-  *Default*: `original`
-
-  Array (yml sequence) of the image formats you'd like to generate, in decreasing order
-  of preference. Browsers will render the first format they find and understand, so if you put jpg
-  before webp, your webp images will never be used. `original` does what you'd expect. To supply
-  webp, you must have an imagemagick webp delegate installed, described [here](#imagemagick).
-
-* **widths**
-
-  *Format:* `widths: [integer, integer, (...)]`
-
-  *Example:* `widths: [600, 800, 1200]`
-
-  *Default*: `[400, 600, 800, 1000]`
-
-  Array of image widths to generate, in pixels. For use when you want a size-based srcset
-  (`srcset="img.jpg 800w, img2.jpg 1600w"`). 
-
-* **media_widths**
-
-    *Format:* 
-
-    ```yml
-    media_widths:
-      (media preset name): [integer, integer, (...)]
-    ```
-
-    *Example:* 
-
-    ```yml
-    media_widths:
-      mobile: [400, 600, 800]
-    ```
-
-    *Default:* Widths setting
-
-  If you are using art direction, there is no sense in generating desktop-size files for your mobile
-  image. You can specify sets of widths to associate with given media queries. If not specified,
-  will use `widths` setting.
-
-* **Fallback Image**
-
-    *Format:* `fallback_width: (integer)`
-              `fallback_format: (format)`
-
-    *Example:* `fallback_width: 800`
-               `fallback_format: jpg`
-
-    *Default*: `800` and `original` 
-
-  Properties of the fallback image, format and width. 
-
-* **Sizes**
-
-    *Format:* 
-    ```yml
-    sizes:
-      (media query): (CSS dimension)
-      (media query): (CSS dimension)
-      (media query): (CSS dimension)
-      (...)
-    ```
-
-    *Example:*
-    ```yml
-    sizes:
-      mobile: 80vw
-      tablet: 60vw
-      desktop: 900px
-    ```
-
-  Conditional sizes, used to construct the `sizes=` HTML attribute telling the browser how wide your
-  image will be (on the screen) when a given media query is true. CSS dimensions can be given in
-  `px`, `em`, or `vw`. To be used along with a width based srcset.
-
-  You don't have to provide a sizes attribute at all. If you don't, the browser will assume the
-  image is 100% the width of the viewport.
-
-  The same sizes attribute is used for every source tag in a given picture tag. This causes some
-  redundant markup, specifying sizes for situations when an image will never be rendered, but it
-  simplifies configuration greatly.
-
-* **Size**
-
-  *Format:* `size: (CSS Dimension)`
-
-  *Example:* `size: 80vw`
-
-  Unconditional image width to give the browser (by way of the html sizes attribute), to be supplied
-  either alone or after all conditional sizes.
-
-* **Pixel Ratios**
-
-  *Format:* `pixel_ratios: [number, number, number (...)]` 
-
-  *Example:* `pixel_ratios: [1, 1.5, 2]`
-
-  Array of images to construct, given in multiples of the base width. If you set this, you must also
-  give a `base_width`.
-
-  Set this when you want a multiplier based srcset (example: `srcset="img.jpg 1x, img2.jpg 2x"`).
-
-* **Base Width**
-
-  *Format:* `base_width: integer`
-
-  *Example:* `base_width: 100`
-
-  When using pixel ratios, you must supply a base width. This sets how wide the 1x image should be.
-
-* **HTML Attributes**
-
-  *Format:* 
-
-  ```yml
-  attributes: 
-    (element): '(attributes)'
-    (element): '(attributes)'
-    (element): '(attributes)'
-    (...)
-  ```
-
-  *Example:*
-
-  ```yml
-  attributes:
-    img: 'class="soopercool" data-awesomeness="11"'
-    picture: 'class="even-cooler"'
-  ```
-
-  HTML attributes you would like to add.  The same arguments are available here as in the liquid
-  tag; element names, `alt:`, `url:`, and `parent:`. Unescaped double quotes cause problems with
-  yml, so it's recommended to surround them with single quotes.
-
-* **Noscript**
-
-    *Format:* `noscript: (true|false)`
-
-    *Example:* `noscript: true`
-
-    *Default:* `false`
-
-  For use with the `data_` output formats. When true, will include a basic `img` fallback within a
-  `<noscript>` tag after the standard html. This allows you to use lazy loading or other javascript
-  image tools, without breaking all of your images for non-javascript-enabled users.
-
-* **Source Image Linking**
-
-    *Format:* `link_source: (true|false)`
-
-    *Example:* `link_source: true`
-
-    *Default:* `false`
-
-  Surround image with a link to the original source file. Your source image directory must
-  be published as part of the compiled site. The same caveats apply as the `--url` flag: don't
-  disable `nomarkdown` if you'll be using this from within a kramdown parsed markdown file.
-
-# Miscellaneous Tidbits
-
-### Lazy Loading, and other javascript related tomfoolery
-
-Use one of the `data_` output formats and something like
-[LazyLoad](https://github.com/verlok/lazyload). The 'lazy' preset in the example config will work.
-
-### PictureFill
-
-[Picturefill](http://scottjehl.github.io/picturefill/) version 3 no longer requires special markup.
-Standard outputs should be compatible.
-
-### Managing Generated Images
-
-Jekyll Picture Tag creates resized versions of your images when you build the site. It uses a smart
-caching system to speed up site compilation, and re-uses images as much as possible. Filenames
-take the following format:
-
-`(original filename without extension)_(width)by(height)_(source hash).(format)`
-
-Source hash is the first 5 characters of an md5 checksum of the source image.
-
-Try to use a base image that is larger than the largest resized image you need. Jekyll Picture Tag
-will warn you if a base image is too small, and won't upscale images.
-
-By specifying a `source` directory that is ignored by Jekyll you can prevent huge base images from
-being copied to the compiled site. For example, `source: assets/images/_fullsize` and `output:
-generated` will result in a compiled site that contains resized images but not the originals. Note
-that this will break source image linking, if you wish to enable it. (Can't link to images that
-aren't public!)
-
-The `output` directory is never deleted by Jekyll. You may want to manually clean it every once in a
-while to remove unused images.
-
 # Contribute
 
-Report bugs and feature proposals in the 
+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 to the readme. Don't let that stop you from submitting a pull request,
-though! Just allow modifications and I'll take care of it.
+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
 
+* 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 for more helpful error messages when running old versions of ruby.
 * **1.0.0** Nov 27, 2018: Rewrite from the ground up. See [migration.md](/migration.md).
-* 0.2.2 Aug  2, 2013: Bugfixes. 
+* 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.