Go to English Blog

Image replacement com Rails e RMagick

Leia em menos de um minuto

Se você quer estilizar seus textos com uma fonte diferente, experimente fazer image replacement com um helper que irá gerar a imagem automaticamente. Adicione o método abaixo ao arquivo app/helpers/application_helper.rb.

def title_tag(text)
  hash          = Digest::MD5.hexdigest(text)[0,10]
  relative_name = "titles/#{hash}.png"
  full_path     = "#{Rails.root}/public/images/#{relative_name}"

  unless File.file?(full_path)
    image = Magick::Image.new(500, 30)
    image.format = "PNG"

    title = Magick::Draw.new

    title.annotate(image, 500, 30, 0, 0, text) do
      self.fill        = "#333"
      self.font        = Rails.root + "/fonts/Clarenton LT Bold.ttf"
      self.font_family = "Clarenton LT Bold"
      self.font_weight = Magick::BoldWeight
      self.gravity     = Magick::NorthWestGravity
      self.pointsize   = 24
    end

    image.write(full_path)
  end

  url = image_path(relative_name)
  content_tag(:h2, text, :class => "ir", :style => "background-image: url(#{url});")
end

Agora, basta você chamar o helper da seguinte maneira:

<%= title_tag "Easy image replacement" %>

Uma imagem como está será gerada:

Imagem gerada pelo RMagick

No HTML, o código gerado será esse:

<h2 class="ir" style="background-image: url(/images/titles/ad80520fd1.png?1234484835);">
  Easy image replacement
</h2>

Você também vai precisar do CSS:

.ir {
  background: transparent no-repeat;
  height: 30px;
  text-ident: -9999px;
  width: 500px;
}

Lembre-se de alterar o helper, adicionando sua fonte, cor e tamanho.