Relôu pípou! É fim de ano e para contribuir com a cota de bondade no mundo, publico este tutorial onde vamos aprender a fazer um sistema simples de promover o conteúdo do seu site como destaque e exibí-lo em um bloco na forma de slideshow. Este tutorial é baseado em Drupal 6 e o exemplo do resultado final é esse slideshow que você vê na página inicial aqui do Xulispa, nêgo! Imagem de referência do resultado:

Para o bom aproveitamento, você precisa ter noções básicas de Drupal, de configuração de tipos de conteúdo e campos adicionais (CCK), um pouco de Views, instalação e configuração de módulos, HTML e CSS. Os módulos que vamos usar são:

• Content Construction Kit (CCK)
• Views
• Views Slideshow
• Nodequeue
• ImageField (atenção para as dependências do módulo)
• ImageCache (também tem dependências)

Pois bem! Com os módulos instalados corretamente, incluindo as dependências dos mesmos, vamos por as mãos na massa.

1° passo: Dar as devidas permissões, especialmente "manipulate queues" para os papéis de usuário de sua escolha em "Administrar > Gerenciamento de usuários > Permissões". Isso varia de acordo com sua necessidade e entra nas noções básicas de Drupal.

2° passo: Criar uma nova queue ou editar a que vem por padrão em "Administrar > Organizar conteúdo > Nodequeue" da seguinte forma:

• Título: Destaque geral (esse título será usado na página de administração dos destaques)
• Nome: queue1 (ou o nome que desejar, podendo ser "destaques". No meu caso, "queue1" é usado pois editei a queue padrão)
• Queue size: 0 (dessa forma não terá limite de quantos conteúdos poderão ser adicionados aos destaques)
• Link "add to queue" text: Adicionar aos destaques (é dessa forma que o link aparecerá no conteúdo para ser adicionado aos destaques)
• Link "remove from queue" text: Remover dos destaques (é dessa forma que o linke aparecerá no conteúdo para ser removido dos destaques)
• Papéis: De acordo com as permissões que deu no primeiro passo
• Tipos: Marque os tipos de conteúdo que você deseja adicionar ao sistema de destaques

Veja a imagem da minha configuração, como exemplo (clique para ampliar):

Feito isso, nosso sistema de destaques está pronto! Todo conteúdo que for do tipo marcado na configuração da queue, deverá ter um link "Adicionar aos destaques" ("Remover dos destaques", depois de clicado no "Adicionar aos destaques") tanto na chamada (teaser) quando na exibição do conteúdo (node completo).

Opcionalmente, pode fazer um teste, adicionando conteúdos aos destaques. Cada queue configurada no seu site deve receber uma página de administração do conteúdo relacionado à queue, conforme as configurações do módulo. Essa página é exibida no link "ver", na linha da queue, na página de administração do Nodequeue.

3° passo: Criar um preset no ImageCache, em "Administrar > Construção do site > ImageCache", que servirá para formatar o tamanho da imagem que exibiremos no nosso slideshow de destaques. Fiz assim:

• Identificador do preset: 580x200 (costumo usar no identificador o valor de "altura x largura", em pixels, para ficar melhor de reconhecer. O identificador é livre para usar qual quiser)
• Ações: Scale And Crop (para escalar e cortar a imagem, definindo 580 pixels de largura e 200 pixels de altura. Isso vai deixar que as imagens do slideshow de destaque fiquem todas desse tamanho. Coloque os valores de largura e altura conforme sua necessidade)

Veja a imagem que exemplifica minha configuração (clique para ampliar):

Observação: Na imagem tem uma ação "Rouded Corners", que adicionei para fazer os cantos arredondados. Essa ação é opcional e não requerida para este tutorial. Fiz usando o módulo adicional ImageCache Actions.

4° passo: Este passo entra nos requisitos de configuração de tipos de conteúdo e campos CCK. Na administração dos tipos de conteúdo, "Administrar > Organizar conteúdo > Tipos de conteúdo", vamos adicionar dois campos (CCK) em todos os tipos de conteúdo que foram selecionados na configuração da queue:

• Imagem para destaque: campo do tipo "arquivo" (file) com widget "imagem"
• Texto para destaque: campo do tipo "texto" com widget "campo de texto"

Para melhorar a melhorar o sistema dos destaques, esses campos devem ser obrigatórios e/ou conter um valor padrão.

Ainda na configuração dos tipos de conteúdo, existe uma opção "Exibir campos". Marque "Excluir" tanto para a chamada (teaser) e node completo, pois vamos exibir os valores desses campos apenas no nosso slideshow de destaques.

No formulário de criação de conteúdo, teremos algo parecido com a imagem a seguir (clique para ampliar):

5° passo: Aqui é preciso saber um pouco de views. Nesse momento temos o sistema de destaques e o método para inserir no banco de dados as informações que precisamos para fazer nosso slideshow de destaques. Agora é fazer a view que exibirá essas informações. Na administração das views, em "Administrar > Contrução do site > Views", vamos adicionar uma nova:

• Nome da view: destaques
• Tipo: node

Adicionando a view, vamos às configurações dela, que deverá conter:

a) Em "Campos":

• Node: Título (linkado ao node)
• Conteúdo: Texto para destaque (linkado ao node)
• Conteúdo: Imagem para destaque (linkado ao node)

b) Em "Filtros":

• Node: Publicado = Sim

c) Em "Critérios de ordenação":

Node: Data de publicação = descendente

d) Em "Relações":

• Nodequeue: Queue (qid)

Aqui é preciso definir a relação como obrigatória e limitar o resultado para uma ou mais queues específicas. Veja a imagem de exemplo dessa configuração (clique para ampliar):

e) Em "Configurações básicas":

• Estilo: Exibição de slides (Views Slideshow - falo das configurações logo abaixo)
• Estilo de linha: Campos
• Itens a exibir: 5 (ou quantos quiser no seu slideshow. Caso a queue tenha mais itens do que informado aqui, exibirá somente os mais recentes, limitando a esse número)

Sobre as configurações do "Estilo" (pode alterar essas configurações conforme sua necessidade, pelo ícone de engrenagem que tem ao lado):

• Tipo de lista: Lista não-ordenada
• Slideshow mode: SingleFrame
• Timer delay: 8000 (velocidade em milésimos de segundo para haver a transição)
• Initial slide delay offset: 0 (velocidade para a transição do primeiro item do slideshow)
• Velocidade: 700 (tempo, em milésimos de segundo, da transição)
• Make the slide window height fit the largerst slide: sim (só pra garantir a altura mínima padrão, o preset do imagecache já faz isso)
• Aleatório: Falso
• Pause: Não
• Pause on click: Não
• Controles: Nenhum (fique livre para experimentar outros)
• Paginador: Nenhum (fique livre para experimentar outros)
• Contador de imagens: Nenhum (fique livre para experimentar outros)
• Items per slide: 1 (garante que será exibido 1 item de cada vez)
• Efeito: scrollLeft (tem vários efeitos)
• Sincronizar: Sim
• End slideshow after last slide: Não (desse jeito o slideshow fica contínuo)
• ClearType: Verdadeiro (opções do IE)
• Plano de fundo ClearType: Verdadeiro (opções do IE)

Veja a imagem da minha configuração (clique para ampliar):

Com isso feito, adicione um display do tipo bloco e salve sua view. A fim de curiosidade, segue ainda mais uma imagem, da configuração geral da minha view (clique para ampliar):

6° e último passo: Agora basta ir na administração dos blocos, em "Administrar > Construção do site > Blocos", para habilitar o bloco criado na view na região que você desejar exibir seu slideshow com os destaques.

Claro, se você quer exibir corretamente o conteúdo adicionado como destaque antes de chegar ao sexto passo, é preciso editá-los e preencher os campos que criamos com CCK (imagem e texto para destaque).

O restante você faz com CSS. Esse assunto não será abordado aqui. Analise o código fonte gerado no HTML e em algum arquivo CSS do seu tema, coloque como quiser. Fique à vontade para analisar o HTML e classes CSS do slideshow de destaques daqui do Xulispa, nêgo! se quiser referências.

Com isso chegamos ao fim do tutorial. Se gostou ou foi útil, me siga no twitter e curta a fan page no facebook. Comentários também são muito bem vindos. =D

Répi nêu íêr!

\o/

Conteúdo relacionado