LazyLoad带有变量的Jekyll图像
LazyLoad Jekyll images with variables
我正试图延迟加载具有{{page.path}}变量的jekyll图像。不幸的是,当我使用路径并使用硬链接的图像时,可用的jekyll插件会崩溃。我在布局中使用变量在多个页面上显示图像,所以我绝对不想开始使用硬编码的绝对路径。
插件基本上可以处理lazylod类的添加,找到w/h并渲染具有相关类和维度的图像。下面是来自https://gist.github.com/ttscoff/9035690我需要修改什么才能允许将jekyll变量作为路径?或者有没有一种更好的方法来实现我没有想到的懒惰?作为参考,我的img路径通常是:
![My helpful screenshot](/images/{{ page.id }}/1.jpg)
图像标签插件
module Jekyll
class ImageTag < Liquid::Tag
@img = {}
def initialize(tag_name, markup, tokens)
# <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">
if markup =~ /(?:('S+) )?((?:https?:'/'/|'/|'S+'/)'S+)(?:'s+('d+))?(?:'s+('d+))?'s+(.*)?/i
unless $2.nil?
imgclass = $1 || nil
image = $2
width = $3 || nil
height = $4 || nil
title = $5 || nil
@img = {}
@img["class"] = imgclass ? "lazy #{imgclass}" : "lazy"
begin
if image =~ /^(http:'/'/brettterpstra.com|'/)/
image.sub!(/^(http:'/'/brettterpstra.com)?/,"")
@img["data-original"] = image
filename = File.expand_path(File.join(%x{git rev-parse --show-toplevel}.strip,"source"+image))
@img["width"] = width || filename ? %x{sips -g pixelWidth "#{filename}"|awk '{print $2}'}.strip : nil
@img["height"] = height || filename ? %x{sips -g pixelHeight "#{filename}"|awk '{print $2}'}.strip : nil
else
@img["data-original"] = image
@img["width"] = width if width
@img["height"] = height if height
end
rescue
@img["data-original"] = image
@img["width"] = width if width
@img["height"] = height if height
end
@img["src"] = "/images/grey.gif"
if title && title !~ /^['s"]*$/
if /(?:"|')(?<xtitle>[^"']+)?(?:"|')'s+(?:"|')(?<alt>[^"']+)?(?:"|')/ =~ title
@img['title'] = xtitle
@img['alt'] = alt
else
@img['alt'] = title.gsub(/(^["'s]*|["'s]*$)/, '')
end
end
end
end
super
end
def render(context)
unless @img.empty?
if context.registers[:site].config["production"]
@img["src"] = context.registers[:site].config["cdn_url"] + @img["src"]
if @img["data-original"] =~ /^(http:'/'/brettterpstra.com|'/)/
@img["data-original"] = context.registers[:site].config["cdn_url"] + @img["data-original"]
end
end
%Q{<img #{@img.collect {|k,v| "#{k}='"#{v}'"" if v}.join(" ")}>}
else
"Error processing input, expected syntax: {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | '"title text'" ['"alt text'"]] %}"
end
end
end
end
Liquid::Template.register_tag('img', Jekyll::ImageTag)
您可以查看Alexander Farkas lazyzes
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 使用 js 将背景图像设置为 HTML
- Javascript将图像src更改为淡入淡出
- 无法在本地计算机中将画布另存为图像
- 压缩phonegap中ios的图像插件
- LazyLoad带有变量的Jekyll图像