Redimensionando imagens com Timthumb e CodeIgniter

Posted by in Code Igniter, PHP, Tutorial

Assistindo algumas palestras online da #CPBR6 ouvi alguns palestrantes falando dessa página aqui http://opensource.globo.com. Ela reúne os projetos da equipe de desenvolvimento da Globo.com, todos abertos para você utilizar em seu projeto também.

Dentre muitos projetos legais, um que me chamou a atenção foi o thumbor de Bernardo Heynemann.

thumbor is a smart imaging service. It enables on-demand crop, resizing and flipping of images.

Após, fui atrás de algo semelhante em PHP para inserir nos meus projetos em CodeIgniter. O mais “badalado” que encontrei foi o Timthumb, que é um script PHP simples, flexível, que redimensiona imagens. Você dá um monte de parâmetros, e ele exibe uma imagem em miniatura que você pode exibir em seu site. Exemplo:

 http://meusite.com/timthumb.php?src=lighthouse.jpg&a=t&w=130&h=90

Esse link acima, vai encontrar em seu servidor uma imagem com o nome lighthouse.jpg, vai cortá-la no topo (a=t) exibindo uma imagem de 130px de largura (w=130) por 90px de altura (h=90), com opção de guardá-la em cache para melhorar na performance de seu site. Maravilha não!?

Pois resolvi criar uma Library para Code Igniter utilizando o timthumb tornando sua URL mais amigável. Exemplo:

http://meusite.com/imagens/w130_h90_at__lighthouse.jpg

Na minha humilde opinião ficou um pouco melhor.

Deseja incluir isso no seu projeto? Fácil! Baixe a biblioteca do meu repositório https://github.com/alexdeoliveira/ci_timthumb e cole na raiz do seu projeto do CodeIgniter.

Única coisa que você deve ajustar é no arquivo “application/libraries/ci_timthumb/ci_timthumb.php” e alterar a linha “var $dir = ‘images/’;” trocando “images” pelo seu diretório das imagens.

Como funciona?

O que separa os parâmetros de configurações da imagem é a combinação “__” (dois underscores).

http://meusite.com/imagens/w130_h90_at__lighthouse.jpg

Todos os parâmetros, antes da combinação, devem ser separados por um “_” (underscore).

Exemplos:

  • w50: 50 pixel de largura;
  • h30: 30 pixel de altura;
  • q90: qualidade da imagem em 90%
  • at: corte da imagem no topo
  • f1: filtro da imagem do tipo 1
  • q90_w50_h30_at_f1: combinação dos parâmetros para exibir uma imagem com qualidade de 90% da original, tamanho de 50 x 30 pixels, corte no topo e aplicação de um filtro tipo 1.
  • Para ver todos os parâmetros acesse Complete TimThumb Parameters Guide

E aí galera, gostaram desse meu primeiro post? Coloquem suas opiniões aqui em baixo nos comentários.

Valeu e até a próxima!