diff --git a/Gemfile b/Gemfile index 5a03829..4597817 100644 --- a/Gemfile +++ b/Gemfile @@ -1,25 +1,33 @@ -source 'https://rubygems.org' +source "https://rubygems.org" -gem 'rake' +gem "rake" -gem 'fastimage' -gem 'mini_magick' +gem "fastimage" +gem "mini_magick" -gem 'jekyll' -gem 'jekyll-paginate' -gem 'jekyll-archives' -gem 'jekyll-assets' -gem 'jekyll-video-tag' +gem "jekyll" -gem 'jekyll-staging' +group :jekyll_plugins do + gem "jekyll-archives" + gem "jekyll-assets" + gem "jekyll-paginate" + gem "jekyll-picture-tag", + git: "https://github.com/danbee/jekyll-picture-tag.git", + branch: "update-gemspec" + gem "jekyll-video-tag" +end -gem 'octopress', '3.0.12.pre.1' -gem 'octopress-deploy' +gem "jekyll-staging" -gem 'kramdown' +gem "octopress", "3.0.12.pre.1" +gem "octopress-deploy" -gem 'facets' +gem "kramdown" -gem 'uglifier' -gem 'sass' -gem 'bourbon' +gem "facets" + +gem "pry" + +gem "uglifier" +gem "sass" +gem "bourbon" diff --git a/Gemfile.lock b/Gemfile.lock index 06029ac..9b703b4 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,49 +1,67 @@ +GIT + remote: https://github.com/danbee/jekyll-picture-tag.git + revision: 6f74d77c1d0d392e56b06de7ab7d3996912733c9 + branch: update-gemspec + specs: + jekyll-picture-tag (0.3.0) + fastimage (~> 2.1.0) + jekyll (< 4) + mini_magick (~> 4.8.0) + GEM remote: https://rubygems.org/ specs: - addressable (2.4.0) - bourbon (4.2.6) + addressable (2.5.1) + public_suffix (~> 2.0, >= 2.0.2) + bourbon (4.3.4) sass (~> 3.4) thor (~> 0.19) - colorator (0.1) - concurrent-ruby (1.0.0) - execjs (2.6.0) - facets (3.0.0) - fastimage (1.8.1) - addressable (~> 2.3, >= 2.3.5) - ffi (1.9.10) - jekyll (3.1.0) - colorator (~> 0.1) + coderay (1.1.1) + colorator (1.1.0) + concurrent-ruby (1.0.5) + execjs (2.7.0) + extras (0.3.0) + forwardable-extended (~> 2.5) + facets (3.1.0) + fastimage (2.1.0) + ffi (1.9.18) + forwardable-extended (2.6.0) + jekyll (3.5.2) + addressable (~> 2.4) + colorator (~> 1.0) jekyll-sass-converter (~> 1.0) jekyll-watch (~> 1.1) kramdown (~> 1.3) - liquid (~> 3.0) + liquid (~> 4.0) mercenary (~> 0.3.3) + pathutil (~> 0.9) rouge (~> 1.7) safe_yaml (~> 1.0) - jekyll-archives (2.1.0) + jekyll-archives (2.1.1) jekyll (>= 2.4) - jekyll-assets (2.1.2) - fastimage (~> 1.8) - jekyll (~> 3.0) - sprockets (~> 3.3) - sprockets-helpers (~> 1.2) - tilt (~> 2.0) + jekyll-assets (2.3.2) + concurrent-ruby (~> 1.0) + extras (~> 0.2) + fastimage (~> 2.0, >= 1.8) + jekyll (~> 3.1, >= 3.0) + pathutil (>= 0.8) + rack (~> 1.6) + sprockets (~> 3.3, < 3.8) jekyll-paginate (1.1.0) - jekyll-sass-converter (1.4.0) + jekyll-sass-converter (1.5.0) sass (~> 3.4) jekyll-staging (1.0.6) jekyll-video-tag (0.1.0) - jekyll-watch (1.3.1) - listen (~> 3.0) - json (1.8.3) - kramdown (1.9.0) - liquid (3.0.6) - listen (3.0.5) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - mercenary (0.3.5) - mini_magick (4.3.6) + jekyll-watch (1.5.0) + listen (~> 3.0, < 3.1) + kramdown (1.14.0) + liquid (4.0.0) + listen (3.0.8) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + mercenary (0.3.6) + method_source (0.8.2) + mini_magick (4.8.0) octopress (3.0.12.pre.1) jekyll (>= 2.0) mercenary (~> 0.3.2) @@ -56,28 +74,36 @@ GEM colorator octopress-escape-code (2.1.1) jekyll (~> 3.0) - octopress-hooks (2.6.1) + octopress-hooks (2.6.2) jekyll (>= 2.0) - rack (1.6.4) - rake (10.5.0) - rb-fsevent (0.9.7) - rb-inotify (0.9.5) - ffi (>= 0.5.0) - redcarpet (3.3.4) - rouge (1.10.1) + pathutil (0.14.0) + forwardable-extended (~> 2.6) + pry (0.10.4) + coderay (~> 1.1.0) + method_source (~> 0.8.1) + slop (~> 3.4) + public_suffix (2.0.5) + rack (1.6.8) + rake (12.0.0) + rb-fsevent (0.10.2) + rb-inotify (0.9.10) + ffi (>= 0.5.0, < 2) + redcarpet (3.4.0) + rouge (1.11.1) safe_yaml (1.0.4) - sass (3.4.21) - sprockets (3.5.2) + sass (3.5.1) + sass-listen (~> 4.0.0) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + slop (3.6.0) + sprockets (3.7.1) concurrent-ruby (~> 1.0) rack (> 1, < 3) - sprockets-helpers (1.2.1) - sprockets (>= 2.2) - thor (0.19.1) - tilt (2.0.2) + thor (0.20.0) titlecase (0.1.1) - uglifier (2.7.2) - execjs (>= 0.3.0) - json (>= 1.8.0) + uglifier (3.2.0) + execjs (>= 0.3.0, < 3) PLATFORMS ruby @@ -90,12 +116,14 @@ DEPENDENCIES jekyll-archives jekyll-assets jekyll-paginate + jekyll-picture-tag! jekyll-staging jekyll-video-tag kramdown mini_magick octopress (= 3.0.12.pre.1) octopress-deploy + pry rake sass uglifier diff --git a/_config.yml b/_config.yml index c68ced7..c969851 100644 --- a/_config.yml +++ b/_config.yml @@ -1,6 +1,7 @@ --- title: Dan Barber timezone: UTC +baseurl: "" collections: posts: title: Posts @@ -17,10 +18,11 @@ description: Web designer and developer for thoughtbot in London. Drummer and al subscribe_rss: "/atom.xml" -gems: +plugins: - jekyll-paginate - jekyll-archives - jekyll-assets + - jekyll-picture-tag - jekyll_video_tag - bourbon diff --git a/_plugins/picture_tag.rb b/_plugins/picture_tag.rb deleted file mode 100644 index b173f13..0000000 --- a/_plugins/picture_tag.rb +++ /dev/null @@ -1,257 +0,0 @@ -# Title: Jekyll Picture Tag -# Authors: Rob Wierzbowski : @robwierzbowski -# Justin Reese : @justinxreese -# Welch Canavan : @xiwcx -# -# 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] path/to/img.jpg [source_key: path/to/alt-img.jpg] [attr="value"] %} -# Example: {% picture poster.jpg alt="The strange case of responsive images" %} -# {% picture gallery poster.jpg source_small: poster_closeup.jpg -# alt="The strange case of responsive images" class="gal-img" data-selected %} -# -# See the documentation for full configuration and usage instructions. - -require 'fileutils' -require 'pathname' -require 'digest/md5' -require 'mini_magick' -require 'fastimage' - -module Jekyll - - class Picture < Liquid::Tag - - def initialize(tag_name, markup, tokens) - @markup = markup - super - end - - def render(context) - - # Render any liquid variables in tag arguments and unescape template code - render_markup = Liquid::Template.parse(@markup).render(context).gsub(/\\\{\\\{|\\\{\\%/, '\{\{' => '{{', '\{\%' => '{%') - - # Gather settings - site = context.registers[:site] - settings = site.config['picture'] - url = site.config['url'] - markup = /^(?:(?[^\s.:\/]+)\s+)?(?[^\s]+\.[a-zA-Z0-9]{3,4})\s*(?(?:(source_[^\s.:\/]+:\s+[^\s]+\.[a-zA-Z0-9]{3,4})\s*)+)?(?[\s\S]+)?$/.match(render_markup) - preset = settings['presets'][ markup[:preset] ] || settings['presets']['default'] - - raise "Picture Tag can't read this tag. Try {% picture [preset] path/to/img.jpg [source_key: path/to/alt-img.jpg] [attr=\"value\"] %}." unless markup - - # Assign defaults - settings['source'] ||= '.' - settings['output'] ||= 'generated' - settings['markup'] ||= 'picturefill' - - # Prevent Jekyll from erasing our generated files - site.config['keep_files'] << settings['output'] unless site.config['keep_files'].include?(settings['output']) - - # Deep copy preset for single instance manipulation - instance = Marshal.load(Marshal.dump(preset)) - - # Process alternate source images - source_src = if markup[:source_src] - Hash[ *markup[:source_src].gsub(/:/, '').split ] - else - {} - end - - # Process html attributes - html_attr = if markup[:html_attr] - Hash[ *markup[:html_attr].scan(/(?[^\s="]+)(?:="(?[^"]+)")?\s?/).flatten ] - else - {} - end - - if instance['attr'] - html_attr = instance.delete('attr').merge(html_attr) - end - - if settings['markup'] == 'picturefill' - html_attr['data-picture'] = nil - html_attr['data-alt'] = html_attr.delete('alt') - end - - html_attr_string = html_attr.inject('') { |string, attrs| - if attrs[1] - string << "#{attrs[0]}=\"#{attrs[1]}\" " - else - string << "#{attrs[0]} " - end - } - - # Prepare ppi variables - ppi = if instance['ppi'] then instance.delete('ppi').sort.reverse else nil end - # this might work??? ppi = instance.delete('ppi'){ |ppi| [nil] }.sort.reverse - ppi_sources = {} - - # Switch width and height keys to the symbols that generate_image() expects - instance.each { |key, source| - raise "Preset #{key} is missing a width or a height" if !source['width'] and !source['height'] - instance[key][:width] = instance[key].delete('width') if source['width'] - instance[key][:height] = instance[key].delete('height') if source['height'] - } - - # Store keys in an array for ordering the instance sources - source_keys = instance.keys - # used to escape markdown parsing rendering below - markdown_escape = "\ " - - # Raise some exceptions before we start expensive processing - raise "Picture Tag can't find the \"#{markup[:preset]}\" preset. Check picture: presets in _config.yml for a list of presets." unless preset - raise "Picture Tag can't find this preset source. Check picture: presets: #{markup[:preset]} in _config.yml for a list of sources." unless (source_src.keys - source_keys).empty? - - # Process instance - # Add image paths for each source - instance.each_key { |key| - instance[key][:src] = source_src[key] || markup[:image_src] - } - - # Construct ppi sources - # Generates -webkit-device-ratio and resolution: dpi media value for cross browser support - # Reference: http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/ - if ppi - instance.each { |key, source| - ppi.each { |p| - if p != 1 - ppi_key = "#{key}-x#{p}" - - ppi_sources[ppi_key] = { - :width => if source[:width] then (source[:width].to_f * p).round else nil end, - :height => if source[:height] then (source[:height].to_f * p).round else nil end, - 'media' => if source['media'] - "#{source['media']} and (-webkit-min-device-pixel-ratio: #{p}), #{source['media']} and (min-resolution: #{(p * 96).round}dpi)" - else - "(-webkit-min-device-pixel-ratio: #{p}), (min-resolution: #{(p * 96).to_i}dpi)" - end, - :src => source[:src] - } - - # Add ppi_key to the source keys order - source_keys.insert(source_keys.index(key), ppi_key) - end - } - } - instance.merge!(ppi_sources) - end - - # Generate resized images - instance.each { |key, source| - instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'], site.config["baseurl"]) - } - - # Construct and return tag - if settings['markup'] == 'picture' - - source_tags = '' - source_keys.each do |source| - media = " media=\"#{instance[source]['media']}\"" unless source == 'source_default' - source_tags += "#{markdown_escape * 4}\n" - end - - # Note: we can't indent html output because markdown parsers will turn 4 spaces into code blocks - # Note: Added backslash+space escapes to bypass markdown parsing of indented code below -WD - picture_tag = "\n"\ - "#{source_tags}"\ - "#{markdown_escape * 4}\n"\ - "#{markdown_escape * 2}\n" - elsif settings['markup'] == 'interchange' - - interchange_data = Array.new - source_keys.reverse.each do |source| - interchange_data << "[#{url}#{instance[source][:generated_src]}, #{source == 'source_default' ? '(default)' : instance[source]['media']}]" - end - - picture_tag = %Q{\n} - picture_tag += %Q{} - - elsif settings['markup'] == 'img' - # TODO implement - end - - # Return the markup! - picture_tag - end - - def generate_image(instance, site_source, site_dest, image_source, image_dest, baseurl) - begin - digest = Digest::MD5.hexdigest(File.read(File.join(site_source, image_source, instance[:src]))).slice!(0..5) - rescue Errno::ENOENT - warn "Warning:".yellow + " source image #{instance[:src]} is missing." - return "" - end - - image_dir = File.dirname(instance[:src]) - ext = File.extname(instance[:src]) - basename = File.basename(instance[:src], ext) - - size = FastImage.size(File.join(site_source, image_source, instance[:src])) - orig_width = size[0] - orig_height = size[1] - orig_ratio = orig_width*1.0/orig_height - - gen_width = if instance[:width] - instance[:width].to_f - elsif instance[:height] - orig_ratio * instance[:height].to_f - else - orig_width - end - gen_height = if instance[:height] - instance[:height].to_f - elsif instance[:width] - instance[:width].to_f / orig_ratio - else - orig_height - end - gen_ratio = gen_width/gen_height - - # Don't allow upscaling. If the image is smaller than the requested dimensions, recalculate. - if orig_width < gen_width || orig_height < gen_height - undersize = true - gen_width = if orig_ratio < gen_ratio then orig_width else orig_height * gen_ratio end - gen_height = if orig_ratio > gen_ratio then orig_height else orig_width/gen_ratio end - end - - gen_name = "#{basename}-#{gen_width.round}by#{gen_height.round}-#{digest}#{ext}" - gen_dest_dir = File.join(site_dest, image_dest, image_dir) - gen_dest_file = File.join(gen_dest_dir, gen_name) - - # Generate resized files - unless File.exists?(gen_dest_file) - - warn "Warning:".yellow + " #{instance[:src]} is smaller than the requested output file. It will be resized without upscaling." if undersize - - # If the destination directory doesn't exist, create it - FileUtils.mkdir_p(gen_dest_dir) unless File.exist?(gen_dest_dir) - - # Let people know their images are being generated - puts "Generating #{gen_name}" - - image = MiniMagick::Image.open(File.join(site_source, image_source, instance[:src])) - # Scale and crop - image.combine_options do |i| - i.resize "#{gen_width}x#{gen_height}^" - i.gravity "center" - i.crop "#{gen_width}x#{gen_height}+0+0" - end - - image.quality 75 - - image.write gen_dest_file - end - - # Return path relative to the site root for html - Pathname.new(File.join(baseurl, image_dest, image_dir, gen_name)).cleanpath - end - end -end - -Liquid::Template.register_tag('picture', Jekyll::Picture)