Primeiramente peço desculpas, mas realmente a repercussão da primeira matéria aqui no iMasters foi ótima e tive muitos novos trabalhos a realizar, por isso da demora em postar novas matérias.

Atendendo a pedidos, esta matéria será uma continuidade da anterior Upload e Resize de Imagens com Dreamweaver Developer Toolbox, demonstrando como exibir as imagens “upadas” para o servidor, e de diferentes maneiras, inclusive usando o recurso de “Show Thumbnail” do DDT.

Bom, mãos à obra:

1) Aproveitando o exemplo anterior do artigo, vamos demonstrar como exibir a imagem. Partimos do principio que as imagens estão salvas na pasta “/images”.

2) Em uma página PHP em branco.

3) Crie um Recordset.

4) Crie uma tabela para organizar as notícias(dados do recordset) a serem exibidos.

5) Insira os dados na tabela usando o recurso “Dynamic Text“.

6) Insira os campos texto, e agora usando o recurso “Show Image” da Developer Tool Box exibiremos a imagem “upada” anteriormente.

7) Defina a pasta que contem as imagens “upadas”.

8) Defina o recordset e o campo que contem o nome dos arquivos de imagem.

9) Você terá o seguinte resultado, com a exibição da imagem dinâmica.

10) Vou explicar o código criado, e seu funcionamento.

<tr>
    <td height="129"><div align="center">
<img src="<?php echo tNG_showDynamicImage("", "images/", "{noticia.imagem}");?>"/>  
</div></td>
  </tr>

Dentro de uma TAG <IMG>, a DDT empregou a classe tNG_showDynamicImage, dando especificadamente a pasta (/images) e o campo do recordset {noticia.imagem}.

11) Por outro lado essa opção vai exibir a imagem como foi “upada”, com o rezise feito no exemplo anterior. Podemos também empregar uma outra função da DDT chamada Show Thumbnail. Essa opção não só pode exibir, mas pode criar miniaturas, e até aquele efeito de imagem maior em Popup, e até marca d´ água, senão veremos:

12) Selecione o espaço na tabela, e vá ao menu:

13) A primeira coisa a fazer é definir a imagem a ser gerada em Thumbnail, seu tamanho, proporção, pasta etc, estas opções estão disponíveis na aba Basic.

A idéia é que, na hora de usar o resize, (deixar a imagem em miniatura), você escolha uma das opções de “Proportional“, ou seja, mude o tamanho da Imagem proporcionalmente, para que ela não fique desfocada.

14) A próxima aba POPUP, traz um recurso muito interessante. Imagine uma lista de produtos, talvez em uma Loja virtual, onde a imagem do produto é exibida em tamanho pequeno (thumbnail) e quando clicamos na imagem ela abre em tamanho normal em uma “janelinha”! Vejamos abaixo como configurar:

15) A terceira opção, é a guia Watermark, que permite a colocação de Marcas d´ água nas imagens.

16) O resultado é mais ou menos esse.

“Voi La”! Com este recurso pode-se resolver vários problemas do dia a dia do desenvolvimento web, este é intuito desta coluna, trazer soluções para “problemas difíceis” usando a Dreamweaver Developer Tool Box.

Usem esses conhecimentos com sabedoria.

Aguardo as suas sugestões para a próxima matéria. Forte abraço!