1. Added image tag plugin

2. Removed figure tag plugin
3. Renamed custom_filters to octopress_filters
4. Added styles to support new image tag plugin
This commit is contained in:
Brandon Mathis 2011-07-23 00:23:50 -04:00
parent 8e489ac2da
commit a2bc6f9762
4 changed files with 65 additions and 75 deletions

View File

@ -42,13 +42,31 @@ article {
font-size: 2.0em; font-style: italic; font-size: 2.0em; font-style: italic;
line-height: 1.3em; line-height: 1.3em;
} }
.entry-content { img {
img, video { max-width: 100%; height: auto; } max-width: 100%;
video { border: .5em solid #fff;
width: 100%; display: block; margin-bottom: 1.5em; @include border-radius(.3em);
padding: .8em; background: #fff; border: 1px solid #eee; @include box-shadow(rgba(#000, .15) 0 1px 4px);
@include box-sizing(border-box); @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 { .flash-video {
max-width: 100%; max-width: 100%;

View File

@ -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)

41
plugins/image_tag.rb Normal file
View File

@ -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)