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:
parent
8e489ac2da
commit
a2bc6f9762
@ -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%;
|
||||||
|
@ -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
41
plugins/image_tag.rb
Normal 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)
|
Loading…
Reference in New Issue
Block a user