Ajudante de imagem Ruby on Rails para tela de retina com intercâmbio de fundação

Lidar com imagens de retina pode ser um pesadelo no código de front-end.

Para mim, a melhor solução quando se trabalha com fundação é usar o Interchange .
Essa biblioteca javascript usa consultas de mídia para carregar as imagens apropriadas para os navegadores do usuário, tornando as imagens responsivas muito rápidas.

Se você ler a documentação, o componente utiliza o data-interchangeatributo para especificar suas consultas de mídia.

O jeito clássico

= image_tag('front/static/logo.png', alt: 'Description', 'data-interchange' => "[#{image_path('front/static/logo@2x.png')}, (retina)]")

Você escreve o mesmo caminho de imagem 2 vezes …
Não é muito bom para sua saúde mental.

O ninja nindô

Basta colocar este código em seu application_helper.rb

module ApplicationHelper
  def retina_image_tag(default_name, options={})
    retina_name = default_name.gsub(%r{\.\w+$}, '@2x\0')
    image_tag(default_name, options.merge('data-interchange' => "[#{asset_path(retina_name)}, (retina)]"))
  end
end

Magia ! use para fazer o trabalhoretina_image_tag('front/static/logo.png')

Se você quiser usar outra biblioteca para imagens de retina, retina.js pode ser uma solução.