Rails asset pipeline retina @2x and cache buster timestamps are at odds

Question

retina.js looks for an image with the same filename but with @2x before the file extension

The rails asset pipeline adds a cache busting timestamp to the end of the filename

This means retina.js is looking for [email protected] but the file is at [email protected]

Anyone have a work around for this?

Who's wrong on this ie, should retina.js be trained to look for files at [email protected] if the original filename matches a pattern that indicates it has a cache busting hash, or should the rails pipeline be changed to ensure the @2x is always just before the file extension?

Answer 1

This seems like a bit of work around in and of itself but looks like the correct way to do this is:

<%= image_tag('image', retina: true) %>

and this will add the correct data-at2x attribute that retina.js will pick up

Answer 2

The retina.js documentation suggests using a rails helper method:

def image_tag_with_at2x(name_at_1x, options={})
  name_at_2x = name_at_1x.gsub(%r{\.\w+$}, '@2x\0')
  image_tag(name_at_1x, options.merge("data-at2x" => asset_path(name_at_2x)))
end

For more information check the retina.js documentation.

Also make sure you have the latest version of retina.js, supporting the data-at2x attribute.