Class: Inkcite::Renderer::MobileImage

Inherits:
ImageBase show all
Defined in:
lib/inkcite/renderer/mobile_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

Image swapping technique



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

def render tag, opt, ctx

  # This is a transient, wrapper Element that we're going to use to
  # style the attributes of the object that will appear when the
  # email is viewed on a mobile device.
  img = Element.new('mobile-img')

  mix_dimensions img, opt, ctx

  mix_background img, opt, ctx

  mix_margins img, opt, ctx

  display = opt[:display]
  img.style[:display] = "#{display}" if display && display != BLOCK && display != DEFAULT

  align = opt[:align]
  img.style[:float] = align unless align.blank?

  # Create a custom klass from the mobile image source name.
  klass = klass_name(opt[:src], ctx)

  src = image_url(opt[:src], opt, ctx)
  img.style[BACKGROUND_IMAGE] = "url(#{src})"

  # Initially, copy the height and width into the CSS so that the
  # span assumes the exact dimensions of the image.
  DIMENSIONS.each { |dim| img.style[dim] = px(opt[dim]) }

  mobile = opt[:mobile]

  # For FILL-style mobile images, override the width.  The height (in px)
  # will ensure that the span displays at a desireable size and the
  # 'cover' attribute will ensure that the image fills the available
  # space ala responsive web design.
  # http://www.campaignmonitor.com/guides/mobile/optimizing-images/
  img.style[:width] = '100%' if mobile == FILL

  # Now visualize a span element
  span = Element.new('span')

  mix_responsive span, opt, ctx, IMAGE

  # Add the class that handles inserting the correct background image.
  ctx.media_query << span.add_rule(Rule.new('span', klass, img.style))

  span + '</span>'
end