Informática Numaboa - Tutoriais e Programação

Joomla, Highslide e Thumbnails

Qui

18

Dez

2008


00:00

  • Imprimir
(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:

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


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 echo $jumi[2]; ?> '; echo $jumi[4]; echo '
'; } ?>

Observação importante: o diretório onde está o script (no exemplo, /includes/jumi/) precisa ter permissão para escrita para que a miniatura possa ser salva.


O novo plugin em ação

É isto aí. Este novo plugin está funcionando que é uma beleza. Aqui está um exemplo ao vivo e em cores:

Robô + barata

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 smile

Valeu pessoal! Até mais e abraço da vó vovo

Вадим Логофет Сбербанккастрюли эмальотзывы о компанияхкупить цифровыескачать игрыasus zenfone max zc550kl плеер руполигон ооо