Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

Created September 24, 2011 15:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elfassy/1239460 to your computer and use it in GitHub Desktop.
Save elfassy/1239460 to your computer and use it in GitHub Desktop.
better image_tag
#Orverwrite the image_tag based on the idea from Designer Wall (
def image_tag(source, options = {})
image_width = image_height = nil
image_width_css = image_height_css = ""
options[:class] = "image-wrap " + options[:class]
if size = options.delete(:size)
options[:width], options[:height] = size.split("x") if size =~ %r{^\d+x\d+$}
image_width = options.delete(:width) if options[:width].present?
image_height = options.delete(:height) if options[:height].present?
image_width_css = 'width:' + image_width + ';' if image_width
image_height_css = 'height:' + image_height + ';' if image_height
options[:style] = "position:relative; display:inline-block; background:url(#{super(source)}) no-repeat center center; #{image_width_css} #{image_height_css}" + options[:style]
image_html = super(source, {:style => "opacity: 0;", :width => image_width, :height => image_height})
content_tag("span", image_html ,options)
#Example output
#<span class="image-wrap " style="position:relative; display:inline-block; #background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
# <img src="image.jpg" style="opacity: 0;">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment