Joomla, Highslide e Thumbnails

O começo da história

A preguiça é a mãe das invenções e esta invencionice não é uma exceção Você, com certeza, conhece aquelas imagens miniatura que, quando clicadas, mostram a mesma imagem ampliada sem que a página seja trocada ou precise ser recarregada. Quando vi, gostei e resolvi começar a usar nos meus sites porque adoro firulas deste tipo.

Saí à cata de exemplos de código que fizessem esta mágica e, como não poderia deixar de ser, os exemplos eram todos baseados em javascript. Foi nesta ocasião que fiquei conhecendo a Highslide, uma biblioteca javascript free e de código aberto, prontinha para fazer tudo o que estava querendo e muito mais. Instalei a biblioteca e comecei a fazer alguns testes. Acontece que as páginas precisavam de um monte de código javascript e comecei a perceber que, se tivesse que repetir todo aquele código em cada página em que eu quisesse obter o efeito de ampliação, estaria perdida. Tinha certeza de que não iria me lembrar de todo aquele código e haja preguiça de procurar toda santa vez onde o script estava anotado ou de abrir outra página que o contivesse para poder copiá-lo.

Como meus sites são Joomla, a solução seria criar um plugin que, recebendo alguns poucos parâmetros, substituísse uma parte do texto da página pelo código javascript necessário (alguns parâmetros eu ainda me arrisco a decorar). O modo mais rápido e "indolor" que conheço para criar plugins para o Joomla é o Jumi. Foi o que fiz.

Usei este plugin durante algum tempo, quando de novo bateu a preguiça. Para cada imagem que eu quisesse ampliar, precisava criar e fazer o upload de duas: a ampliada e o thumbnail. Dependia de um bom editor de imagens, gastava tempo fazendo a miniatura e precisava passar o nome das duas para o plugin. Foi quando me lembrei das funções de tratamento de imagem do PHP. Por que não usar estas funções para criar automaticamente as miniaturas? Foi só dar um trato no código do plugin para facilitar um pouco mais a minha vida! Então vamos lá, vou relatar como foi que consegui isto.

A biblioteca Highslide

A biblioteca Highslide pode ser facilmente instalada e configurada em qualquer site. Como este assunto é meio longo e não é o foco deste tutorial, sugiro que você leia o artigo Highslide para webmasters.

O plugin original

Da mesma forma que a Highslide, se você não sabe como instalar e criar plugins Jumi, leia Jumi - O pulo do gato.

No Joomla, para acionar um plugin precisamos inicialmente definir o tipo de marcador. No caso do Jumi, o marcador é {jumi} (assim foi definido pelo autor). Com este marcador podemos enviar quantos parâmetros quisermos, mas o primeiro precisa ser o caminho para o script PHP que deve ser executado. Digamos que os scripts para o Jumi estejam no diretório /includes/jumi/ e que o nome deste script seja ampliaImagem.php. Neste caso, para acionar o plugin, a chamada seria a seguinte:

{ jumi [includes/jumi/ampliaImagem.php] }

Observe que os parâmetros são enviados sem aspas e entre colchetes. Como só o que estiver entre colchetes é considerado parâmetro, pode-se adicionar qualquer coisa fora deles, o que nos ajuda a lembrar que tipo de parâmetro é, mas é ignorado pelo Jumi. Por exemplo, a seguinte chamada dá o mesmo resultado que a anterior:

{ jumi script=[includes/jumi/ampliaImagem.php] }

Com exceção do parâmetro com o caminho do script, os restantes são nomeados pelo Jumi como $jumi[0], $jumi[1], $jumi[2], etc. Simples, não é mesmo? Só tem uma coisa: a sequência dos parâmetros precisa ser obedecida na chamada, ou seja, se quisermos deixar algum deles de fora, precisamos enviar um parâmetro vazio com [].

A chamada para o ampliaImagem.php é a seguinte:

{ jumi script=[includes/jumi/ampliaImagem.php] miniatura=[images/stories/imagem_mini.jpg] grande=[images/stories/imagem.jpg] alt=[Minha imagem] align=[left] caption=[Legenda no rodapé da imagem ampliada] }

Neste exemplo, o plugin fornece as seguintes variáveis que podem ser utilizadas no script:

$jumi[0] = "images/stories/imagem_mini.jpg"
$jumi[1] = "images/stories/imagem.jpg"
$jumi[2] = "Minha imagem"
$jumi[3] = "left"
$jumi[4] = "Legenda no rodapé da imagem ampliada"

Usando estas variáveis, o código do plugin original é o seguinte:

<?php

1. defined( '_JEXEC' ) or die( 'Acesso restrito' );
2. ?>
3. <a href="<?php echo $jumi[1]; ?>" class="highslide" onclick="return hs.expand(this)">
4. <img src="<?php echo $jumi[0]; ?>" alt="<?php echo $jumi[2]; ?>" title="Clique para ampliar" align="<?php echo $jumi[3]; ?>" hspace="10" />
5. </a>
6. <?php
7. if( $jumi[4] ) {
8. echo '<div class="highslide-caption">';
9. echo $jumi[4];
10. echo '</div>';
11. }
12. ?>
13. <div id="closebutton" class="highslide-overlay closebutton" onclick="return hs.close(this)" title="Fechar"></div>

O novo plugin

No novo plugin, os parâmetros com a imagem reduzida e a ampliada são substituídos pelo caminho e pelo nome da imagem ampliada - os demais permanecem os mesmos. Assim sendo, as variáveis fornecidas ao nosso script pelo Jumi passam a ser:

$jumi[0] = "images/stories"
$jumi[1] = "imagem.jpg"
$jumi[2] = "Minha imagem"
$jumi[3] = "left"
$jumi[4] = "Legenda no rodapé da imagem ampliada"

O novo script ampliaImagem.php incorpora rotinas para criar o thumbnail:

<?php( '_JEXEC' ) or die( 'Acesso restrito' );

1. 
   
2. $imagem = $jumi[0].'/'.$jumi[1];
3. $percentual = 40;
4. 
   
5. $thumb = explode('.', $jumi[1]);
6. $tipo = $thumb[1];
7. $thumb = 'includes/jumi/'.$thumb[0].'_mini.'.$tipo;
8. 
   
9. if( !file_exists( $thumb ) ) {
10. if( $tipo == 'jpg' ) {
11. $img_origem = ImageCreateFromJPEG($imagem);
12. } else {
13. $img_origem = ImageCreateFromPNG($imagem);
14. }
15. 
    
16. $origem_x = ImagesX($img_origem);
17. $origem_y = ImagesY($img_origem);
18. $x = intval($origem_x * $percentual/100);
19. $y = intval($origem_y * $percentual/100);
20. $img_final = ImageCreateTrueColor($x, $y);
21. ImageCopyResampled($img_final, $img_origem, 0, 0, 0, 0, $x+1, $y+1, $origem_x, $origem_y);
22. if( $tipo == 'jpg' ) {
23. ImageJPEG($img_final, $thumb);
24. } else {
25. ImagePNG($img_final, $thumb);
26. }
27. ImageDestroy($img_origem);
28. ImageDestroy($img_final);
29. }
30. ?>
31. 
    
32. <a href="<?php echo $imagem; ?>" class="highslide" onclick="return hs.expand(this)">
33. <img src="<?php echo $thumb; ?>" alt="<?php echo $jumi[2]; ?>" title="Clique para ampliar" align="<?php echo $jumi[3]; ?>" hspace="10" />
34. </a>
35. <?php
36. if( $jumi[4] ) {
37. echo '<div class="highslide-caption">';
38. echo $jumi[4];
39. echo '</div>';
40. }
41. ?>
42. <div id="closebutton" class="highslide-overlay closebutton" onclick="return hs.close(this)" title="Fechar"></div>

* Na linha 4 é declarada a variável $imagem que recebe a string concatenada $jumi[0].'/'.$jumi[1], ou seja, $imagem="images/stories/imagem.jpg"
* Na linha 5 é indicado o percentual de redução desejado. Acho que um valor entre 30 e 40 é o ideal.
* Nas linhas 7 a 9 é criado o nome que a miniatura vai receber. Inicialmente explodimos o nome da imagem ($jumi[1]) usando como referência o delimitador ".", ou seja, $thumb = explode('.', $jumi[1]) retorna o array $thumb onde $thumb[0]="imagem" e $thumb[1]="jpg". A seguir colocamos o tipo de imagem na variável $tipo ($tipo = $thumb[1]) e criamos o nome da miniatura concatenando o caminho do script ("includes/jumi/") com o nome da imagem ($thumb[0]), a string '_mini.' e a extensão ou tipo da imagem $tipo. O resultado é a string "includes/jumi/imagem_mini.jpg".
* Na linha 11 testamos se a imagem "includes/jumi/imagem_mini.jpg" existe. Se estiver no mesmo diretório que o script, não precisa ser criada novamente. Neste caso, a execução do script pula diretamente para a linha 34. Se ela não existir, precisa ser criada.
* Nas linhas 12 a 16 testamos se o tipo da imagem ampliada é "jpg" ou "png". Se o tipo for "jpg" (linha 13), fazemos uma cópia da mesma com a função do PHP ImageCreateFromJPEG e guardamos a cópia na variável $img_origem; se for do tipo "png" (linha 15), fazemos a cópia com a função ImageCreateFromPNG e a guardamos na variável $img_origem.
* A seguir, nas linhas 18 e 19, obtemos a largura e a altura da imagem ampliada com as funções do PHP ImagesX e ImagesY. Os valores são guardados nas variáveis $origem_x e $origem_y.
* Agora toca calcular o tamanho da miniatura. Nas linhas 20 e 21 aplicamos o percentual indicado na variável $percentual à largura e à altura da imagem ampliada e armazenamos em $x e $y o valor inteiro ( usando intval() ) do cálculo.
* A seguir criamos uma imagem vazia com as novas dimensões calculadas e a chamamos de $img_final. A linha 22 mostra como: $img_final = ImageCreateTrueColor($x, $y);
* Tendo uma imagem vazia com as dimensões desejadas, agora só é preciso copiar o que desejamos para dentro dela. Quando se tem um modelo para copiar, a função do PHP ImageCopyResampled é uma mão na roda... se soubermos o que o monte de parâmetros que ela exige significam. Então, vamos lá:
o O primeiro parâmetro é a imagem que queremos preencher - $img_final
o O segundo é o modelo, ou seja, $img_origem
o O terceiro e o quarto são as coordenadas x e y dos pontos a partir dos quais a porção copiada será inserida. É claro que queremos começar em 0,0
o Os dois seguintes são as coordenadas x e y dos pontos a partir dos quais a imagem deve ser copiada. Novamente é claro que que queremos que comecem a ser copiados em 0,0
o Mais uma vez um par de parâmetros, desta vez para determinar a largura e a altura (em pixels) que a porção copiada terá na imagem destino, neste caso representados por $x+1 e $y+1
o Finalmente, o último par de parâmetros indica a largura e a altura (também em pixels) da porção que deve ser copiada da mensagem original, ou seja, $origem_x e $origem_y
* A esta altura do campeonato, a cópia já está feita. Agora só precisamos salvar a miniatura. Se quisermos preservar o formato da imagem original, então será preciso testar novamente o tipo. Se for "jpg", usamos a função do PHP ImageJPEG; se for do tipo "png", usamos a função ImagePNG. Os parâmetros desta função são a imagem recém-criada ($img_final) e o caminho/nome ($thumb) da mesma.
* Feito isto, só nos resta liberar a memória usada para armazenar a imagem original e a criada para obter a miniatura. Para isto (linhas 29 e 30) usamos a função do PHP ImageDestroy().O novo

plugin em ação

É isto aí. Este novo plugin está funcionando que é uma beleza. Aqui está um exemplo ao vivo.Esta imagem está no artigo Baratas e Ecologia. Se você odeia baratas, assim como eu, talvez este seja um artigo que também desperte seu interesse. Afinal de contas, não precisamos ficar apenas com Joomla, Highslide e Thumbnails

Valeu pessoal! Até mais

Fonte Numa Boa.

 

 

 

Próximo >