IrHelper

This gem includes helpers to build the appropriate URLs for images served via an image-resizer instance.

Add this line to your application's Gemfile:

gem 'ir_helper'

And then execute:

$ bundle

Or install it yourself as:

$ gem install ir_helper

Configuring this gem is done via:

IrHelper.configure do |config|
  # add your configuration here...
end

For a rails project this is best done via an initializer.

The available config options are:

This is a required setting.

config.cdn = 'https://my.cdn.com'

This gem comes with all the available modifiers that are supported natively by image-resizer but also allows you add your own modifier strings if you have built custom options into your own implementation.

# config.add_modifier(key, alias='', values=[])
config.add_modifier(:x, :xtra, ['one', 'two'])

As with modifiers you can add more external source options. Natively Facebook, Twitter, Youtube and Vimeo are supported but should you chose to add another to that list you can configure the gem with them

# config.add_source(name, option)
config.add_source(:myspace, :ms_id)

If you need for whatever reason to alias the helper methods provided you can do that via config aswell.

config.add_alias :ir_image_tag, :something_else

You can also override any of the JS method names, including the global object name.

config.add_js_alias :js_class, 'MyAwesomeResizer'
config.add_js_alias :js_image_tag, 'something'

The functionality in this gem has two parts, a ruby view helper and a javascript helper.

You can generate an image tag in the same way the regular helper does, just with adding a valid set of modifiers

<div class="content">
  <%= ir_image_tag('https://s3.amazonaws.com/sample.bucket/path/to/image.jpg', h:200, w:300) %>
  <%= ir_image_tag(fb_uid: 'missnine', s:100) %>
</div>

You can generate a background image string

<div style="<%= ir_background('https://s3.amazonaws.com/sample.bucket/path/to/image.jpg', h:200, w:300) %>"></div>

Or just return the url as needed

<div class="content">
  <%= ir_url('https://s3.amazonaws.com/sample.bucket/path/to/image.jpg', h:200, w:300) %>
</div>

The Javascript helper is generated from the config data as an .erb file on load. So all of the new modifiers or sources added will be reflected, as well as any aliases set.

The JS helper (image_resizer.js) is either attached as a global, or can be loaded via AMD or CommonJS if you are using those techniques. It has the same helper methods as the ruby helper.

<script>
  var imgUrl = 'https://s3.amazonaws.com/sample.bucket/path/to/image.jpg';
  $('#image-tag').append(IR.irImageTag(imgUrl, {s:200}));
  $('#image-bg').attr('style', IR.irBackground(imgUrl, {s:200}));
  $('#image-url').text(IR.irImageTag(imgUrl, {s:200}));
</script>
<div id="image-tag"></div>
<div id="image-bg"></div>
<div id="image-url"></div>

The ruby helpers are tested with RSpec and they can be run with either:

$ guard
$ rspec

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request