patchwork

an assorted collection of randomness and non-essential remarks
Have at least one original repos where PHP is the dominant language The walrus is no stranger to variety. Use at least 4 different languages throughout all your repos Fork and commit to someone's open source project in need Have a project valued enough to be forked by someone else Have at least three original repos where Ruby is the dominant language Have at least one original repo where Ruby is the dominant language Have at least one original repo where some form of shell script is the dominant language
Endorse tarakanbg on Coderwall Powered by Obtvse

Attributer - Ruby gem for adding width and height attributes to image tags

A new Ruby gem release 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 standards compliance.

Usage

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 => "http://my-domain.com") 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 http://my-domain.com/assets/test.jpg and you already have src="/assets/test.jpg" in your image tag, then you only need to use
(:domain => "http://my-domain.com") 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.

Examples

html = '<img alt="test" class="gallery" src="/assets/test.jpg">'
html.image_attributes(:domain => "http://my-domain.com") 
  # => '<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 => "http://my-domain.com") # =>
    # <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>

As usual the packaged gem is available on rubygems and the source and docs are on github.

Back to Blog