A Aldeia Numaboa ancestral ainda está disponível para visitação. É a versão mais antiga da Aldeia que eu não quis simplesmente descartar depois de mais de 10 milhões de pageviews. Como diz a Sirley, nossa cozinheira e filósofa de plantão: "Misericórdia, ai que dó!"

Se você tiver curiosidade, o endereço é numaboa.net.br.

Leia mais...

Informática Numaboa - Tutoriais e Programação

Joomla, Highslide e Thumbnails

Qui

18

Dez

2008


00:00

(13 votos, média 3.92 de 5) 


Maluco beleza Este tutorial é meio complicado porque trata de vários assuntos ao mesmo tempo. Você verá como usar o Jumi para criar um plugin que aciona o Highslide num site Joomla. Verá também como criar um código PHP que cria miniaturas de imagens, os assim chamados thumbnails.

O começo da história

A preguiça é a mãe das invenções e esta invencionice não é uma exceção smile 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 echo $jumi[2]; ?> '; echo $jumi[4]; echo '
'; } ?>

Algumas explicações para este código:

  • Como estamos no ambiente Joomla, sempre é bom garantir que o código não seja executado com uma chamada direta. As linhas de 1 a 3 garantem isto.
  • A linha 4 atrela a função hs.expand() da biblioteca Highslide ao evento onclick do elemento a. Este elemento cria um link para a imagem ampliada que, como sabemos, está na variável $jumi[1].
  • A linha 5 coloca uma imagem na tela através do elemento img cuja fonte é a miniatura - daí a variável $jumi[0] ter sido usada.
  • Ainda na linha 5, definimos duas propriedades do elemento img, alt e align que estão nas variáveis $jumi[2] e $jumi[3].
  • As linhas 7 a 13 cuidam da legenda. Se ela não for uma string vazia, é criada uma divisão da classe "highslide-caption" (definida no CSS da biblioteca Highslide) com o conteúdo da variável $jumi[4].
  • Finalmente, na linha 14, a função hs.close() da Highslide foi associada ao evento onclick de um botão criado pela própria biblioteca e que serve para fechar a janela pop-up criada para conter a imagem ampliada.

Até que estava bom, mas agora vem a novidade.

Informações adicionais