diff options
| -rw-r--r-- | .themes/classic/sass/partials/_blog.scss | 30 | ||||
| -rw-r--r-- | plugins/figure_tag.rb | 69 | ||||
| -rw-r--r-- | plugins/image_tag.rb | 41 | ||||
| -rw-r--r-- | plugins/octopress_filters.rb (renamed from plugins/custom_filters.rb) | 0 |
4 files changed, 65 insertions, 75 deletions
diff --git a/.themes/classic/sass/partials/_blog.scss b/.themes/classic/sass/partials/_blog.scss index 26ad19b4..cc8c6848 100644 --- a/.themes/classic/sass/partials/_blog.scss +++ b/.themes/classic/sass/partials/_blog.scss @@ -42,14 +42,32 @@ article { font-size: 2.0em; font-style: italic; line-height: 1.3em; } - .entry-content { - img, video { max-width: 100%; height: auto; } - video { - width: 100%; display: block; margin-bottom: 1.5em; - padding: .8em; background: #fff; border: 1px solid #eee; - @include box-sizing(border-box); + img { + max-width: 100%; + border: .5em solid #fff; + @include border-radius(.3em); + @include box-shadow(rgba(#000, .15) 0 1px 4px); + @include box-sizing(border-box); + display: block; + margin: 0 auto 1.5em; + &.left { + float: left; + margin-right: 1.5em; + } + &.right { + float: right; + margin-left: 1.5em; + } + &.left, &.right { + margin-bottom: .8em; } } + img, video { max-width: 100%; height: auto; } + video { + width: 100%; display: block; margin-bottom: 1.5em; + padding: .8em; background: #fff; border: 1px solid #eee; + @include box-sizing(border-box); + } .flash-video { max-width: 100%; margin-bottom: 1.5em; diff --git a/plugins/figure_tag.rb b/plugins/figure_tag.rb deleted file mode 100644 index 550e677f..00000000 --- a/plugins/figure_tag.rb +++ /dev/null @@ -1,69 +0,0 @@ -# Title: Simple Image Figure tag for Jekyll -# Author: Brandon Mathis http://brandonmathis.com -# Description: Easily output images in <figure> with an optional <figcaption> and class names. -# -# Syntax {% figure [class name(s)] url [caption text] %} -# -# Example: -# {% figure left half http://site.com/images/ninja.png Ninja Attack! %} -# -# Output: -# <figure class='left half'><img src="http://site.com/images/ninja.png"><figcaption>Ninja Attack!</figcaption></figure> -# -# Example 2 (image with caption) -# {% figure /images/ninja.png Ninja Attack! %} -# -# Output: -# <figure><img src="/images/ninja.png"><figcaption>Ninja Attack!</figcaption></figure> -# -# Example 3 (just an image with classes) -# {% figure right /images/ninja.png %} -# -# Output: -# <figure><img class="right" src="/images/ninja.png"></figure> -# - -module Jekyll - - class FigureImageTag < Liquid::Tag - ClassImgCaption = /(\S[\S\s]*)\s+(https?:\/\/|\/)(\S+)\s+(.+)/i - ClassImg = /(\S[\S\s]*)\s+(https?:\/\/|\/)(\S+)/i - ImgCaption = /^\s*(https?:\/\/|\/)(\S+)\s+(.+)/i - Img = /^\s*(https?:\/\/|\/)(\S+\s)/i - - @img = nil - @caption = nil - @class = '' - - def initialize(tag_name, markup, tokens) - if markup =~ ClassImgCaption - @class = $1 - @img = $2 + $3 - @caption = $4 - elsif markup =~ ClassImg - @class = $1 - @img = $2 + $3 - elsif markup =~ ImgCaption - @img = $1 + $2 - @caption = $3 - elsif markup =~ Img - @img = $1 + $2 - end - super - end - - def render(context) - output = super - if @img - figure = "<figure class='#{@class}'>" - figure += "<img src='#{@img}'>" - figure += "<figcaption>#{@caption}</figcaption>" if @caption - figure += "</figure>" - else - "Error processing input, expected syntax: {% figure [class name(s)] /url/to/image [caption] %}" - end - end - end -end - -Liquid::Template.register_tag('figure', Jekyll::FigureImageTag) diff --git a/plugins/image_tag.rb b/plugins/image_tag.rb new file mode 100644 index 00000000..d7c85925 --- /dev/null +++ b/plugins/image_tag.rb @@ -0,0 +1,41 @@ +# Title: Simple Image tag for Jekyll +# Author: Brandon Mathis http://brandonmathis.com +# Description: Easily output images with optional class names and title/alt attributes +# +# Syntax {% image [class name(s)] url [title text] %} +# +# Example: +# {% imaeg left half http://site.com/images/ninja.png Ninja Attack! %} +# +# Output: +# <image class='left' src="http://site.com/images/ninja.png" title="Ninja Attack!" alt="Ninja Attack!"> +# + +module Jekyll + + class ImageTag < Liquid::Tag + @img = nil + @title = nil + @class = '' + + def initialize(tag_name, markup, tokens) + if markup =~ /(\S.*\s+)?(https?:\/\/|\/)(\S+)(\s+.+)?/i + @class = $1 + @img = $2 + $3 + @title = $4 + end + super + end + + def render(context) + output = super + if @img + figure = "<img class='#{@class}' src='#{@img}' alt='#{@title}' title='#{@title}'>" + else + "Error processing input, expected syntax: {% img [class name(s)] /url/to/image [title text] %}" + end + end + end +end + +Liquid::Template.register_tag('img', Jekyll::ImageTag) diff --git a/plugins/custom_filters.rb b/plugins/octopress_filters.rb index 5b49363b..5b49363b 100644 --- a/plugins/custom_filters.rb +++ b/plugins/octopress_filters.rb |