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.


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 '
'; } ?>
  • 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 primeiro parâmetro é a imagem que queremos preencher - $img_final
    • O segundo é o modelo, ou seja, $img_origem
    • 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
    • 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
    • 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
    • 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().

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 плеер руполигон ооо

Informações adicionais

Fechar Info