m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00
Code

picture tag update

Browse Source
This commit is contained in:
Matthias Kretschmann 2014-07-02 13:56:42 +02:00
parent 490339142a
commit fbf8603d79
2 changed files with 14 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -53,7 +53,7 @@ keep_files: ['media', 'gen']
picture:
source: "_media"
output: "media/gen"
markup: "picturefill"
markup: "picture"
presets:
default:
ppi: [1, 2]

45
_src/_plugins/picture_tag.rb
View File

@ -142,53 +142,34 @@ module Jekyll
# Generate resized images
instance.each { |key, source|
instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'])
instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'], site.config["baseurl"])
}
# Construct and return tag
if settings['markup'] == 'picturefill'
if settings['markup'] == 'picture'
source_tags = ''
# Picturefill uses reverse source order
# Reference: https://github.com/scottjehl/picturefill/issues/79
source_keys.reverse.each { |source|
media = " data-media=\"#{instance[source]['media']}\"" unless source == 'source_default'
source_tags += "#{markdown_escape * 4}<span data-src=\"#{instance[source][:generated_src]}\"#{media}></span>\n"
source_keys.each { |source|
media = " media=\"#{instance[source]['media']}\"" unless source == 'source_default'
source_tags += "#{markdown_escape * 4}<source srcset=\"#{instance[source][:generated_src]}\"#{media}>\n"
}
# Note: we can't indent html output because markdown parsers will turn 4 spaces into code blocks
# Note: Added backslash+space escapes to bypass markdown parsing of indented code below -WD
picture_tag = "<span #{html_attr_string}>\n"\
picture_tag = "<picture>\n"\
"#{source_tags}"\
"#{markdown_escape * 4}<noscript>\n"\
"#{markdown_escape * 6}<img src=\"#{instance['source_default'][:generated_src]}\" alt=\"#{html_attr['data-alt']}\">\n"\
"#{markdown_escape * 4}</noscript>\n"\
"#{markdown_escape * 2}</span>\n"
"#{markdown_escape * 4}<img srcset=\"#{instance['source_default'][:generated_src]}\" #{html_attr_string}>\n"\
"#{markdown_escape * 2}</picture>\n"
elsif settings['markup'] == 'picture'
source_tags = ''
source_keys.each { |source|
if source == 'source_default'
source_tags += "#{markdown_escape * 4}<img src=\"#{instance[source][:generated_src]}\" alt=\"#{html_attr['alt']}\">\n"
else
source_tags += "#{markdown_escape * 4}<source src=\"#{instance[source][:generated_src]}\" media=\"#{instance[source]['media']}\">\n"
end
}
# Note: we can't indent html output because markdown parsers will turn 4 spaces into code blocks
picture_tag = "<picture #{html_attr_string}>\n"\
"#{source_tags}"\
"#{markdown_escape * 4}<p>#{html_attr['alt']}</p>\n"\
"#{markdown_escape * 2}</picture>"
elsif settings['markup'] == 'img'
# TODO implement <img srcset/sizes>
end
# Return the markup!
picture_tag
end
def generate_image(instance, site_source, site_dest, image_source, image_dest)
def generate_image(instance, site_source, site_dest, image_source, image_dest, baseurl)
image = MiniMagick::Image.open(File.join(site_source, image_source, instance[:src]))
digest = Digest::MD5.hexdigest(image.to_blob).slice!(0..5)
@ -223,7 +204,7 @@ module Jekyll
gen_height = if orig_ratio > gen_ratio then orig_height else orig_width/gen_ratio end
end
gen_name = "#{basename}-#{gen_width.round}*#{gen_height.round}-#{digest}#{ext}"
gen_name = "#{basename}-#{gen_width.round}by#{gen_height.round}-#{digest}#{ext}"
gen_dest_dir = File.join(site_dest, image_dest, image_dir)
gen_dest_file = File.join(gen_dest_dir, gen_name)
@ -249,7 +230,7 @@ module Jekyll
end
# Return path relative to the site root for html
Pathname.new(File.join('/', image_dest, image_dir, gen_name)).cleanpath
Pathname.new(File.join(baseurl, image_dest, image_dir, gen_name)).cleanpath
end
end
end