Skip to content

Instantly share code, notes, and snippets.

@brandonb927
Last active Mar 2, 2018
Embed
What would you like to do?
Jekyll picture tag support
module Jekyll
class RenderPictureElement < Liquid::Tag
def initialize(tag_name, markup, tokens)
super
@markup = markup
end
def render(context)
site = context.registers[:site]
@base_url = site.config['baseurl']
@site_url = site.config['url']
@assets_images = site.config['assets_images']
@attributes = {}
@markup.scan(Liquid::TagAttributes) do |key, value|
@attributes[key] = value.gsub(/^'|"/, '').gsub(/'|"$/, '')
end
# Get the 1x path
@image1x = @attributes['src']
@alt_text = @attributes['alt'] ? "alt=\"#{@attributes['alt']}\"" : ''
if @image1x.include? "http" or @image1x.include? "https"
"""
<figure>
<a href=\"#{@image1x}\" target=\"_blank\">
<picture>
<source
srcset=\"#{@image1x}\">
<img
src=\"#{@image1x}\"
srcset=\"#{@image1x}\"
#{@alt_text}>
</picture>
</a>
</figure>
""".strip
else
# Build the 2x image path from the 1x path
@image2x_array = @image1x.split('.')
@filename2x = "#{@image2x_array[0]}@2x"
@image2x = "#{@filename2x}.#{@image2x_array[1]}"
# Replace the images with the proper urls
# @image1x = "#{@site_url}#{@base_url}#{@assets_images}/#{@image1x}"
# @image2x = "#{@site_url}#{@base_url}#{@assets_images}/#{@image2x}"
@image1x = "#{@assets_images}/#{@image1x}"
@image2x = "#{@assets_images}/#{@image2x}"
"""
<figure>
<a href=\"#{@image1x}\" target=\"_blank\">
<picture>
<source
srcset=\"#{@image1x}, #{@image2x} 2x\">
<img
src=\"#{@image1x}\"
srcset=\"#{@image1x}, #{@image2x} 2x\"
#{@alt_text}>
</picture>
</a>
</figure>
""".strip
end
end
end
end
Liquid::Template.register_tag('picture', Jekyll::RenderPictureElement)

Usage

{% picture src:image-name.jpg %}
{% picture src:image-name.jpg alt:"Some alt text" %}
{% picture src:http://example.com/image-name.jpg alt:"Some alt text" %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment