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;
|
||||
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%;
|
||||
|
@ -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