jekyll_picture_tag 1.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b7fc61d571c945d859aac14c2a85a9b80752c3642a314456c89516ae7c9632d4
+  data.tar.gz: 27f70f0b0a73101606ef098a4aceaf8183356607b9d3145c5bb514c9ea9c92cb
+SHA512:
+  metadata.gz: b008e590e962f46f83de4506b9c0a1da77f887b89987442ef9af9756987dd1bbaaa9964703ed2da3245496c02ca0fa274014a788bfd623aa719e6d098a665d4b
+  data.tar.gz: 795bf04f0b5aa155f6386bb41f33d12643699ff0065cc88f80273589179234d1ba26b801aa12da6028b03283365309ea4449038386820eaa3b1f0a634d023dac

data/.gitignore

@@ -0,0 +1,11 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+.idea
+jekyll-picture-tag.iml

data/.ruby-version

@@ -0,0 +1 @@
+2.5.3

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in jekyll-picture-tag.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,24 @@
+Copyright (c) 2013, Robert Wierzbowski
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of the <organization> nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/Rakefile

@@ -0,0 +1 @@
+require 'bundler/gem_tasks'

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require 'bundler/setup'
+require 'jekyll-picture-tag'
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require 'irb'
+IRB.start

data/bin/setup

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/examples/_config.yml

@@ -0,0 +1,4 @@
+# Sample Jekyll Picture Tag settings
+picture:
+  source: assets/images/_fullsize
+  output: generated

data/examples/_data/picture.yml

@@ -0,0 +1,85 @@
+# Example picture presets:
+# TODO: change to EMs, because safari sucks.
+
+# Media presets are used in several places:
+# - To specify alternate source images (for art direction)
+# - To build the 'sizes' attribute
+# - When given alternate source images, specify which sizes to generate.
+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 allow you to group settings together, and select one of them by name in your jekyll
+# tag. All settings are optional.
+markup_presets:
+  default:
+
+    # Optionally specify a markup type. Your current options are 'picture', 'img', or 'auto'
+    # (default).
+    markup: auto
+
+    # Must be an array, in order of decreasing preference. Defaults to just 'original'.
+    formats: [webp, original]
+
+    # Must be an array: which image sizes (width in pixels) to generate (unless directed otherwise
+    # below). If not specified, will use sensible default values.
+    widths: [200, 400, 800, 1600]
+
+    # Alternate source images (for art direction) are associated with media query presets. Here, you
+    # can optionally specify a different set of sizes to generate for those alternate source images.
+    # This is how you avoid generating a 1800 pixel wide image that's only shown on narrow screens.
+    # Must be arrays.
+    media_widths: 
+      mobile: [200, 400, 600] 
+      tablet: [400, 600, 800]
+
+    # Specifies an optional, unconditional size attribute. Can be given alone, or if specified in
+    # combination with 'sizes' below, will be given last (when no media queries apply).
+    size: 800px
+
+    # For building the 'sizes' attribute on img and source tags. specifies how wide the image will
+    # be when a given media query is true. Note that every source in a given <picture> tag will have
+    # the same associated sizes attribute.
+    sizes: 
+      mobile: 100vw
+      desktop: 60vw
+
+    # Specify the properties of the fallback image. If not specified, will return a 900 pixel
+    # wide image in the original format.
+    fallback_width: 800
+    fallback_format: original
+
+    # Attributes can be added to each HTML element, by type:
+    attributes:
+      picture: 'class="awesome" data-volume="11"'
+      img: 'class="some-other-class"'
+
+  # This is an example of how you would create a 'multiplier' based srcset; useful when an image
+  # will always be the same size on all screens, but you'd like to supply higher resolution images
+  # to devices with higher pixel ratios.
+  icon:
+    base_width: 20
+    pixel_ratios: [1, 1.5, 2]
+    fallback_width: 20
+    attributes:
+      img: 'class="icon"'
+
+  # Here's an example of how you'd configure jekyll-picture-tag to work with something like
+  # lazyload:
+  # https://github.com/verlok/lazyload
+  lazy:
+    markup: data_auto
+    formats: [webp, original]
+    widths: [200, 400, 600, 800]
+    noscript: true # Default: false
+    attributes: 
+      img: class="lazy"
+
+  # This is an example of how you'd get generated image and a URL, and nothing else.
+  direct:
+    markup: direct_url
+    fallback_format: webp # Default original
+    fallback_width: 600 # Default 800

data/examples/post.md

@@ -0,0 +1,18 @@
+---
+layout: post
+title: Tag examples
+---
+
+{% picture portrait.jpg --alt An unsual picture %}
+
+What was the narrative that this representation was meant to embellish and complete? As I regarded
+the work, I slowly sensed that the underlying tale was the picture itself. The painting wasn’t the
+extension of a story at all, it was something in its own right.
+
+### Variations
+
+With a preset specified:
+{% picture gallery portrait.jpg --alt An unsual picture --picture data-downloadable="true" %}
+
+With an alternate source images:
+{% picture half portrait.jpg tablet: dream-midrange.jpg desktop: dream-fullpage.jpg --alt An unsual picture --picture data-downloadable="true" %}

data/jekyll_picture_tag.gemspec

@@ -0,0 +1,39 @@
+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         = ['hello@robwierzbowski.com', 'brendan@tobolaski.com',
+                        '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.
+  HEREDOC
+  spec.homepage      = 'https://github.com/robwierzbowski/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 'mini_magick', '~> 4'
+  spec.add_dependency 'objective_elements', '~> 1.1'
+
+  spec.add_runtime_dependency 'jekyll', '< 4'
+end

data/lib/jekyll_picture_tag.rb

@@ -0,0 +1,67 @@
+require 'objective_elements'
+
+require_relative 'jekyll_picture_tag/generated_image'
+require_relative 'jekyll_picture_tag/source_image'
+require_relative 'jekyll_picture_tag/instructions'
+require_relative 'jekyll_picture_tag/output_formats'
+require_relative 'jekyll_picture_tag/srcsets'
+require_relative 'jekyll_picture_tag/utils'
+require_relative 'jekyll_picture_tag/version'
+
+module PictureTag
+  ROOT_PATH = __dir__
+  # Title: Jekyll Picture Tag
+  # Authors: Rob Wierzbowski   : @robwierzbowski
+  #          Justin Reese      : @justinxreese
+  #          Welch Canavan     : @xiwcx
+  #          Robert Buchberger : @celeritas_5k
+  #
+  # Description: Easy responsive images for Jekyll.
+  #
+  # Download: https://github.com/robwierzbowski/jekyll-picture-tag
+  # Documentation: https://github.com/robwierzbowski/jekyll-picture-tag/readme.md
+  # Issues: https://github.com/robwierzbowski/jekyll-picture-tag/issues
+  #
+  # Syntax:
+  #   {% picture [preset] img.jpg [media_query: alt-img.jpg] [attr="value"] %}
+  #
+  # Example:
+  #   {% picture poster.jpg --alt The strange case of responsive images %}
+  #   {% picture gallery poster.jpg source_small: poster_closeus.jpg
+  #   alt="The strange case of responsive images" class="gal-img" %}
+  #
+  # See the documentation for full configuration and usage instructions.
+  class Picture < Liquid::Tag
+    def initialize(tag_name, raw_params, tokens)
+      @raw_params = raw_params
+      super
+    end
+
+    def render(context)
+      # We can't initialize the tag until we have a context.
+      PictureTag.init(@raw_params, context)
+
+      # Return a string:
+      build_markup.to_s
+    end
+
+    private
+
+    # Super clever metaprogramming. It's the dynamic version of MyClass.new;
+    # instantiate the class defined in our config.
+    def build_markup
+      Object.const_get(output_class).new
+    end
+
+    # This is the class name of whichever output format we are selecting:
+    def output_class
+      'PictureTag::OutputFormats::' + titleize(PictureTag.preset['markup'])
+    end
+
+    def titleize(input)
+      input.split('_').map(&:capitalize).join
+    end
+  end
+end
+
+Liquid::Template.register_tag('picture', PictureTag::Picture)

data/lib/jekyll_picture_tag/defaults/global.yml

@@ -0,0 +1,10 @@
+# Default settings for _config.yml
+picture:
+  source: ''
+  output: generated
+  suppress_warnings: false
+  relative_url: true
+  nomarkdown: true
+
+url: ''
+baseurl: ''

data/lib/jekyll_picture_tag/defaults/presets.yml

@@ -0,0 +1,7 @@
+markup: auto
+formats: [original]
+widths: [400, 600, 800, 1000]
+fallback_width: 800
+fallback_format: original
+noscript: false
+link_source: false

data/lib/jekyll_picture_tag/generated_image.rb

@@ -0,0 +1,66 @@
+# Generated Image
+# Represents a generated source file.
+class GeneratedImage
+  require 'mini_magick'
+  require 'fastimage'
+
+  def initialize(source_file:, width:, format:)
+    @source = source_file
+    @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 << @source.digest
+    name << '.' + @format
+  end
+
+  def absolute_filename
+    @absolute_filename ||= File.join(PictureTag.config.dest_dir, name)
+  end
+
+  def width
+    @size[: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.auto_orient
+      i.strip
+    end
+
+    image.format @format
+
+    check_dest_dir
+
+    image.write absolute_filename
+  end
+
+  # Make sure destination directory exists
+  def check_dest_dir
+    dir = File.dirname absolute_filename
+    FileUtils.mkdir_p(dir) unless Dir.exist?(dir)
+  end
+end

data/lib/jekyll_picture_tag/instructions.rb

@@ -0,0 +1,105 @@
+require_relative './instructions/configuration'
+require_relative './instructions/html_attributes'
+require_relative './instructions/preset'
+require_relative './instructions/tag_parser'
+
+# Allows us to access settings as methods on PictureTag itself.
+module PictureTag
+  class << self
+    attr_reader :context, :config, :params, :preset, :html_attributes
+
+    def init(raw_tag_params, context)
+      @context = context
+
+      # Create global config (big picture). Config class loads jekyll
+      # data/config files, and the j-p-t defaults from included yml files.
+      @config = Instructions::Configuration.new
+
+      # Parse tag params. We must do this before setting the preset, because
+      # it's one of the params.
+      @params = Instructions::TagParser.new(raw_tag_params)
+
+      # Create preset. Takes preset name from params, merges associated settings
+      # with default values.
+      @preset = Instructions::Preset.new
+
+      # Create HTML attributes. Depends on both the preset and tag params, so
+      # we must do this after creating both.
+      @html_attributes = Instructions::HTMLAttributeSet.new(
+        @params.html_attributes_raw
+      )
+
+      # Keep our generated files
+      Utils.keep_files
+    end
+
+    # Global site data
+    def site
+      @context.registers[:site]
+    end
+
+    # Page which tag is called from
+    def page
+      @context.registers[:page]
+    end
+
+    # Media query presets. It's really just a hash, and there are no default
+    # values, so extracting it to its own class is overkill.
+    def media_presets
+      site.data.dig('picture', 'media_presets') || {}
+    end
+
+    # The rest of the application doesn't care where the instruction logic
+    # resides. For example, I don't want to use PictureTag.config.source_dir and
+    # PictureTag.params.source_images, I just want to use PictureTag.source_dir
+    # and PictureTag.source_images. The following method definitions accomplish
+    # that.
+
+    # At first I thought I'd do some sweet dynamic metaprogramming here, but it
+    # ended up more complicated and clever than convenient. This way is not
+    # strictly DRY, but it's understandable and readable.
+
+    # Config Forwarding
+    def source_dir
+      @config.source_dir
+    end
+
+    def dest_dir
+      @config.dest_dir
+    end
+
+    def build_url(filename)
+      @config.build_url(filename)
+    end
+
+    def build_source_url(filename)
+      @config.build_source_url(filename)
+    end
+
+    def nomarkdown?
+      @config.nomarkdown?
+    end
+
+    # Preset forwarding
+    def widths(media)
+      @preset.widths(media)
+    end
+
+    def fallback_format
+      @preset.fallback_format
+    end
+
+    def fallback_width
+      @preset.fallback_width
+    end
+
+    # Params forwarding
+    def preset_name
+      @params.preset_name
+    end
+
+    def source_images
+      @params.source_images
+    end
+  end
+end