Informática Numaboa - Tutoriais e Programação
Joomla, Highslide e Thumbnails
Qui 18 Dez 2008 00:00 |
- Detalhes
- Categoria: Joomla
- Atualização: Segunda, 02 Julho 2012 19:46
- Autor: vovó Vicki
- Acessos: 10397
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 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:
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:
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:
Neste exemplo, o plugin fornece as seguintes variáveis que podem ser utilizadas no script:
Usando estas variáveis, o código do plugin original é o seguinte: