image.rb

class Image < Rule
  IMG_ATTRIBUTES = [:src, :title, :alt]
  tag 'ars:img'
  description "An image with optional alignment, caption and link.  <strong>Make sure you add a closing tag: &lt;/ars:img&gt;<br />The WYSIWYG editor in Movable Type screws up self closing tags and we wouldn't want to make more work for Eric</strong>."

  required_attributes :src
  optional_attributes :class, :width, :height, :href, :credit, :'credit-href', IMG_ATTRIBUTES

  validate do |node|
    errors = Helpers.validate_container(node)

    if node.search('p').length > 0
      errors << "Image caption cannot contain &lt;p&gt; tags.  Have you closed all your ars:img tags?"
    end

    errors.flatten
  end

  process do |node, contents|
    url = node.attributes['href'].to_s
    style = ''
    unless node.attributes['height'].nil? || node.attributes['height'] == ''
      style += 'height: ' + node.attributes['height'].to_s + 'px;'
    end
    html = "<div class=\"news-item-figure-image\" style=\"#{style}\">" + Helpers.link("<img#{img_attributes(node)} />", url) + "</div>" + Helpers.caption(node, contents)
    Helpers.container(html, node)
  end

  process :rss do |node, contents|
    url = node.attributes['href'].to_s
    html = Helpers.link("<img#{img_attributes(node)} />", url) + Helpers.caption(node, contents, nil, :inline)
    Helpers.container(html, node, :inline)
  end

  def self.img_attributes(node)
    good = node.attributes.to_hash.delete_if{|k,v| !IMG_ATTRIBUTES.include?(k.to_sym) }
    attrs = ''
    good.each{|k,v| attrs += " #{k}=\"#{v}\""}
    attrs
  end


  example "A basic image", '<ars:img src="http://path.to/image.jpg"></ars:img>'
  example "An image with a caption", '<ars:img src="http://path.to/image.jpg">Caption text</ars:img>'
  example "An image with a credit", '<ars:img src="http://path.to/image.jpg" credit="Flying Spaghetti Monster" credit-href="http://fsm.com"></ars:img>'
  example "An image with a caption, floated right", '<ars:img src="http://path.to/image.jpg" class="right">Caption text</ars:img>'
  example "An image with a caption, floated left", '<ars:img src="http://path.to/image.jpg" class="left">Caption text</ars:img>'
  example "A centered image with a caption (width is required)", '<ars:img src="http://path.to/image.jpg" width="400" class="center">This image is centered</ars:img>'
  example "An image that links elsewhere", '<ars:img src="http://path.to/image.jpg" href="http://arstechnica.com/some/article.ars"></ars:img>'
end