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:

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.
- Permalink
- Trackback
- Comentários (7)
- Ao som de: The Toy Dolls – Spiders in the Dressing Room
Textos escritos por
Comentários #
Fernando, tem alguma razão em especial utilizar um hash para o nome do arquivo e ñ o próprio texto melhor formatado, com _ ou tudo junto?
O hash seria pra não ocorrer de ter uma imagem com o mesmo nome?
Muito boa dica!
Abraço!
Muito legal a dica, o uso de dynamic image replacemente é condenado por alguns e amado por outros, questões como performace, banda e outras entram em check. Nando, o que você pensa sobre isso?
Raul, o hash é para evitar que um nome inválido seja usado na hora de criar um arquivo. Caracteres como asterisco (*) e barra (/) são inválidos na maioria dos sistemas operacionais.
Junio, em uma aplicação com muitas requisições (Blogblogs por exemplo) seria inviável. Na maioria das aplicações não faz diferença.
puta dica
vocês tá usando essa técnica no blogblogs?
Nah... eu estou usando em um projeto que estou fazendo! ;)
Nando,
Você acha viável salvar as imagens geradas, de forma que quando o usuário abrir a página, nenhum transformação será feita? Apenas a imagem gerada em um momento anterior e salva no disco , será carregada e exibida.
Tenho um cliente que quer evitar dar copy and paste em parte dos textos da página dele.
Obrigado
Marcio
Marcio, esse script já verifica se o arquivo existe, gerando a imagem apenas caso ela não seja encontrada. Com certeza é a melhor coisa a se fazer!
Deixe um comentário