jekyll_picture_tag 1.7.0 → 1.7.1

data/docs/notes.md

@@ -1,85 +1,81 @@
+---
+---
 # Notes and FAQ
 
-## Extra {::nomarkdown} tags or mangled HTML?
+* #### Github Pages?
 
-**TLDR up front:** There's a bug involving `<picture>` tags wrapped in `<a>` tags which is not in my
-power to fix.
+  Github Pages only allows a very short whitelist of plugins, which sadly does not include JPT. You
+  can either run it locally, then commit and push the generated files (rather than the source
+  files), or just host it some other way. I recommend Netlify.
 
-* If you're getting extra `{::nomarkdown}` tags floating around your images, add `nomarkdown: false`
-  to either the relevant preset or under `picture` in `_config.yml`. 
+* #### HTML attributes
 
-* If you're getting mangled HTML when trying to wrap images with anchor tags, add `nomarkdown: true`
-  to the preset. 
-  
-#### What's going on here:
-
-Kramdown is Jekyll's default markdown parser. Kramdown gets grumpy when you give it a block level
-element (such as a `<picture>`) surrounded by a span level element (such as an `<a>`), and horribly
-mangles it. The fix for this is to tell Kramdown to chill with a `{::nomarkdown}..{:/nomarkdown}`
-wrapper.
-
-Jekyll Picture Tag can be called from many different places: a markdown file, an HTML file, an HTML
-layout for a markdown file, and an HTML include, to name a few. JPT tries its best to determine
-whether its output will be parsed by Kramdown or not, but Jekyll itself doesn't make this
-particularly easy which results in some false positives. (The one I'm most aware of is when a
-markdown file uses an HTML layout which includes a picture tag.) 
+  Jekyll Picture Tag has comprehensive attribute support for all generated HTML. You can add
+  attributes both through the [liquid tag]({{ site.baseurl }}/usage), and the [preset]({{
+  site.baseurl }}/presets) (scroll down a bi make sure that your hosting
+  provider makes those images available during the build process.  Netlify, for example, does not.
+  You won't find this out until you have gone through the entire migration process and try to deploy
+  for the first time.
 
-Unfortunately, I don't see an easy way to fix this. We've gotten this far mostly by trial and error.
-I'll continue to work on improving the autodetection, but you can override this behavior explicitly. 
 
-#### The fix:
+* #### Extra {::nomarkdown} tags or mangled HTML?
 
-By default, JPT will add a `{::nomarkdown}` tag if all of the following are true:
-* It thinks it's called from a markdown page
-* The image will be wrapped in an anchor tag (i.e. `link_source_image:` or a `--link` parameter)
-* This behavior hasn't been explicitly disabled. 
+  **TLDR up front:** There's a bug involving `<picture>` tags wrapped in `<a>` tags which is not in my
+  power to fix.
 
-You can disable nomarkdown tags globally by setting `nomarkdown: false` under the `picture:` key in
-`_config.yml`.
+  * If you're getting extra `{::nomarkdown}` tags floating around your images, add `nomarkdown:
+    false` to either the relevant preset or under `picture` in `_config.yml`. 
 
-You can enable or disable markdown tags per preset by adding `nomarkdown: true|false` to them.
-**This setting overrides everything else, both JPT autodetection and the global setting.**
-
-## Input checking
+  * If you're getting mangled HTML when trying to wrap images with anchor tags, add `nomarkdown:
+    true` to the preset. 
+  
+  **What's going on here:**
 
-Jekyll Picture Tag is very trusting. It doesn't do much checking of your inputs, and it does not
-fail gracefully if you for example pass it a string when it expects an array. It's on the to-do
-list, but for now if you get cryptic errors then double-check your settings and tag arguments.
+  Kramdown is Jekyll's default markdown parser. Kramdown gets grumpy when you give it a block level
+  element (such as a `<picture>`) surrounded by a span level element (such as an `<a>`), and horribly
+  mangles it. The fix for this is to tell Kramdown to chill with a `{::nomarkdown}..{:/nomarkdown}`
+  wrapper.
 
-## Git LFS
+  Jekyll Picture Tag can be called from many different places: a markdown file, an HTML file, an HTML
+  layout for a markdown file, and an HTML include, to name a few. JPT tries its best to determine
+  whether its output will be parsed by Kramdown or not, but Jekyll itself doesn't make this
+  particularly easy which results in some false positives. (The one I'm most aware of is when a
+  markdown file uses an HTML layout which includes a picture tag.) 
 
-Putting this here because it bit me: If you want to use git LFS, make sure that your hosting
-provider makes those images available during the build process.  Netlify, for example, does not. You
-won't find this out until you have gone through the entire migration process and try to deploy for
-the first time.
+  Unfortunately, I don't see an easy way to fix this. We've gotten this far mostly by trial and error.
+  I'll continue to work on improving the autodetection, but you can override this behavior explicitly. 
 
-## Lazy Loading, and other javascript related tomfoolery
+  **The fix:**
 
-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.
+  By default, JPT will add a `{::nomarkdown}` tag if all of the following are true:
+  * It thinks it's called from a markdown page
+  * The image will be wrapped in an anchor tag (i.e. `link_source_image:` or a `--link` parameter)
+  * This behavior hasn't been explicitly disabled. 
 
-## PictureFill
+  You can disable nomarkdown tags globally by setting `nomarkdown: false` under the `picture:` key in
+  `_config.yml`.
 
-[Picturefill](http://scottjehl.github.io/picturefill/) version 3 no longer requires special markup.
-Standard outputs should be compatible.
+  You can enable or disable markdown tags per preset by adding `nomarkdown: true|false` to them.
+  **This setting overrides everything else, both JPT autodetection and the global setting.**
 
-## Managing Generated Images
+* ### 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:
+  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)-(source hash).(appropriate extension)`
+  `(original name without extension)-(width)-(source hash).(filetype)`
 
-Source hash is the first 5 characters of an md5 checksum of the source image.
+  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.
+  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!)
+  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 empty it once in awhile, to clear out unused images. 
+  The `output` directory is never deleted by Jekyll. You may want to empty it once in awhile, to
+  clear out unused images. 

data/docs/output.md

@@ -0,0 +1,52 @@
+---
+---
+
+# Output Formats
+
+This is a listing of the various text arrangements that JPT can give you. Select one by setting
+`markup:` in the relevant [markup preset]({{ site.baseurl }}/presets).
+
+Example: 
+
+```yml
+# /_data/picture.yml
+
+markup_presets:
+  my_preset:
+    markup: data_auto
+```
+
+## Standard HTML:
+
+* **`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.
+
+## Javascript Friendly:
+
+* **`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). Include a
+basic `img` fallback within a `<noscript>` tag by setting `noscript: true` in the preset. This
+allows you to keep working images for your non-javascript-enabled users.
+
+  *Example:* 
+
+  ```yml
+  # /_data/picture.yml
+  markup_presets:
+    lazy: 
+      markup: data_auto
+      noscript: true
+  ```
+
+## Fragments:
+
+* `direct_url`: Generates an image and returns only its url. Uses `fallback_` properties (width
+and format).
+
+* `naked_srcset`: Builds a srcset and nothing else (not even the surrounding quotes). Note that the
+(image) `format` setting must still be an array, even if you only give it one value.

data/docs/presets.md

@@ -1,71 +1,28 @@
+---
+---
+
 # Writing Presets
 
-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.
+Presets are named collections of settings that determine basically everything about JPT's output.
+They 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.
+Here's an [example data file]({{ site.baseurl }}/example_presets).
 
 ## Required Knowledge
 
-If you don't understand responsive images, you won't know what to do with these settings. 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
+If you don't know the difference between resolution switching and art direction, stop now and read
+the [MDN Responsive Images
+guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
 in detail. Ideally, play around with a basic HTML file, a few test images, and a few different
 browser widths until you understand it.
 
-## Example settings
-
-A more thorough example can be found under `docs/examples/_data/picture.yml`.
-
-```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)
   (...)
@@ -79,12 +36,9 @@ 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.
+These are named media queries for use in a few different places: specifying alternate source images
+in your liquid tag, building the 'sizes' attribute within your presets, and in a few configuration
+settings. Quotes are recommended around the media queries, because yml gets confused by colons.
 
 ## Markup Presets
 
@@ -93,15 +47,10 @@ queries, because yml gets confused by free colons.
 ```yml
 markup_presets:
   (name):
-    (option): (setting)
-    (option): (setting)
-    (option): (setting)
-    (...)
-  (another name):
-    (option): (setting)
     (option): (setting)
     (option): (setting)
     (...)
+  (...)
 ```
 
 *Example:*
@@ -119,35 +68,25 @@ markup_presets:
     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:
+Each entry is a pre-defined collection of settings to build a given chunk of text (usually HTML) and
+its respective images. You can select one as the first argument given to the tag:
 
+{% raw %}
 `{% picture my-preset image.jpg %}`
+{% endraw %}
 
-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. This is generally the one you want to use.
+The `default` preset will be used if none is specified. A preset name can't contain a `.` (period).
 
-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.
+#### A Note on srcsets
 
-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.
+For images that are different sizes on different screens (most images), use a width-based srcset
+(which is the default). Specify a `widths` setting (or don't, for the default set), and optionally
+the `sizes` and `size` settings. 
 
-To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
+Use a multiplier-based srcset when the image will always be the same size, regardless of screen
+width (thumbnails and icons). To use a multiplier-based srcset, set `pixel_ratios` and `base_width`.
 
-### Markup preset settings
+### Settings reference
 
 * **Markup format**
 
@@ -155,20 +94,8 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
 
   *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)
-  * `naked_srcset`: Builds a srcset and nothing else (not even the surrounding quotes). Useful with
-    libraries requiring more complex or customized markup. Note that the (image) `format` setting
-    must still be an array, even if you can only give it one value.
+  Defines what format the generated text will take. They are documented [here]({{ site.baseurl }}/output).
+
  
 * **Image Formats**
 
@@ -178,22 +105,16 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
 
   *Default*: `original`
 
-  *Supported formats are anything which imagemagick supports, including the
-  following:*
-  * jpg/jpeg
-  * png
-  * gif
-  * webp
-  * jxr
-  * jp2
-
   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. (Most package managers just name it
   'webp')
 
-* **widths**
+  *Supported formats are anything which imagemagick supports, and has an installed delegate. See a
+  list by running `$ convert --version`*
+
+* **Widths**
 
   *Format:* `widths: [integer, integer, (...)]`
 
@@ -201,24 +122,24 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
 
   *Default*: `[400, 600, 800, 1000]`
 
-  Array of image widths to generate, in pixels. For use when you want a size-based srcset
+  Array of image widths to generate, in pixels. For use when you want a width-based srcset
   (`srcset="img.jpg 800w, img2.jpg 1600w"`).
 
-* **media_widths**
+* **Media_widths**
 
     *Format:*
 
-    ```yml
-    media_widths:
-      (media preset name): [integer, integer, (...)]
-    ```
+  ```yml
+  media_widths:
+    (media preset name): [integer, integer, (...)]
+  ```
 
     *Example:*
 
-    ```yml
-    media_widths:
-      mobile: [400, 600, 800]
-    ```
+  ```yml
+  media_widths:
+    mobile: [400, 600, 800]
+  ```
 
     *Default:* Widths setting
 
@@ -226,48 +147,28 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
   image. You can specify sets of widths to associate with given media queries. If not specified,
   will use `widths` setting.
 
-* **Fallback Width**
-
-    *Format:* `fallback_width: (integer)`             
-
-    *Example:* `fallback_width: 800`
-
-    *Default*: `800`
-
-  Width of the fallback image.
-
-* **Fallback Image**
-
-    *Format:*  `fallback_format: (format)`
-
-    *Example:* `fallback_format: jpg`
-
-    *Default*: `original`
-
-  Format of the fallback image
-
 * **Sizes**
 
     *Format:*
-    ```yml
-    sizes:
-      (media preset): (CSS dimension)
-      (media preset): (CSS dimension)
-      (media preset): (CSS dimension)
-      (...)
-    ```
+
+  ```yml
+  sizes:
+    (media preset): (CSS dimension)
+    (...)
+  ```
 
     *Example:*
-    ```yml
-    sizes:
-      mobile: 80vw
-      tablet: 60vw
-      desktop: 900px
-    ```
+
+  ```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.
+  `px`, `em`, or `vw`. To be used along with a width-based srcset.
 
   Provide these in order of most restrictive to least restrictive. The browser will choose the 
   first one with an applicable media query.
@@ -275,18 +176,13 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
   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 
-  keeps things a bit simpler.
-
 * **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.
+  Unconditional `sizes` setting, to be supplied either alone or after all conditional sizes.
 
 * **Pixel Ratios**
 
@@ -309,7 +205,7 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
 
 * **Quality**
 
-  *Format:* `quality: integer <= 100`
+  *Format:* `quality: 0 <= integer <= 100`
 
   *Example:* `quality: 80`
 
@@ -324,9 +220,7 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
 
   ```yml
   format_quality:
-    (format): integer <= 100
-    (format): integer <= 100
-    (format): integer <= 100
+    (format): 0 <= integer <= 100
     (...)
   ```
 
@@ -352,8 +246,6 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
 
   ```yml
   attributes:
-    (element): '(attributes)'
-    (element): '(attributes)'
     (element): '(attributes)'
     (...)
   ```
@@ -367,22 +259,30 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
   ```
 
   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.
+  tag: HTML element names, `alt:`, `link:`, and `parent:`. Unescaped double quotes cause problems
+  with yml, so it's recommended to surround them with single quotes.
 
-* **Noscript**
+* **Fallback Width**
 
-    *Format:* `noscript: (true|false)`
+    *Format:* `fallback_width: (integer)`             
 
-    *Example:* `noscript: true`
+    *Example:* `fallback_width: 800`
 
-    *Default:* `false`
+    *Default*: `800`
 
-  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.
+  Width of the fallback image.
 
-* **Source Image Linking**
+* **Fallback Format**
+
+    *Format:*  `fallback_format: (format)`
+
+    *Example:* `fallback_format: jpg`
+
+    *Default*: `original`
+
+  Format of the fallback image
+
+* **Source Image Link**
 
     *Format:* `link_source: (true|false)`
 
@@ -392,7 +292,7 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
 
   Surround image with a link to the original source file. Your source image directory must be
   published as part of the compiled site. If you run into weird issues with the output, see
-  [notes](notes.md).
+  the [notes]({{ site.baseurl }}/notes).
 
 * **Nomarkdown override**
    
@@ -403,5 +303,4 @@ To use a multiplier based srcset, set `pixel_ratios` and `base_width`.
     *Default:* `nil`
 
   Hard setting for `{::nomarkdown}` tags, overrides both autodetection and the global setting in
-  `_config.yml`. See [notes](notes.md) for a detailed explanation. 
-
+  `_config.yml`. See the [notes]({{ site.baseurl }}/notes) for a detailed explanation. 

data/docs/releases.md

@@ -0,0 +1,49 @@
+---
+---
+# Release History
+
+* 1.7.1 Nov 14, 2019
+  * Fix some HTML attribute related bugs
+  * Add a few items to the FAQ
+* 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]({{ site.baseurl }}/migration).
+* 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.