class Inkcite::Renderer::MobileImage

Public Instance Methods

render(tag, opt, ctx) click to toggle source

Image swapping technique

# 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, false

  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]) }

  # Image borders on mobile
  mix_border img, opt, ctx

  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