Class: Inkcite::Renderer::Image

Inherits:
ImageBase show all
Defined in:
lib/inkcite/renderer/image.rb

Constant Summary

Constants inherited from Responsive

Responsive::BUTTON, Responsive::DROP, Responsive::FILL, Responsive::FLUID, Responsive::FLUID_DROP, Responsive::FLUID_STACK, Responsive::HIDE, Responsive::IMAGE, Responsive::MOBILE_BACKGROUND, Responsive::MOBILE_BACKGROUND_COLOR, Responsive::MOBILE_BACKGROUND_IMAGE, Responsive::MOBILE_BACKGROUND_POSITION, Responsive::MOBILE_BACKGROUND_REPEAT, Responsive::MOBILE_BACKGROUND_SIZE, Responsive::MOBILE_BGCOLOR, Responsive::MOBILE_PADDING, Responsive::MOBILE_SRC, Responsive::SHOW, Responsive::SHOW_INLINE, Responsive::SWITCH, Responsive::SWITCH_UP, Responsive::TOGGLE

Constants inherited from Base

Base::BACKGROUND_COLOR, Base::BACKGROUND_GRADIENT, Base::BACKGROUND_IMAGE, Base::BACKGROUND_POSITION, Base::BACKGROUND_REPEAT, Base::BACKGROUND_SIZE, Base::BORDER_BOTTOM, Base::BORDER_COLLAPSE, Base::BORDER_LEFT, Base::BORDER_RADIUS, Base::BORDER_RIGHT, Base::BORDER_SPACING, Base::BORDER_TOP, Base::BOX_SHADOW, Base::DIMENSIONS, Base::DIRECTIONS, Base::FONT_FAMILY, Base::FONT_SIZE, Base::FONT_WEIGHT, Base::LETTER_SPACING, Base::LINE_HEIGHT, Base::LINK_COLOR, Base::MARGIN, Base::MARGIN_BOTTOM, Base::MARGIN_LEFT, Base::MARGIN_RIGHT, Base::MARGIN_TOP, Base::MAX_WIDTH, Base::NONE, Base::PADDING_X, Base::PADDING_Y, Base::POUND_SIGN, Base::TEXT_ALIGN, Base::TEXT_DECORATION, Base::TEXT_SHADOW, Base::TEXT_SHADOW_BLUR, Base::TEXT_SHADOW_OFFSET, Base::VERTICAL_ALIGN, Base::WEBKIT_ANIMATION, Base::WHITE_SPACE, Base::ZERO_WIDTH_NON_BREAKING_SPACE, Base::ZERO_WIDTH_SPACE

Instance Method Summary collapse

Methods inherited from Responsive

presets

Instance Method Details

#render(tag, opt, ctx) ⇒ Object 



5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
131
132
133
134
135
136
137
138
139
140
141
 
# File 'lib/inkcite/renderer/image.rb', line 5

def render tag, opt, ctx

  img = Element.new('img', { :border => 0 })

  # Ensure that height and width are defined in the image's attributes.
  mix_dimensions img, opt, ctx

  mix_background img, opt, ctx
  mix_border img, opt, ctx

  # Check to see if there is alt text specified for this image.  We are
  # testing against nil because sometimes the author desires an empty
  # alt-text attribute.
  alt = opt[:alt]
  if alt

    # Allow "\n" to be placed within alt text and converted into a line
    # break for convenience.
    alt.gsub!('\n', "\n")

    # Need to add an extra space for the email clients (ahem, Gmail,
    # cough) that don't support alt text with line breaks.
    alt.gsub!("\n", " \n")

    # Remove all HTML from the alt text.  Ran into a situation where a
    # custom Helper was applying styled text as image alt text.  Since
    # HTML isn't allowed within alt text, as a convenience we'll just
    # delete said markup.
    alt.gsub!(/<[^>]*>/, '')

    # Ensure that the alt-tag has quotes around it.
    img[:alt] = quote(alt)

    # The rest of this logic is only appropriate if the alt text
    # is not blank.
    unless alt.blank?

      # Copy the text to the title attribute if enabled for this issue
      img[:title] = img[:alt] if ctx.is_enabled?(COPY_ALT_TO_TITLE)

      mix_font img, opt, ctx

      text_align = opt[TEXT_ALIGN]
      img.style[TEXT_ALIGN] = text_align unless text_align.blank?

      # Check to see if the alt text contains line breaks.  If so, automatically add
      # the white-space style set to 'pre' which forces the alt text to render with
      # that line breaks visible.
      # https://litmus.com/community/discussions/418-line-breaks-within-alt-text
      img.style[WHITE_SPACE] = 'pre' if alt.match(/[\n\r\f]/)

    end

  end

  # Images default to block display to prevent unexpected margins in Gmail
  # http://www.campaignmonitor.com/blog/post/3132/how-to-stop-gmail-from-adding-a-margin-to-your-images/
  display = opt[:display] || BLOCK
  img.style[:display] = display unless display == DEFAULT

  # True if the designer wants this image to flow inline.  When true it
  # vertically aligns the image with the text.
  inline = (display == INLINE)

  align = opt[:align] || ('absmiddle' if inline)
  img[:align] = align unless align.blank?

  valign = opt[:valign] || ('middle' if inline)
  img.style[VERTICAL_ALIGN] = valign unless valign.blank?

  html = ''

  # Check to see if an outlook-specific image source has been
  # specified - typically used when there is an animated gif as
  # the main source but a static image for Outlook clients.
  outlook_src = opt[OUTLOOK_SRC]
  unless outlook_src.blank?

    # Initially set the image's URL to the outlook-specific image.
    img[:src] = image_url(outlook_src, opt, ctx)

    # Wrap the image in the outlook-specific conditionals.
    html << if_mso(img)
    html << '{not-outlook}'

  end

  # Get the fully-qualified URL to the image or placeholder image if it's
  # missing from the images directory.
  img[:src] = image_url(opt[:src], opt, ctx)

  mobile_src = opt[:'mobile-src']
  unless mobile_src.blank?

    # Get a unique CSS class name that will be used to swap in the alternate
    # image on mobile.
    klass = klass_name(mobile_src, ctx)

    # Fully-qualify the image URL.
    mobile_src = image_url(mobile_src, opt, ctx, false)

    # Add a responsive rule that replaces the image with a different source
    # with the same dimensions.  Warning, this isn't supported on earlier
    # versions of iOS 6 and Android 4.
    # http://www.emailonacid.com/forum/viewthread/404/
    ctx.media_query << img.add_rule(Rule.new(tag, klass, "content: url(#{mobile_src}) !important;"))

  end

  mobile = opt[:mobile]

  # Fluid-Hybrid responsive images courtesy of @moonstrips and @CourtFantinato.
  # http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919#comment-2074740905
  if mobile == FLUID

    # Set the inline styles of the image to scale with aspect ratio
    # intact up to the maximum width of the image itself.
    img.style[MAX_WIDTH] = px(opt[:width])
    img.style[:width] = '100%'
    img.style[:height] = 'auto'

    # Leave the explicit width attribute set (this prevents Outlook from
    # blowing up) but clear the height attribute as Gmail images will not
    # maintain aspect ratio if present.
    img[:height] = nil

  end

  mix_responsive img, opt, ctx, mobile

  html << img.to_s

  # Conclude the outlook-specific conditional if opened.
  html << '{/not-outlook}' unless outlook_src.blank?

  html
end