octo-captioned-image 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e29c820c38696a033e556886c7be11e3970c24bf
+  data.tar.gz: ebe27f212dcbdaf79713e0c87245fafccbcfe9de
+SHA512:
+  metadata.gz: ea78442d170e734541bf1dbadc0cc30a1a9d2e9ee10837cf4ad7a05cad6bb50e6da2da8d42aafa47a2be1a33264a4bd90644b98a4238a4066b605eb664ec8f6e
+  data.tar.gz: f51146762929e60edcfdd87d3623a104ad33e6cd19c755a7e0af003988e6f8e617dff384a68f198b611d3c35ad6111896f6e81d089186e4532dbceabba1a50e8

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+### 1.0.0 (2015-04-13)
+
+- Initial release

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 Andrew Esler
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,161 @@
+# Octopress Captioned Image
+
+An Octopress ink plugin for creating captioned images.
+
+[![Build Status](https://travis-ci.org/ajesler/octo-captioned-image.svg?branch=master)](https://travis-ci.org/ajesler/octo-captioned-image)
+
+## Example
+
+![Example Usage](https://github.com/ajesler/octo-captioned-image/raw/master/captioned-image-example.png)
+
+is produced by 
+
+```
+{% captioned_image /images/kitten.jpeg "a kitten!" float:"left" chrome %}
+{% captioned_image /images/ijen-fire.jpg "Fire on Mt Ijen by Dennis Stauffer via Flickr" float:"left" position:"bottom" chrome %}
+```
+
+## Installation
+
+If you're using bundler add this gem to your site's Gemfile in the `:jekyll_plugins` group:
+
+    group :jekyll_plugins do
+      gem 'octo-captioned-image'
+    end
+
+Then install the gem with Bundler
+
+    $ bundle
+
+To install manually without bundler:
+
+    $ gem install octo-captioned-image
+
+Then add the gem to your Jekyll configuration.
+
+    gems:
+      - octo-captioned-image
+
+If you're using a standard Jekyll theme, add `{% css_asset_tag %}` to your site layout.  
+
+
+## Syntax
+
+```
+{% captioned_image src caption [width height] [position:top|bottom] [float:left|right] [clear:left|right|both] %}
+```
+
+### Properties
+
+`src` and `caption` are required, the rest of the properties are optional.  
+Please note that both width and height must be given or neither given. `auto` can be used as a width and height value.
+
+* `src`  
+this is required and can be an absolute or relative path.
+* `caption`  
+this is required and must be surrounded by `"` or `'`. Any usages of the surrounding quote type (`"` or `'`) in the caption must be escaped like `\"` or `\'`. If you surrounded the caption with `"` then `'` in the caption do not need to be escaped, and vice versa.
+* `width`  
+no default value
+* `height`  
+no default value
+* `float`  
+no default value
+* `clear`  
+no default value
+* `position`  
+defaults to `top`  
+* `chrome`  
+has no value, but if present will add a gradient background to the caption.
+
+
+## Examples
+
+```
+{% captioned_image {{site.url}}/images/puppies.png "Look at the puppies!" %}
+
+{% captioned_image {{site.url}}/images/adventure_awaits.gif "Adventure awaits!" float:"left" clear:"right" %}
+
+{% captioned_image {{site.url}}/images/sad_robot.png "This is why we dont let machines have feelings" 1000px 500px position:bottom float:"left" clear:"right" chrome %}
+
+{% captioned_image {{site.url}}/images/unimportant.jpg "And I said \"O'Leary is a fun guy!\"" clear:"both" position:"bottom" %}
+
+// you can also embed html into the caption
+// note that you will be need to careful with the html quotes.
+{% captioned_image {{site.url}}/images/circuit-schematic.png "Circuit schematic - created with <a href='https://fritzing.org'>fritzing</a>" %}
+
+// multiple images in a figure
+// note that all the images will have the same caption, and that any size given will be applied to all images
+{% captioned_image {{site.url}}/images/a-mouse.png {{site.url}}/images/a-bear.png "How to spot the difference between bears and mice" position:"bottom" chrome %}
+```
+
+results in the following html
+
+```html
+<figure class="captioned-image">
+	<figcaption class="caption-top">
+		Look at the puppies!
+	</figcaption>
+	<img src="http://yoursite.com/images/puppies.png" alt="Look at the puppies!">
+</figure>
+
+<figure class="captioned-image float-left clear-right">
+	<figcaption class="caption-top">
+		Adventure awaits!
+	</figcaption>
+	<img src="http://yoursite.com/images/adventure_awaits.gif" alt="Adventure awaits!">
+</figure>
+
+<figure class="captioned-image-chrome float-left clear-right">
+	<img src="http://yoursite.com/images/sad_robot.png" alt="This is why we dont let machines have feelings" width="1000px" height="500px">
+	<figcaption class="caption-bottom-chrome">
+		This is why we dont let machines have feelings
+	</figcaption>
+</figure>
+
+<figure class="captioned-image clear-both">
+	<img src="http://yoursite.com/images/unimportant.jpg" alt="And I said &quot;O'Leary is a fun guy!&quot;" width="1000px" height="500px">
+	<figcaption class="caption-bottom">
+		And I said &quot;O'Leary is a fun guy!&quot;
+	</figcaption>
+</figure>
+
+<figure class="captioned-image">
+  <figcaption class="caption-top">
+    Circuit schematic - created with <a href='http://fritzing.org'>fritzing</a>
+  </figcaption>
+  <img src="http://yoursite.com/images/circuit-schematic.png" alt="Circuit schematic - created with <a href='http://fritzing.org'>fritzing</a>" />
+</figure>
+
+<figure class="captioned-image-chrome">
+  <img src="http://yoursite.com/images/a-mouse.png" alt="How to spot the difference between bears and mice" />
+  <img src="http://yoursite.com/images/a-bear.png" alt="How to spot the difference between bears and mice" />
+  <figcaption class="caption-bottom-chrome">
+    How to spot the difference between bears and mice
+  </figcaption>
+</figure>
+```
+
+## Customisation
+
+To customise the styling, copy the stylesheet into your _plugins directory with the following command. You can then edit it and override the default styles.
+
+```
+octopress ink copy octo-captioned-image --stylesheets
+```
+
+## Testing
+
+There are two sets of tests; caption extraction/option parsing logic, and a rendered output check.
+
+```
+rake test
+bundle exec clash test
+```
+
+## Contributing
+
+1. Fork it ( https://github.com/ajesler/octo-captioned-image/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/assets/stylesheets/main.scss

@@ -0,0 +1,74 @@
+figure.captioned-image {
+	padding: 0;
+	margin: 1em 1em;
+	border: 0;
+	display: table;
+	font-size: 0.8em;
+}
+
+figure.captioned-image-chrome {
+	@extend figure.captioned-image;
+	border: 1px solid #cbcbcb;
+}
+
+figure.captioned-image img {
+	margin: 0;
+	padding: 0;
+}
+
+figcaption.captioned-image-caption {
+	margin: 0;
+	padding: 0;
+	position: relative;
+	text-align: center;
+	line-height: 2em;
+	display: table-caption;
+}
+
+figcaption.caption-top {
+	@extend figcaption.captioned-image-caption;
+	caption-side: top;
+}
+
+figcaption.caption-top-chrome {
+	@extend figcaption.caption-top;
+	text-shadow: rgba(255,255,255,0.8) 0 1px 0;
+	color: #474747;
+	background-color: #ccc;
+	background-image: linear-gradient(#fff, #f0f0f0 6%, #e5e5e5 90%, #e5e5e5);
+	border: 1px solid #cbcbcb;
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+figcaption.caption-bottom {
+	@extend figcaption.captioned-image-caption;
+	caption-side: bottom;
+}
+
+figcaption.caption-bottom-chome {
+	@extend figcaption.caption-bottom;
+	margin: -5px 0 0 0;
+	caption-side: bottom;
+	border-top-left-radius: 0px;
+	border-top-right-radius: 0px;
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	background-image: linear-gradient(#f0f0f0, #e5e5e5 90%, #e5e5e5);
+}
+
+figure.clear-both {
+	clear: both;
+}
+figure.clear-left {
+	clear: left;
+}
+figure.clear-right {
+	clear: right;
+}
+figure.float-left {
+	float: left;
+}
+figure.float-right {
+	float: right;
+}

data/lib/octo-captioned-image.rb

@@ -0,0 +1,85 @@
+require "octo-captioned-image/version"
+require "octo-captioned-image/caption_extractor"
+require "octo-captioned-image/caption_options_parser"
+require "octopress-ink"
+
+module Octopress
+  module Tags
+    module CaptionedImageTag
+      class Tag < Liquid::Tag
+        # most of this class is copied from 
+        # https://github.com/octopress/video-tag/blob/master/lib/octopress-video-tag.rb
+
+        def initialize(tag_name, markup, tokens)
+          @markup = markup
+          super
+        end
+
+        def render(context)
+          @markup = process_liquid(context) # what is this doing? should not replace markup
+
+          caption, remaining_markup = extract_caption(@markup)
+          options = parse_options(remaining_markup)
+
+          figure_classes = ["captioned-image#{'-chrome' if options.chrome}"]
+          figure_classes << "float-#{options.float}" if options.float
+          figure_classes << "clear-#{options.clear}" if options.clear
+          figure_class_decl = " class=\"#{figure_classes.join(' ')}\""
+
+          img_attributes = ""
+          img_attributes += "width=\"#{options.width}\" " if options.width
+          img_attributes += "height=\"#{options.height}\" " if options.height
+
+          figcaption_class = "caption-#{options.position}"
+          figcaption_class += "-chrome" if options.chrome
+
+          fig_caption = ["  <figcaption class=\"#{figcaption_class}\">"]
+          fig_caption << "    #{caption}"
+          fig_caption << "  </figcaption>"
+
+          image = options.source.map do |src| 
+            # should this caption be escaped if it contains html or quotes?
+            ["  <img src=\"#{src}\" alt=\"#{caption}\" #{img_attributes}/>"]
+          end
+
+          figure_content = options.position == "top" ? fig_caption + image : image + fig_caption
+
+          figure = ["<figure#{figure_class_decl}>"]
+          figure += figure_content
+          figure << "</figure>"
+
+          return figure.join("\n")
+        end
+
+        def extract_caption(markup)
+          # the markup other methods use to find params has the caption removed to avoid parsing issues
+          caption, remaining_markup = CaptionExtractor.extract(markup)
+          return caption, remaining_markup
+        end
+
+        def parse_options(option_string)
+          CaptionOptionsParser.new(option_string)
+        end
+
+        def process_liquid(context)
+          Liquid::Template.parse(@markup).render!(context.environments.first)
+        end
+      end
+    end
+  end
+end
+
+Liquid::Template.register_tag('captioned_image', Octopress::Tags::CaptionedImageTag::Tag)
+
+Octopress::Ink.add_plugin({
+  name:        "Octopress Captioned Image",
+  gem:         "octo-captioned-image",
+  path:        File.expand_path(File.join(File.dirname(__FILE__), "../")),
+  type:        "plugin",
+
+  # Metadata which is displayed with plugin info
+  version:     Octopress::Tags::CaptionedImageTag::VERSION,
+  description: "Create captioned images",
+  source_url:  "https://github.com/ajesler/octo-captioned-image",
+  website:     "https://github.com/ajesler/octo-captioned-image"                                
+})

data/lib/octo-captioned-image/caption_extractor.rb

@@ -0,0 +1,60 @@
+module Octopress
+  module Tags
+    module CaptionedImageTag
+      class CaptionExtractor
+
+      	QSINGLE = "'"
+        QDOUBLE = '"'
+
+      	def self.extract(markup)
+
+      		# find the first quote instance 
+          c, start = caption_start(markup)
+
+          partial = markup[start+1..-1]
+        	fin = -1
+        	caption = nil
+
+          partial.chars.each_with_index do |v,i|
+          	if v == c && partial[i-1] != '\\'
+          		fin = i
+          		caption = partial[0..fin-1]
+          		break
+          	end
+          end
+
+          # remove the comment string from @mutable_markup
+          remainder = markup[0..(start-1)]+markup[(start+fin+2)..-1]
+
+          # swap " -> " and ' -> ' in caption
+          if c == QDOUBLE
+            caption.gsub!("\\#{QDOUBLE}", """)
+          else
+            caption.gsub!("\\#{QSINGLE}", "'")
+          end
+
+      		return caption, remainder
+      	end
+
+      	private
+
+      	def self.caption_start(markup)
+          di = markup.index(QDOUBLE)
+          si = markup.index(QSINGLE)
+
+          if di && si && di < si
+            return QDOUBLE, di
+          elsif di && si && si < di
+            return QSINGLE, si
+          elsif di && !si
+            return QDOUBLE, di
+          elsif si && !di
+            return QSINGLE, si
+          else
+            raise "Could not find a quoted caption in #{@markup}"
+          end
+        end
+      end
+	  end
+	end
+end

data/lib/octo-captioned-image/caption_options_parser.rb

@@ -0,0 +1,59 @@
+module Octopress
+  module Tags
+    module CaptionedImageTag
+    	class CaptionOptionsParser
+
+    		attr_reader :position, :width, :height, :source, :float, :clear, :chrome
+    		DEFAULT_POSITION = "top"
+
+    		Source   = /((https?:\/\/|\/)\S+\.(png|gif|bmp|jpe?g)\S*)/i
+        Dimensions    = /\s(auto|\d\S+)/i
+        Position  = /(:?position:\s*"?(:?\w+))/i
+        Float  = /(:?float:\s*"?(:?\w+))/i
+        Clear  = /(:?clear:\s*"?(:?\w+))/i
+        Chrome = /chrome/
+
+    		def initialize(markup)
+    			@markup = markup
+
+    			parse_source
+    			raise "No source image (png, gif, bmp, or jpeg) found in #{@markup}" unless @source
+
+    			parse_position
+    			parse_float
+    			parse_clear
+    			parse_dimensions
+    			parse_chrome
+    		end
+
+    		private
+
+        def parse_source
+          @source = @markup.scan(Source).map(&:first).compact
+        end
+
+        def parse_position
+          @position = @markup.scan(Position).flatten.last || DEFAULT_POSITION
+        end
+
+        def parse_float
+          @float = @markup.scan(Float).flatten.last
+        end
+
+        def parse_clear
+          @clear = @markup.scan(Clear).flatten.last
+        end
+
+        def parse_dimensions
+          dimensions = @markup.scan(Dimensions).map(&:first).compact
+          @width = dimensions[0]
+          @height = dimensions[1]
+        end
+
+				def parse_chrome
+          @chrome = @markup =~ Chrome
+        end
+    	end
+    end
+  end
+end

data/lib/octo-captioned-image/version.rb

@@ -0,0 +1,7 @@
+module Octopress
+  module Tags
+    module CaptionedImageTag
+      VERSION = "1.0.0"
+    end
+  end
+end

metadata

@@ -0,0 +1,123 @@
+--- !ruby/object:Gem::Specification
+name: octo-captioned-image
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Andrew Esler
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-05-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: octopress-ink
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.6'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.6'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: clash
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+description: "    octo-captioned-image adds captioned images to octopress v3. It uses
+  the figure and figcaption tags. Styling can be customised. \n"
+email:
+- aj@esler.co.nz
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- assets/stylesheets/main.scss
+- lib/octo-captioned-image.rb
+- lib/octo-captioned-image/caption_extractor.rb
+- lib/octo-captioned-image/caption_options_parser.rb
+- lib/octo-captioned-image/version.rb
+homepage: https://github.com/ajesler/octo-captioned-image
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: Creates captioned images for octopress v3
+test_files: []