{{ page.path }} 変数を備えた jekyll 画像を遅延ロードしようとしています。残念ながら、パスを使用し、代わりにハードリンクされたイメージを操作すると、利用可能な jekyll プラグインがうまくいきません。レイアウトで変数を使用して複数のページに画像を表示しているため、ハードコーディングされた絶対パスの使用を開始したくありません。
基本的に遅延ロード クラスの追加を処理し、w/h を見つけ、関連付けられたクラスと寸法で画像をレンダリングするプラグインが利用可能です。以下は、 https: //gist.github.com/ttscoff/9035690のイメージタグ プラグイン です。パスとして jekyll 変数を許可するには、何を変更する必要がありますか? または、私が考えていない遅延ロードを実装するより良い方法はありますか? 参考までに、私の img パスは通常次のとおりです。
画像タグプラグイン
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)