jekyll_picture_tag 1.10.1 → 1.14.0

data/docs/users/presets/markup_formats/javascript_friendly.md

@@ -0,0 +1,57 @@
+---
+sort: 2
+---
+
+# Javascript Friendly
+
+These are analogous to their plain HTML 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).
+
+- `data_picture`
+
+  ```html
+    <picture> 
+      <source data-srcset="..." data-sizes="...">
+      <source data-srcset="..." data-sizes="...">
+      (...)
+      <img data-src="...">
+    </picture>
+  ```
+
+- `data_img`
+  ```html
+    <img data-srcset="..." data-src="..." data-sizes="...">
+  ```
+
+- `data_auto` - `data_picture` when needed, otherwise `data_img`.
+
+## Special Options
+
+The following preset settings only apply to these output formats.
+
+- `noscript`
+
+  _Format:_ `noscript: true|false`
+
+  _Default:_ `false`
+
+  Include a basic `img` fallback within a `<noscript>` tag, giving your
+  non-javascript-running users something to look at.
+
+  ```html
+    <img data-srcset="..." data-src="..." data-sizes="...">
+    <noscript>
+      <img src="..." alt="...">
+    </noscript>
+  ```
+
+- `data_sizes`
+
+  _Format:_ `data_sizes: true|false`
+
+  _Default:_ `true`
+
+  This option sets whether you would like JPT's auto-generated sizes to be returned as a
+  `data-sizes` attribute or a normal `sizes` attribute.

data/docs/users/presets/markup_formats/readme.md

@@ -0,0 +1,43 @@
+---
+sort: 1
+---
+
+# Markup Formats
+
+Define what format the generated text will take. Select one by setting
+`markup:` in the relevant [preset]({{ site.baseurl }}/users/presets).
+
+_Format:_ `markup: (setting)`
+
+_Default_: `auto`
+
+
+Example:
+
+```yml
+# /_data/picture.yml
+
+markup_presets:
+  my_preset:
+    markup: data_auto
+```
+
+## Valid options:
+
+### Standard HTML:
+- `auto` - default
+- `picture`
+- `img`
+
+### Javascript Friendly:
+- `data_auto`
+- `data_picture`
+- `data_img`
+
+### Fragments:
+- `direct_url`
+- `naked_srcset`
+
+## Reference:
+
+{% include list.liquid %}

data/docs/users/presets/markup_formats/standard_html.md

@@ -0,0 +1,25 @@
+---
+sort: 1
+---
+
+# Standard HTML
+
+- **`picture`** - `<picture>` element surrounding a `<source>` tag for each required srcset, and a
+  fallback `<img>`:
+
+  ```html
+    <picture> 
+      <source srcset="..." sizes="..." media="..." type="...">
+      <source srcset="..." sizes="..." media="..." type="...">
+      (...)
+      <img src="...">
+    </picture
+  ```
+
+- **`img`** - a single `<img>` tag with a `srcset` entry:
+
+  ```html
+  <img src="..." srcset="..." sizes="..." alt="..." width="..." height="...">
+  ```
+
+- **`auto`** - Supply an img tag when you have only one srcset, otherwise supply a picture tag.

data/docs/users/presets/media_queries.md

@@ -0,0 +1,36 @@
+---
+sort: 1
+---
+
+# Media Queries
+
+Jekyll Picture Tag handles media queries by letting you define them by name in
+`_data/picture.yml`, and then referencing that name whenever you need it.
+
+_Format:_
+
+```yaml
+# _data/picture.yml
+
+media_queries:
+  (name): (css media query)
+  (name): (css media query)
+  (...)
+
+```
+
+_Example:_
+
+```yaml
+# _data/picture.yml
+
+media_queries:
+  mobile: "max-width: 600px"
+  tablet: "max-width: 800px"
+  ultrawide: "min-width: 1400px"
+```
+
+They are used 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, because yml gets confused by
+colons.

data/docs/users/presets/nomarkdown_override.md

@@ -0,0 +1,17 @@
+---
+sort: 11
+---
+
+# Nomarkdown Override
+
+_Format:_ `nomarkdown: (true|false)`
+
+_Example:_ `nomarkdown: false`
+
+_Default:_ `nil`
+
+Hard setting for `{::nomarkdown}` tags, overrides both autodetection and the
+global setting in `_config.yml`.
+
+See this [note]({{ site.baseurl }}/users/notes/kramdown_bug) for a detailed
+explanation.

data/docs/users/presets/pixel_ratio_srcsets.md

@@ -0,0 +1,32 @@
+---
+sort: 4
+---
+
+# Pixel Ratio Srcsets
+
+A Pixel Ratio srcset looks like this:
+
+```html
+srcset="myimage-200.jpg 1.0x, myimage-300.jpg 1.5x, myimage-400.jpg 2.0x" 
+```
+
+To use one, set `pixel_ratios` and `base_width`. They are most appropriate for
+thumbnails and icons, where the image will be the same size on all screens, and
+all you need to account for is pixel ratio.
+
+## Base Width
+
+_Format:_ `base_width: integer`
+
+_Example:_ `base_width: 100`
+
+Sets how wide the 1x image should be. Required when using a Pixel Ratio srcset.
+
+## 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.
+

data/docs/users/presets/strip_metadata.md

@@ -0,0 +1,13 @@
+---
+sort: 12
+---
+
+# Strip Metadata
+
+_Format:_ `strip_metadata: (true|false)`
+
+_Example:_ `strip_metadata: false`
+
+_Default:_ `true`
+
+Remove EXIF data, which can save a few tens of kilobytes per image.

data/docs/users/presets/width_height_attributes.md

@@ -0,0 +1,34 @@
+---
+sort: 7
+---
+
+# Width & Height (Anti-Loading-Jank)
+
+_Format:_
+
+```yml
+dimension_attributes: true | false
+```
+
+_Example:_
+
+```yml
+dimension_attributes: true
+```
+
+_Default:_ `false`
+
+Prevent page reflow (aka jank) while images are loading, by adding `width` and
+`height` attributes to the `<img>` tag in the correct aspect ratio.
+
+For an explanation of why and how you want to do this,
+[here](https://youtu.be/4-d_SoCHeWE) is a great explanation.
+
+Caveats: 
+  * You need either `width: auto;` or `height: auto;` set in CSS on the `<img>`
+  tags, or they will be stretched.
+  * This works on `<img>` tags and `<picture>` tags when offering images in
+  multiple widths and formats, but it does not work if you are using art
+  direction (in other words, if you have multiple source images). This is
+  because these attributes can only be applied to the `<img>` tag, of which
+  there is exactly one.

data/docs/users/presets/width_srcsets.md

@@ -0,0 +1,85 @@
+---
+sort: 3
+---
+
+# Width Based Srcsets
+
+A width based srcset looks like this: 
+
+```html
+srcset="myimage-800.jpg 800w, myimage-1200.jpg 1200w, myimage-2000.jpg 2000w"
+```
+
+It's the default; to use it specify a `widths` setting (or don't, for the
+default set), and optionally the `sizes` and `size` settings.
+
+## Widths
+
+_Format:_ `widths: [integer, integer, (...)]`
+
+_Example:_ `widths: [600, 800, 1200]`
+
+_Default_: `[400, 600, 800, 1000]`
+
+Array of image widths to generate, in pixels.
+
+## Media Widths
+
+_Format:_
+
+```yml
+media_widths:
+  (media_query 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.
+
+## Sizes
+
+_Format:_
+
+```yml
+sizes:
+  (media preset): (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.
+
+Provide these in order of most restrictive to least restrictive. The browser
+will choose the first one with an applicable media query.
+
+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.
+
+## Size
+
+_Format:_ `size: (CSS Dimension)`
+
+_Example:_ `size: 80vw`
+
+Unconditional `sizes` setting, to be supplied either alone or after all
+conditional sizes.

data/install_imagemagick.sh

@@ -0,0 +1,23 @@
+# Configure and install imagemagick; detects if cached compiled version exists.
+
+check_cached() {
+  [ "$(find . -name '*.o')" ]
+}
+
+build_im() {
+  git clone 'https://github.com/ImageMagick/ImageMagick' ./ \
+     --branch "$imagemagick_version"
+
+  rm -rf '.git'
+
+  ./configure
+  make
+}
+
+[ -d 'imagemagick' ] || mkdir imagemagick
+cd imagemagick
+
+check_cached || build_im
+
+sudo make install
+sudo ldconfig /usr/local/lib

data/jekyll_picture_tag.gemspec

@@ -29,19 +29,23 @@ Gem::Specification.new do |spec|
 
   spec.add_development_dependency 'bundler', '~> 2.0'
   spec.add_development_dependency 'minitest', '~> 5.11'
+  spec.add_development_dependency 'minitest-rg'
   spec.add_development_dependency 'mocha', '~> 1.9'
   spec.add_development_dependency 'nokogiri', '~> 1.10'
   spec.add_development_dependency 'pry'
   spec.add_development_dependency 'rake', '~> 12.3'
-  spec.add_development_dependency 'rubocop'
-  spec.add_development_dependency 'simplecov'
+  spec.add_development_dependency 'rubocop', '~> 1.7.0'
+  spec.add_development_dependency 'rubocop-minitest', '~> 0.10.0'
+  spec.add_development_dependency 'rubocop-performance', '~> 1.9.0'
+  spec.add_development_dependency 'rubocop-rake', '~> 0.5.0'
+
+  spec.add_development_dependency 'simplecov', '~> 0.20.0'
   spec.add_development_dependency 'solargraph'
 
   spec.add_dependency 'addressable', '~> 2.6'
-  spec.add_dependency 'base32', '~> 0.3'
-  spec.add_dependency 'mime-types', '~> 3'
-  spec.add_dependency 'mini_magick', '~> 4'
-  spec.add_dependency 'objective_elements', '~> 1.1.2'
+  spec.add_dependency 'mime-types', '~> 3.0'
+  spec.add_dependency 'mini_magick', '~> 4.0'
+  spec.add_dependency 'objective_elements', '~> 1.1'
 
   spec.add_runtime_dependency 'jekyll', '< 5'
 end

data/lib/jekyll_picture_tag.rb

@@ -1,14 +1,13 @@
 require 'jekyll'
 require 'objective_elements'
 
-require_relative 'jekyll_picture_tag/generated_image'
+require_relative 'jekyll_picture_tag/cache'
+require_relative 'jekyll_picture_tag/images'
 require_relative 'jekyll_picture_tag/instructions'
 require_relative 'jekyll_picture_tag/output_formats'
-require_relative 'jekyll_picture_tag/source_image'
+require_relative 'jekyll_picture_tag/router'
 require_relative 'jekyll_picture_tag/srcsets'
 require_relative 'jekyll_picture_tag/utils'
-require_relative 'jekyll_picture_tag/img_uri'
-require_relative 'jekyll_picture_tag/router'
 
 # Title: Jekyll Picture Tag
 # Authors: Rob Wierzbowski   : @robwierzbowski
@@ -51,6 +50,7 @@ module PictureTag
     # care about the params (arguments passed to the liquid tag). Jekyll makes
     # no attempt to parse them; they're given as a string.
     def initialize(tag_name, raw_params, tokens)
+      Utils.warning 'You have called JPT without any arguments.' if raw_params.empty?
       @raw_params = raw_params
       super
     end
@@ -61,7 +61,7 @@ module PictureTag
     def render(context)
       setup(context)
 
-      if PictureTag.disabled?
+      if PictureTag.disabled? || @raw_params.empty?
         ''
       else
         PictureTag.output_class.new.to_s

data/lib/jekyll_picture_tag/cache.rb

@@ -0,0 +1,3 @@
+require_relative 'cache/base'
+require_relative 'cache/source'
+require_relative 'cache/generated'