Skip to content

Instantly share code, notes, and snippets.

@elfassy

elfassy/image_tag_helper.rb

Created September 24, 2011 15:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save elfassy/1239460 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save elfassy/1239460 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. elfassy revised this gist Sep 24, 2011. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions image_tag_helper.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,9 @@
    #Orverwrite the image_tag based on the idea from Designer Wall (http://webdesignerwall.com/tutorials/css3-image-styles)

    def image_tag(source, options = {})
    image_width = image_height = nil
    image_width_css = image_height_css = ""

    options.symbolize_keys!

    options[:class] = "image-wrap " + options[:class]
  2. elfassy revised this gist Sep 24, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion image_tag_helper.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ def image_tag(source, options = {})
    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
    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]

  3. elfassy revised this gist Sep 24, 2011. 1 changed file with 10 additions and 4 deletions.
    14 changes: 10 additions & 4 deletions image_tag_helper.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -3,15 +3,21 @@
    def image_tag(source, options = {})
    options.symbolize_keys!

    options[:class] = "image-wrap " + options[:class]

    if size = options.delete(:size)
    options[:width], options[:height] = size.split("x") if size =~ %r{^\d+x\d+$}
    end
    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})

    options[:class] = "image-wrap " + options[:class]
    options[:style] = "position:relative; display:inline-block; background:url(#{super(source)}) no-repeat center center; width: #{options.delete(:width)}; height: #{options.delete(:height)};" + options[:style]

    content_tag("span", super(source, {:style => "opacity: 0;"}) ,options)
    content_tag("span", image_html ,options)

    end

  4. elfassy created this gist Sep 24, 2011.
    21 changes: 21 additions & 0 deletions image_tag_helper.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    #Orverwrite the image_tag based on the idea from Designer Wall (http://webdesignerwall.com/tutorials/css3-image-styles)

    def image_tag(source, options = {})
    options.symbolize_keys!

    if size = options.delete(:size)
    options[:width], options[:height] = size.split("x") if size =~ %r{^\d+x\d+$}
    end


    options[:class] = "image-wrap " + options[:class]
    options[:style] = "position:relative; display:inline-block; background:url(#{super(source)}) no-repeat center center; width: #{options.delete(:width)}; height: #{options.delete(:height)};" + options[:style]

    content_tag("span", super(source, {:style => "opacity: 0;"}) ,options)

    end

    #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;">
    #</span>