Created
May 8, 2012 01:33
-
-
Save sukima/2631877 to your computer and use it in GitHub Desktop.
Jekyll Plugin for easy FancyBox usage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Title: Photos tag for Jekyll | |
# Authors: Devin Weaver | |
# Description: Allows photos tag to place photos as thumbnails and open in fancybox. Uses a CDN if needed. | |
# | |
# ** This only covers the markup. Not the integration of FancyBox ** | |
# | |
# To see an unabridged explination on integrating this with [FancyBox][1] | |
# Please read my [blog post about it][2]. | |
# | |
# [1]: http://fancyapps.com/fancybox/ | |
# [2]: http://tritarget.org/blog/2012/05/07/integrating-photos-into-octopress-using-fancybox-and-plugin/ | |
# | |
# Syntax {% photo filename [tumbnail] [title] %} | |
# Syntax {% photos filename [filename] [filename] [...] %} | |
# If the filename has no path in it (no slashes) | |
# then it will prefix the `_config.yml` setting `photos_prefix` to the path. | |
# This allows using a CDN if desired. | |
# | |
# To make FancyBox work well with OctoPress You need to include the style fix. | |
# In your `source/_include/custom/head.html` add the following: | |
# | |
# {% fancyboxstylefix %} | |
# | |
# Examples: | |
# {% photo photo1.jpg My Photo %} | |
# {% photo /path/to/photo.jpg %} | |
# {% gallery %} | |
# photo1.jpg: my title 1 | |
# photo2.jpg[thumnail.jpg]: my title 2 | |
# photo3.jpg: my title 3 | |
# {% endgallery %} | |
# | |
# Output: | |
# <a href="photo1.jpg" class="fancybox" title="My Photo"><img src="photo1_m.jpg" alt="My Photo" /></a> | |
# <a href="/path/to/photo.jpg" class="fancybox" title="My Photo"><img src="/path/to/photo_m.jpg" alt="My Photo" /></a> | |
# <ul class="gallery"> | |
# <li><a href="photo1.jpg" class="fancybox" rel="gallery-e566c90e554eb6c157de1d5869547f7a" title="my title 1"><img src="photo1_m.jpg" alt="my title 1" /></a></li> | |
# <li><a href="photo2.jpg" class="fancybox" rel="gallery-e566c90e554eb6c157de1d5869547f7a" title="my title 2"><img src="photo2_m.jpg" alt="my title 2" /></a></li> | |
# <li><a href="photo3.jpg" class="fancybox" rel="gallery-e566c90e554eb6c157de1d5869547f7a" title="my title 3"><img src="photo3_m.jpg" alt="my title 3" /></a></li> | |
# </ul> | |
require 'digest/md5' | |
module Jekyll | |
class PhotosUtil | |
def initialize(context) | |
@context = context | |
end | |
def path_for(filename) | |
filename = filename.strip | |
prefix = (@context.environments.first['site']['photos_prefix'] unless filename =~ /^(?:\/|http)/i) || "" | |
"#{prefix}#{filename}" | |
end | |
def thumb_for(filename, thumb=nil) | |
filename = filename.strip | |
# FIXME: This seems excessive | |
if filename =~ /\./ | |
thumb = (thumb unless thumb == 'default') || filename.gsub(/(?:_b)?\.(?<ext>[^\.]+)?$/, "_m.\\k<ext>") | |
else | |
thumb = (thumb unless thumb == 'default') || "#{filename}_m" | |
end | |
path_for(thumb) | |
end | |
end | |
class FancyboxStylePatch < Liquid::Tag | |
def render(context) | |
return <<-eof | |
<!-- Fix FancyBox style for OctoPress --> | |
<style type="text/css"> | |
.fancybox-wrap { position: fixed !important; } | |
.fancybox-opened { | |
-webkit-border-radius: 4px !important; | |
-moz-border-radius: 4px !important; | |
border-radius: 4px !important; | |
} | |
.fancybox-close, .fancybox-prev span, .fancybox-next span { | |
background-color: transparent !important; | |
border: 0 !important; | |
} | |
</style> | |
eof | |
end | |
end | |
class PhotoTag < Liquid::Tag | |
def initialize(tag_name, markup, tokens) | |
if /(?<filename>\S+)(?:\s+(?<thumb>\S+))?(?:\s+(?<title>.+))?/i =~ markup | |
@filename = filename | |
@thumb = thumb | |
@title = title | |
end | |
super | |
end | |
def render(context) | |
p = PhotosUtil.new(context) | |
if @filename | |
"<a href=\"#{p.path_for(@filename)}\" class=\"fancybox\" title=\"#{@title}\"><img src=\"#{p.thumb_for(@filename,@thumb)}\" alt=\"#{@title}\" /></a>" | |
else | |
"Error processing input, expected syntax: {% photo filename [thumbnail] [title] %}" | |
end | |
end | |
end | |
class GalleryTag < Liquid::Block | |
def initialize(tag_name, markup, tokens) | |
# No initializing needed | |
super | |
end | |
def render(context) | |
# Convert the entire content array into one large string | |
lines = super.map(&:strip).join("\n") | |
# Get a unique identifier based on content | |
md5 = Digest::MD5.hexdigest(lines) | |
# split the text by newlines | |
lines = lines.split("\n") | |
p = PhotosUtil.new(context) | |
list = "" | |
lines.each do |line| | |
if /(?<filename>[^\[\]:]+)(?:\[(?<thumb>\S*)\])?(?::(?<title>.*))?/ =~ line | |
list << "<li><a href=\"#{p.path_for(filename)}\" class=\"fancybox\" rel=\"gallery-#{md5}\" title=\"#{title.strip}\">" | |
list << "<img src=\"#{p.thumb_for(filename,thumb)}\" alt=\"#{title.strip}\" /></a></li>" | |
end | |
end | |
"<ul class=\"gallery\">\n#{list}\n</ul>" | |
end | |
end | |
end | |
Liquid::Template.register_tag('photo', Jekyll::PhotoTag) | |
Liquid::Template.register_tag('gallery', Jekyll::GalleryTag) | |
Liquid::Template.register_tag('fancyboxstylefix', Jekyll::FancyboxStylePatch) |
I'm getting the following errors when I try to run jekyll with this installed:
photos_tag.rb:61: undefined (?...) sequence: /(?:_b/ (SyntaxError)
plugins/photos_tag.rb:91: undefined (?...) sequence: /(?\S+)(?:\s+(?\S+))?(?:\s+(?<title>.+))?/
plugins/photos_tag.rb:127: undefined (?...) sequence: /(?[^[]:]+)(?:[(?\S)])?(?::(?<title>.))?/
Any ideas?
@meznak, the regular expressions in this plugin make use of "named matches" which are a feature introduced in ruby 1.9. It looks like you're probably using 1.8
The fix from dbourguignon fixed the problem for me. Running Ruby 1.9.3 with latest octopress version
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I had the same error and changed the GalleryTag render method as :