Class: Jekyll::ImageComponent

Inherits:
ComponentTag
  • Object
show all
Defined in:
lib/jekyll/jelly/components/tags/image.rb

Constant Summary collapse

DEFAULT_TAG_PROPS = 
[
  "crossorigin",
  "id",
  "ismap",
  "longdesc",
  "style",
  "usemap",
]
BLANK_IMG = 
"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

Instance Method Summary collapse

Instance Method Details

#encode(string) ⇒ Object 



15
16
17
18
19
20
21
 
# 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) ⇒ Object 



23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
# 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