Thumbnails no WCM

É comum você ver uma notícia em alguns sites da internet e no final, ou qualquer outro ponto da página, existir um menu com várias fotos onde você clica para vê-las ampliadas. Isso é muito bom, pois evita que sejam mostradas várias fotos na página deixando ela muito grande e se o usuário não quer ver nenhuma das fotos tem a opção de não clicar.

O objetivo deste post é demonstrar como pode ser utilizando esse recurso dentro do Workplace Web Content Management. Esse exemplo que estarei colocando aqui é uma das possibilidades existentes, mais outras que podem ser exploradas. No final do post nós teremos uma página como a da figura abaixo.

Figura 01 - Tela final da notícia com thumbnails de imagens no final

Modelo usado

A proposição que estarei demonstrando aqui é baseada na seguinte estrutura:

Figura 02 - Estrutura para apresentação do conteúdo

Conteúdo
No conteúdo iremos trabalhar com dois tipos. O primeiro é o próprio conteúdo da notícia e o segundo são os conteúdos de imagens. A ligação entre os conteúdos será feita através da keyword, ou seja, tanto o conteúdo de notícia como os conteúdos de foto deverão ter a mesma keyword. No exemplo acima, a keyword que estou utilizando é "noticia001". Lembre-se que para cada conteúdo de notícia a keyword deverá ser diferente.

Montagem
A montagem do conteúdo para mostrar a página é bem simples. Em qualquer lugar do nosso site estaremos mostrando o link para o documento de notícia, quando um usuário clicar no link da notícia o WCM irá montar a apresentação do documento. Dentro da apresentação do documento é feita uma chamada ao menu de imagens (MENU - Imagens) e este estará verificando quais documentos de imagem tem a mesma keyword que o documento corrente.

Apresentação
Na apresentação será mostrado a notícia e um menu com todas as imagens relacionadas a o conteúdo corrente.

Template de Autoria

Nesse exemplo eu construí dois templates de autoria, um para a notícia e outro para as imagens, abaixo você poderá ver cada um dos templates:

Template de autoria para a notícia	Template de autoria para a imagem
Identification Nessa parte do formulário só fiz uma pequena descrição de como deverá ser preenchido o título do documento. Uma item que sempre gosto de usar é colocar o tipo do conteúdo em maiúsculo antes do nome do conteúdo, isso facilita achar o conteúdo dentro do WCM. Profile Como o nosso link entre notícias e imagens será a keyworkd, eu deixei o campo habilitado e com uma pequena descrição de como deve ser preenchido. Content Em content eu criei três campos. Título da notícia (Title - Text): É o campo que estarei utilizando para inserir o título da notícia. Descrição da notícia (Summary - Text): É o campo que contem uma pequena descrição da notícia. Notícia (Body - RichText): É onde será colocada a notícia.	Identification Usei o mesmo conceito do template de notícia, a identificação para esse conteúdo será PHOTO. Profile Como na notícia o campo deve ser preenchido com uma keyword existente em um conteúdo de notícia para que exista o link. Content Em content eu criei três campos. Título da foto (Title-image - Text): É o campo que estarei utilizando para inserir o título da imagem. Descrição da foto (Summary-image - Text): É o campo que contem uma pequena descrição da foto. Foto (Photo-Image - FileResource): É o campo utilizando para fazer o upload da foto. Eu não usei o campo tipo Image para ter um pouco mais de liberdade para o tratamento das fotos na apresentação.

Tabela 01 - Templates de autoria

Menu

O menu é a parte fundamental do nosso processo, é com ele que iremos ligar uma notícia com as imagens. Como disse anteriormente, para ligar uma notícia com as imagens vou estar utilizando a keyword dos documentos. Como sabemos o componente de menu tem várias regras de pesquisa para achar os documentos, inclusive por keyword.

Figura 03 - Menu para mostrar as imagens

Para a apresentação dos itens encontrados as opções e códigos são mostrados baixo:

Imagem	Código/Descição
	Na identificação do Menu utilizei o princípio de colocar o tipo do componente antes do nome. Quando colocamos a tag do wcm dentro de um HTML isso ajuda a identificar com qual tipo de componente estamos trabalhando.
	Essa é a chave do exemplo. A query que utilizei para o menu foi baseada em keywords, ou seja, quando abrir um conteúdo de notícia o menu irá pegar a keyword desse e pesquisar quais são os documentos que tem a mesma keyword, excluído o documento corrente.
	Por fim a apresentação. A ordem eu deixei Ascendente e o primeiro resultado da ordenação é pelo título do documento. Em resultados por página eu mandei mostrar até 100 imagens, o que acho suficiente. Abaixo está o código de cada sessão. Header <div id="photo_strip"> <h1>Fotos</h1> <div id="container"> <ul> Design for each menu search result <li><a href="<Placeholder tag="noprefixhref"/>" target="_blank"><img src="<Element context="autoFill" type="content" key="photo-image"/>" alt="" title="" height=64></a><p><Element context="autoFill" type="content" key="title-image"/></p></li> Footer </ul> </div> </div> Detalhes sobre a apresentação Para mostrar as imagens como na figura 01, estou utilizando um estilo especial, estarei falando um pouco mais abaixo sobre isso, e a Tags HTML que modifico para trabalhar com as imagens na horizontal são a <ul> e <li>. A imagem que o menu mostra não foi redimensionada por um programa gráfico, eu estou fazendo isso diretamente no HTML utilizando height=64. Fazendo esse exemplo eu descobri que se dimensionar somente a altura ou a largura o próprio browser acertar a imagem, nesse caso estou deixando a altura com 64 pixels e o browser irá dimensionar a largura para mim. Se o usuário quiser ver a imagem em tamanho maior poderá clicar sobre ela e será aberta uma nova janela com a imagem em tamanho natural.

Tabela 02 - Apresentação dos itens selecionados pelo menu.

Presentation Template - Notícia

No presentation template da notícia eu incluí a chamada do menu que acabamos de construir.

Figura 04 - Template de apresentação da notícia.

Imagem

Código/Descição

<html> <head> <Component id="17a4ed0045944938a692f6333a5ed22d:NC9ERU1PL0NTUyAtIEludHJhbmV0" name="DEMO/CSS - Intranet"/> </head> <body TEXT="Black" BGCOLOR="White" BACKGROUND="" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" BOTTOMMARGIN="0"> <Component id="2f424b0045b6e2a08107ad1dea9632c4:NC9ERU1PL0hUTUwgLSBNZW51IEluTGluZSBFZGl0aW9u" name="DEMO/HTML - Menu InLine Edition"/> <span class="news-menu-title" ><Element context="current" type="content" key="Title"/></span><br><br> <span class="news-menu-summary"><Element context="current" type="content" key="Body"/></span> <br><br> <Component id="de80398045c7ddbf8b72afb196d52d04:NC9ERU1PL01FTlUgLSBQaG90b3MgTmV3cw==" name="DEMO/MENU - Photos News"/> </body> </html>

Tabela 03 - Presentation Template PT - News

Presentation Template - Foto

O presentation template da foto é bem simples, mostrando o título, foto e descrição.

Figura 05 - Template de apresentação da notícia.

Imagem

Código/Descição

<html> <head> <Component id="17a4ed0045944938a692f6333a5ed22d:NC9ERU1PL0NTUyAtIEludHJhbmV0" name="DEMO/CSS - Intranet"/> </head> <body TEXT="Black" BGCOLOR="White" BACKGROUND="" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" BOTTOMMARGIN="0"> <Component id="2f424b0045b6e2a08107ad1dea9632c4:NC9ERU1PL0hUTUwgLSBNZW51IEluTGluZSBFZGl0aW9u" name="DEMO/HTML - Menu InLine Edition"/> <span class="news-menu-title" ><Element context="current" type="content" key="Title-image"/></span><br><br> <img src="<Element context="current" type="content" key="photo-image"/>" alt="" title=""><br> <span class="news-menu-summary"><Element context="current" type="content" key="Summary-image"/></span> </body> </html>

Tabela 04 - Presentation Template PT - Photo News

StyleSheet

Um outro ponto fundamental é a apresentação. Existem várias maneira de mostrar as imagens junto com o documento, mas a que escolhi foi listar todas as imagens e botar uma barra de rolagem abaixo destas imagens. O código que estarei utilizando agora, eu encontrei no site CSSplay. Esse site é muito bom e traz vários tipos de layout trabalhando somente com CSS.

Style	Descição
#photo_strip {         width : 800px;         margin-left : 15px; } #photo_strip h1 {         text-align : center;         padding : 0;         margin : 0;         width : 800px;         height : 38px;         line-height : 35px;         color : #555;         font-weight : normal;         font-size : 20px;         border-bottom : 1px solid #888; }	Photo_Strip serve para dimensionar a área onde estarei mostrado as imagens.
#container {         margin : 0;         padding : 0;         height : 430px;         overflow : auto;         color : #222;         background : #fff; } #container ul {         margin : 0;         padding : 0;         list-style : none;         white-space : nowrap;         display : table-row; } #container ul li {         display : table-cell;         padding : 0 15px;         background : #fff;         border-bottom : 1px solid #888;         vertical-align : top; } #container ul li img {         border : 1px solid #555;         margin : 30px 0 10px 0; }	Container é a alteração do design para as tags ul e li.

Tabela 05 - StyleSheet

Criação do Conteúdo

Com todo o design pronto vou criar um notícia e colocar 6 fotos vinculadas a ela. No campo keyword da notícia e das fotos estarei utilizando a palavra "controlesdejogos", que será a chave para o link do conteúdo de notícia com as fotos.

Abaixo você poderá ver a publicação da notícia e o campo keyword preenchido.

Figura 06 - Crianção do conteúdo de notícia

Na tela abaixo está sendo feita a publicação de uma das fotos e novamente você poderá ver o campo keyword preenchido com o mesmo valor colocado no conteúdo de notícia. Eu fiz 6 publicações de fotos dessa mesma forma, mudando somente o título.

Figura 07 - Crianção do conteúdo de foto (segunda foto)

Tanto as fotos quanto a notícia passaram por todo o processo de aprovação do WCM que eu defini. Após se publicado o resultado final ficou da seguinte forma:

Figura 08 - Visualização da notícia publicada

Por último eu cliquei sobre uma das fotos para vê-la em tamanho real.

Figura 09 - Visualozação da foto em tamanho natural

Como disse no início deste post isso é uma maneira de estar vinculando várias fotos a um documento. Mais informações sobre o WCM você poderá encontrar no Infocenter ou no site do produto.