Ruby gem for adding image attributes to HTML blocks
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Ruby gem for adding width and height attributes to image tags within HTML blocks.

This library will parse a piece of HTML, find all the image tags inside it, obtain the width and height of these images and insert them as attributes to the img tag. It will then return the entire HTML with the image attributes properly in place.

Useful for example as a callback with WYSIWYG editors that don't automatically add width and height attributes to images or for instantly optimizing all your old blog or CMS posts with img tag attributes for speed and standarts compliance.

Build Status Gemnasium Gem Version Code Climate


Ruby 1.9.3 or higher | Supports Ruby 2.0!


Add this line to your application's Gemfile:

gem 'attributer'

And then execute:

$ bundle

Or install it yourself as:

$ gem install attributer


This library augments the default Ruby String class with 1 public method: .image_attributes. You can attach this method to a string variable containing a piece of HTML of any length or complexity. This method takes one of 2 mandatory arguments: (:domain => "") or (:path => /my/local/filesystem/path). It will raise an ArgumentError exception if neither argument is passed.

These arguments are only used to locate the images referenced in your HTML and poll their width and height; they are not written in the resulting HTML: the src attribute of the img tag remains unchanged. Either a full local path or a URL prefix is needed.

For discovery purposes these arguments are concatenated to the src attribute of the image tag, i.e. if your images are accessible via and you already have src="/assets/test.jpg" in your image tag, then you only need to use (:domain => "") as an argument.

Likewise if your images are locally accessible via /home/www/site/assets/test.jpg and you already have src="/assets/test.jpg" in your image tag, then you only need to use (:path => "/home/www/site") as an argument.

The .image_attributes method will return a string of the entire HTML block with the image attributes properly in place.


html = '<img alt="test" class="gallery" src="/assets/test.jpg">'
html.image_attributes(:domain => "") 
  # => '<img alt="test" class="gallery" src="/assets/test.jpg" width="200" height="266">'

html = '<img alt="test2" class="fuzzy" src="/images/test2.jpg">'
html.image_attributes(:path => "/home/www/site") 
  # => '<img alt="test2" class="fuzzy" src="/images/test2.jpg" width="340" height="155">'

html = Post.find(20).body # =>
    # <div id='gallery'>
    # <img alt="1" class="gallery" src="/assets/1.jpg" />
    # <img alt="2" class="gallery" src="/assets/2.jpg" />
    # <img alt="3" class="gallery" src="/assets/3.jpg" />
    # <img alt="4" class="gallery" src="/assets/4.jpg" />
    # <img alt="5" class="gallery" src="/assets/5.jpg" />
    # <img alt="6" class="gallery" src="/assets/6.jpg" />
    # <img alt="7" class="gallery" src="/assets/7.jpg" />
    # <img alt="8" class="gallery" src="/assets/8.jpg" />
    # <img alt="9" class="gallery" src="/assets/9.jpg" />
    # <img alt="10" class="gallery" src="/assets/10.jpg" />
    # <img alt="11" class="gallery" src="/assets/11.jpg" />
    # <img alt="12" class="gallery" src="/assets/12.jpg" />
    # <img alt="13" class="gallery" src="/assets/13.jpg" />
    # <img alt="14" class="gallery" src="/assets/14.jpg" />
    # <img alt="15" class="gallery" src="/assets/15.jpg" />
    # <img alt="16" class="gallery" src="/assets/16.jpg" />
    # <img alt="17" class="gallery" src="/assets/17.jpg" />
    # <img alt="18" class="gallery" src="/assets/18.jpg" />
    # <img alt="19" class="gallery" src="/assets/19.jpg" />
    # <img alt="20" class="gallery" src="/assets/20.jpg" />  
    # </div>
html.image_attributes(:domain => "") # =>
    # <div id='gallery'>
    # <img alt="1" class="gallery" src="/assets/1.jpg" width="200" height="266">
    # <img alt="2" class="gallery" src="/assets/2.jpg" width="200" height="266">
    # <img alt="3" class="gallery" src="/assets/3.jpg" width="200" height="266">
    # <img alt="4" class="gallery" src="/assets/4.jpg" width="200" height="266">
    # <img alt="5" class="gallery" src="/assets/5.jpg" width="200" height="266">
    # <img alt="6" class="gallery" src="/assets/6.jpg" width="200" height="266">
    # <img alt="7" class="gallery" src="/assets/7.jpg" width="200" height="266">
    # <img alt="8" class="gallery" src="/assets/8.jpg" width="200" height="266">
    # <img alt="9" class="gallery" src="/assets/9.jpg" width="200" height="266">
    # <img alt="10" class="gallery" src="/assets/10.jpg" width="200" height="266">
    # <img alt="11" class="gallery" src="/assets/11.jpg" width="200" height="266">
    # <img alt="12" class="gallery" src="/assets/12.jpg" width="200" height="266">
    # <img alt="13" class="gallery" src="/assets/13.jpg" width="200" height="266">
    # <img alt="14" class="gallery" src="/assets/14.jpg" width="200" height="266">
    # <img alt="15" class="gallery" src="/assets/15.jpg" width="200" height="266">
    # <img alt="16" class="gallery" src="/assets/16.jpg" width="200" height="266">
    # <img alt="17" class="gallery" src="/assets/17.jpg" width="200" height="266">
    # <img alt="18" class="gallery" src="/assets/18.jpg" width="200" height="266">
    # <img alt="19" class="gallery" src="/assets/19.jpg" width="200" height="266">
    # <img alt="20" class="gallery" src="/assets/20.jpg" width="200" height="266">  
    # </div>


v. 0.1.0 - 1 March 2013

  • Ruby 2.0 compatibility


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Make sure all rspec tests pass!
  5. Push to the branch (git push origin my-new-feature)
  6. Create new Pull Request


Copyright © 2013 Svilen Vassilev

If you find my work useful or time-saving, you can endorse it or buy me a cup of coffee:

endorse Donate

Released under the MIT LICENSE