A um tempo atrás eu estava com uma dúvida: como criar um destaque de imagem rotativo que tivesse um link, mas sem uso de texto? Encontrei alguns módulos para Drupal, mas sempre eles esbarravam em alguma coisa que não me agradava. Muitos eram em Flash e minha preferência era usar XHTML+CSS.

Eis que encontrei uma forma um pouco mais "manual" de fazer a coisa, e resolvi compartilhar aqui com a comunidade minha descoberta.

O principal deste tutorial é o InnerFade, descobri que já tem pessoas trabalhando num possível módulo, mas enquanto não está pronto, esse tutorial irá ajudar.

Componentes utilizados:
- JQuery (nativo do Drupal, não precisa instalar nada)
- Plugin Innerfade para JQuery
- Módulo Content Template
- Módulo Views
- Módulo CCK (Content Construction Kit)

Instruções:

1. Instale todos os módulos indicados. Content Template, Views e CCK.
2. Crie um novo tipo de conteúdo, eu chamei de Destaque. Habilite o upload de imagens nesse tipo de conteúdo.
3. Adicione um campo de link ao tipo de conteúdo Destaque e selecione os tipos de conteúdo que deseja linkar neste destaque.
4. Em Views crie um bloco baseado em teaser filtrado por tipo de conteúdo Destaque e pela condição de frontpage, em seguida ordene por ordem de cadastro decrescente.
5. Através do content template faça um template de teaser que mostre apenas o link e a imagem cadastrada. Ex: <a href="/node/<?php print $node->field_link_0[0]['nid'] ?>"><img src="/<?php print $node->field_destaque[0]['filepath'] ?>"></a>
6. Vá em blocos e selecione a área onde o bloco será mostrado, configure também em quais páginas o bloco será mostrado.
7. Baixe o Innerfade (http://medienfreunde.com/lab/innerfade/) e coloque o jquery.innerfade.js dentro da pasta /sites/all/themes//includes/ (Drupal 5.x).
   No template onde deseja carregar o Innerfade, dê um include do script utilizando o formato padrão dentro da tag : <script src="/sites/all/themes/<seutema>/includes/jquery.innerfade.js" type="text/javascript"></script>
8. Adicione o código (note que a classe de CSS .view-content-Destaque pode variar dependendo do nome criado para o tipo de conteúdo no Drupal. Para conferir o nome correto vá no código fonte gerado pela página desejada e pegue a classe):
   
   <script type="text/javascript">
    $(document).ready
       function(){ 
           $('.view-content-Destaque').innerfade({
              speed: 1000, // Tempo de transição
              timeout: 20000, // Tempo de exposição de cada imagem
              type: 'sequence', // Tipo de animação
              containerheight: '180px' // Altura em pixels do destaque
           });
       });
   </script>

Obs: Não tive tempo o bastante para detalhar o uso do módulo views, content template e CCK aqui, mas há diversos tutoriais na internet, se quiserem podem indicar aqui neste post para ajudar.

Demo do innerfade

Enviado por kojieumesmo em ter, 17/06/2008 - 15:23.

• Drupal

• Por favor, se logue ou se registre para poder enviar comentários
• 1258 leituras