class Jekyll::ImageComponent
Constants
- BLANK_IMG
- DEFAULT_TAG_PROPS
Public Instance Methods
encode(string)
click to toggle source
# File lib/jekyll/jelly/components/tags/image.rb, line 15 def encode(string) if (string) string = string.gsub("'", "").gsub('"', '') end return string end
template(context)
click to toggle source
# File lib/jekyll/jelly/components/tags/image.rb, line 23 def template(context) prop = @props alt = encode(prop["alt"]) blazy_class_name = "b-lazy" class_name = prop["class"] height = prop["height"] data_src = BLANK_IMG src = prop["src"] srcset = prop["srcset"] title = encode(prop["title"]) width = prop["width"] responsive = "" default_props = selector_props(DEFAULT_TAG_PROPS) # Responsive # Adds new responsive-based image attributes: srcset and sizes. # The numbers are based on @attribute["width"]. # At the moment, this plugin only supports 1x and 2x pixel-density sizes. # # Learn more about srcset # https://ericportis.com/posts/2014/srcset-sizes/ # if srcset srcset_2x = srcset.to_s.gsub(/\.(?=[^.]*$)/, "@2x.") srcset_1x = srcset.to_s.gsub(/\.(?=[^.]*$)/, "@1x.") # Width-based srcset (Recommended) if (width) # Ensure that width is just a number (just in case) w = width.to_s.gsub("px", "").gsub("%", "").to_i responsive = " srcset=' #{srcset_1x} #{w}w, #{srcset_2x} #{w*2}w ' " responsive += " sizes=' (min-width: 40em) #{w}px, 100vw ' " # Fallback to pixel-density based (if width is not available) else responsive = " srcset=' #{srcset_1x} 1x, #{srcset_2x} 2x ' " end src = srcset_1x end # Set the src for <noscript>. This is important since {% img %} uses # JS lazy-loading by default. noscript_src = src # Non-lazy load if ( prop["lazy"] === false or prop["lazy"] === "false" or prop["skip_lazy"] === true or prop["skip_lazy"] === "true" ) blazy_class_name = "b-skipped" data_src = "" src = src else data_src = src src = BLANK_IMG end render = " <img alt='#{alt}' class='#{blazy_class_name} #{class_name}' data-src='#{data_src}' height='#{height}' src='#{src}' width='#{width}' title='#{title}' #{responsive} #{default_props} /> " unless(prop["skip_noscript"]) # Add the <noscript> image for lazy-loaded images. if (src === BLANK_IMG) render += " <noscript> <img alt='#{alt}' class='#{class_name}' height='#{height}' src='#{noscript_src}' title='#{title}' width='#{width}' #{responsive} #{default_props} /> </noscript> " end end return render end