Class: Inkcite::Renderer::Background

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

Overview

Bulletproof background image support courtesy of @stigm via Campaign Monitor backgrounds.cm/

src=YJOX1PC.png bgcolor=#7bceeb height=92 width=120

...

/background

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::SHOW, Responsive::SHOW_INLINE, Responsive::SWITCH, Responsive::SWITCH_UP, Responsive::TOGGLE

Constants inherited from Base

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

Instance Method Summary collapse

Methods inherited from Responsive

presets

Instance Method Details

#render(tag, opt, ctx) ⇒ Object 



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
 
# File 'lib/inkcite/renderer/background.rb', line 13

def render tag, opt, ctx

  html = ''

  if tag == '/background'

    html << '</div>'

    # If VML is enabled, then close the textbox and rect that were created
    # by the opening tags.
    if ctx.vml_enabled?
      html << '{outlook-only}'
      html << '</v:textbox>'
      html << '</v:rect>'
      html << '{/outlook-only}'
    end

    html << '{/td}'
    html << '{/table}'

  else

    # Primary background image
    src = opt[:src]

    # Dimensions
    width = opt[:width]
    height = opt[:height].to_i

    # True if the background image's width should fill the available
    # horizontal space.  Specified by either leaving the width blank or
    # specifying 'fill' or '100%'
    fill_width = width.nil? || width == 'fill' || width == '100%' || width.to_i <= 0

    table = Element.new('table')
    table[:height] = height if height > 0
    table[:width] = (fill_width ? '100%' : width)
    table[:background] = quote(src) unless none?(src)

    # Iterate through the list of the parameters that are copied straight into
    # the internal {table} Helper.  This is a sanitized list of supported
    # parameters to prevent the user from setting things inadvertently that
    # might interfere with the display of the background (e.g. padding)
    TABLE_PASSTHRU_OPS.each do |key|
      val = opt[key]
      table[key] = quote(val) unless none?(val)
    end

    # Determine if a fallback background color has been defined.
    bgcolor = detect_bgcolor(opt)
    table[:bgcolor] = quote(bgcolor) unless none?(bgcolor)

    # Check for a background gradient
    bggradient = detect_bggradient(opt)
    table[:bggradient] = quote(bggradient) unless none?(bggradient)

    td = Element.new('td')

    valign = opt[:valign]
    td[:valign] = valign unless valign.blank?

    html << table.to_helper
    html << td.to_helper

    # VML is only added if it is enabled for the project.
    if ctx.vml_enabled?

      # Get the fully-qualified URL to the image or placeholder image if it's
      # missing from the images directory.  This comes back with quotes around it.
      outlook_src = image_url(opt[OUTLOOK_SRC] || src, opt, ctx, false)

      # True if the height of the background image will fit to content within the
      # background element (specified by omitting the 'height' attribute).
      fit_to_shape = height <= 0

      rect = Element.new('v:rect', { :'xmlns:v' => quote('urn:schemas-microsoft-com:vml'), :fill => quote('t'), :stroke => quote('f') })

      if fill_width

        # The number you pass to 'mso-width-percent' is ten times the percentage you'd like.
        # https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds
        rect.style[:'mso-width-percent'] = 1000

      else
        rect.style[:width] = px(width)

      end

      rect.style[:height] = px(height) unless fit_to_shape

      fill = Element.new('v:fill', { :type => '"tile"', :src => outlook_src, :self_close => true })
      fill[:color] = quote(bgcolor) unless none?(bgcolor)

      textbox = Element.new('v:textbox', :inset => '"0,0,0,0"')
      textbox.style[:'mso-fit-shape-to-text'] = 'True' if fit_to_shape

      html << '{outlook-only}'
      html << rect.to_s
      html << fill.to_s
      html << textbox.to_s
      html << '{/outlook-only}'

      # Flag the context as having had VML used within it.
      ctx.vml_used!

    end

    div = Element.new('div')

    # Font family and other attributes get reset within the v:textbox so allow
    # the font series of attributes to be applied.
    mix_font div, opt, ctx

    # Text alignment within the div.
    mix_text_align div, opt, ctx

    html << div.to_s

  end

  html
end