snippet

SNIPPET (e um Plus): Adicionando a Página atual à trilha de navegação

Saudações, meus amigos!

No artigo de hoje, vou ensinar a personalizar a famosa trilha de navegação, também conhecida como migalhas-de-pão ou simplesmente breadcrumbs.

Imagine que você deseja formatar uma trilha de navegação para ser exibida da seguinte forma:

Página Inicial » Seção » Página atual (sem link).

Ao mesmo tempo, preciso adicionar classes que identifiquem a posição de cada elemento dentro da trilha, para me ajudar a aplicar a formatação desejada.

Bom, este problema é dividido em duas partes. Temos uma etapa de configuração de comportamento do elemento, e outra de configuração de apresentação. Para a primeira etapa utilizaremos um módulo, e para a segunda, uma função de tema.

Inclusive existe mais de uma opção para a configuração de trilhas de navegação. Eu usei aquela que foi mais interessante para mim naquele momento, e sinta-se a vontade de fugir do meu senso e usar o módulo que for mais adequado para você ou para sua situação.

Mas antes, uma palavrinha sobre as trilhas de navegação

Sabe, devo confessar que nesses 6 anos que mexo com Drupal eu nunca entendi direito como funcionavam as trilhas de navegação. Nunca entendi como elas exibiam o caminho completo de onde eu estava na administração, mas nas páginas que eu criava para o site, eu só conseguia um único item na trilha (o da página inicial).

Como a maior parte dos sites que eu desenvolvo são muito simples, não possuem mais que três níveis de profundidade de links, acabei por abdicar do uso de breadcrumbs.

Mas veja só você, hoje eu fiz uma pequena pesquisa para este tutorial, e descobri uma pequena coisa, óbvia até, mas incrivelmente essencial para o entendimento das migalhas-de-pão:

(pausa dramática)

As trilhas de navegação utilizam o menu Navegação para sua criação.

PAM PAM PAAAAM!!!

(se isso fosse um podcast, colocaria uma voz com eco ao falar essa frase)

Sério, essa frase simples e óbvia acima esclareceu completamente o funcionamento dos breadcrumbs, além de que essa informação já seria suficiente para alterar 50% deste artigo.

Mas não vou modificar nem uma linha do tutorial, pois ele não fica menos válido (apenas uma forma diferente de resolver as coisas). E o registro do aprendizado também é importante.

Adicionando uma trilha de navegação para uma seção em seu site

Atualmente, a forma mais simples, prática e rápida de trabalhar sites no Drupal é usar Tipos de conteúdo e Views para criar as seções de um site. Por exemplo, se eu tenho uma seção chamada "Serviços", eu vou criar um tipo de conteúdo chamado de Serviço, e criar uma página para agregar todos os conteúdos criados como Serviço, utilizando Views.

Para adicionar uma trilha que aponte para a página de Serviços, você vai utilizar o módulo Custom Breadcrumbs.

Não irei explicar como este módulo funciona. A configuração do módulo é bem simples, e além disso, o foco deste tipo de artigo não é configuração de módulos, e sim trechos de código. Mas deixo abaixo uma captura da página de configuração do mesmo, afinal uma imagem vale mais que mil palavras.

Tela de configuração do módulo Custom Breadcrumbs

Finalmente, o Snippet: alterando o HTML da trilha de navegação

Ufa, finalmente chegamos ao climax deste tutorial. Ao seu âmago: o código.

Recapitulando o que eu disse lá em cima: precisamos alterar o código HTML da trilha de navegação para exibir uma classe que irá marcar a posição de cada item da trilha. E também precisamos adicionar a página atual na trilha, mas sem nenhum link (até porque adicionar um link para a própria página não faria qualquer sentido).

Para isso utilizaremos a função theme_breadcrumb. Ela deve ficar no arquivo template.php do seu tema. Não esqueça de modificar o nome da função de theme_breadcrumb para NOMEDOSEUTEMA_breadcrumb. O código é o seguinte:

function NOMEDOSEUTEMA_breadcrumb($variables) {

  $breadcrumb = $variables['breadcrumb'];

```
  if (!empty($breadcrumb)) {
```

    // Provide a navigational heading to give context for breadcrumb links to

    // screen-reader users. Make the heading invisible with .element-invisible.

    $output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';

    $breadcrumb[] = '<span class="current-page">'. drupal_get_title() . '</span>';

```
    $array_size = count($breadcrumb);
```
```
    $i = 0;
```
```
    $crumbs = '';
```
```
    while ( $i < $array_size) {
```

      $crumbs .= '<span class="breadcrumb-' . $i;

```
      if ($i == 0) {
```
```
        $crumbs .= ' first';
```
```
      }
```
```
      if ($i+1 == $array_size) {
```
```
        $crumbs .= ' last';
```
```
      }
```

      $crumbs .=  '">' . $breadcrumb[$i] . '</span>';

```
      $i++;
```
```
    }
```

    $output .= '<div class="breadcrumb">'. $crumbs .'</div>';

```
    return $output;
```
```
  }
```
```
}
```

Explicando o código:

Linha 2: carrega a variável de tema 'breadcrumb' (um array) para dentro de nossa própria variável.
Linha 3: testa se a variável não é vazia, caso seja verdadeiro, executa o resto do código.
Linha 6: providencia um cabeçalho navegacional para dar contexto aos links da trilha, para ajudar os usuários de leitores de tela.
Linha 7: adiciona o título da página atual ao final do array $breadcrumb.
Linha 8: conta o número de itens no array $breadcrumb.
Linhas 9 e 10: cria duas variáveis que serão úteis para o loop que vem a seguir.
Linha 11: executa um Loop, onde um trecho do código será repetido até que a condição não seja mais satisfeita. Ou seja, o código será executado enquanto a variável $i for menor que o número de itens contidos em $breadcrumb.
Linhas 12 a 18: cria elementos span com as classes breadcrumb-0, breadcrumb-1... breadcrumb-n, além das classes breadcrumb-first e breadcrumb-last para o primeiro e último item da trilha, respectivamente. Esses span irão envolver os links de cada item da trilha.
Linha 19: aqui nós envolvemos cada elemento de $breadcrumb (que são links que compõe a trilha) com os elementos span explicados acima.
Linha 20: adiciona +1 à nossa variável de iteração.
Linha 22: por fim, adiciona uma div container aos itens da nossa trilha.
Linha 23: retorno do $output, ou seja, da nossa nova trilha de navegação formada.

Bem, chegamos ao fim de mais um artigo, que no final saiu mais longo do que planejado. Espero que o mesmo seja proveitoso, e até a próxima!

E não deixem de me acompanhar no Twitter, eu costumo postar muitos links referentes ao Drupal, além muita abobrinha não relacionada.

Tópicos:

Drupal snippet Tutorial Módulos

2 comentários

Comente você também!

SNIPPET: Criando páginas com conteúdo programático sem usar o filtro PHP

Feliz ano novo, pessoas!

O primeiro artigo do ano é da coluna SNIPPET, e vai explicar como criar uma página que executa um código PHP qualquer, sem a necessidade de usar o módulo PHP Filter.

Tudo começou com um post do Joel Wallis sugerindo uma solução para quando um bloco customizado com código PHP incorreto quebra o seu projeto.

O José da Chuva-inc, a publicou um texto sugerindo que o ideal é não utilizar o filtro PHP pois o mesmo pode acarretar problemas de segurança. Em vez disso, ele ensinou a criar os blocos diretamente com PHP, através de um módulo customizado.

O próximo passo natural é evitar usar o filtro PHP na criação de páginas, pelos mesmos motivos apresentados pelo post do Zé.

Começando

Primeiro, crie uma pasta dentro da pasta /sites/all/modules com o nome do módulo que desejamos criar. Eu chamei-o criativamente de "páginas" (mas não use acentos no nome da pasta).

Dentro desta pasta, crie dois arquivos de texto vazios e renomeie-os para paginas.info e paginas.php.

Dentro de paginas.info vamos escrever o seguinte código:

```
name = Páginas com código PHP
```

description = Páginas customizadas para o meu projeto.

```
core = 7.x
```
```
package = Marcus VBP
```

Eu chamei o package de "Marcus VBP" porque é este o grupo em que o módulo irá aparecer na página de listagem de módulos. Você pode chamar do que quiser, obviamente.

E dentro do arquivos paginas.module vai o seguinte código:

```
<?php
```
```
 
```
```
function paginas_menu() {
```
```
  $items['custom/bazinga'] = array(
```
```
    'title' => 'Bazinga!',
```

    'page callback' => 'paginas_bazinga',

```
    'access callback' => TRUE,
```
```
    'type' => MENU_SUGGESTED_ITEM
```
```
  );
```
```
  return $items;
```
```
}
```

O primeiro passo é usar o hook_menu para criar o link para a página que iremos criar (o link em questão é custom/bazinga). As chaves utilizadas em cada array (onde cada array é o link que estamos criando) são os seguintes:

title: o título da página.
page callback: a função que irá construir o conteúdo da página (no nosso caso, é "paginas_bazinga").
access callback: o valor TRUE significa que esta página não tem restrições de acesso.
type: optei por usar a constante MENU_SUGGESTED_ITEM pois a mesma irá criar um item de menu, mas ele aparecerá desativado, dentro do menu "Navegação". Eu poderia omitir esta chave. O sistema utilizaria MENU_NORMAL_ITEM se for este o caso.

Eu poderia ainda especificar o menu onde o link apareceria, usando a chave menu_name. Como eu omiti, o Drupal utilizar o menu Navegação (Navigation) como padrão. Para mais detalhes sobre a função hook_menu, consulte a documentação.

O segundo e principal passo é criar a função paginas_bazinga, que conterá o conteúdo da página propriamente dito.

```
function paginas_bazinga() {
```
```
  $conteudo = '';
```

  $conteudo .= '<p>Esta é uma página com conteúdo customizado</p>';

  $conteudo .= '<p>'. format_date(time(),'short') .'</p>';

  $conteudo .= '<p>Proactively empower customer directed supply chains vis-a-vis enabled intellectual capital. Seamlessly supply strategic quality vectors rather than resource maximizing quality vectors. Distinctively extend web-enabled process improvements through user-centric markets. Synergistically integrate out-of-the-box portals after leading-edge opportunities. Objectively monetize professional leadership after proactive intellectual capital.</p>';

```
  return $conteudo;
```
```
}
```

Utilize "return" para que o conteúdo da página seja exibido dentro da área de conteúdo do seu site. Caso você utilize "print $conteudo" no lugar de "return $conteudo" o conteúdo será exibido diretamente, sem ser incluído no tema ou em qualquer tipo de estrutura. Eu preparei exemplos:

Como podem ver, o processo é bem simples, e ainda deixa seu projeto mais seguro.

Use sem moderação. Até a próxima!

Tópicos:

Drupal PHP snippet

1 comentário

Comente você também!

Criando um node programaticamente: um exemplo prático

Saudações meus amigos!

O artigo de hoje vai ensinar a criar um node programaticamente, no Drupal 7. A situação é a seguinte:

Quando o usuário autentica-se no site, será necessário verificar ele é autor de um node do tipo "Galeria de Fotos". Caso este conteúdo não exista, crie um. Caso o usuário já seja o autor de um node do tipo "Galeria de Fotos", não faça nada.

O usuário não pode ter permissão de criar, editar ou apagar galerias de fotos. As fotos que comporão a galeria serão inseridas posteriormente, através de programação.

Para realizar este serviço, criei um pequeno módulo chamado "auto user gallery" e no arquivo auto_user_gallery.module eu incluí o seguinte código:

// Esta função é executada no início do carregamento de páginas não cacheadas.

// Como o usuário vai efetuar login no site, a página inicial será recarregada.

```
function auto_user_gallery_init() {
```

// carrega os dados do usuário logado atual

```
  global $user;
```

// testa se estamos na página inicial e se o usuário não é anônimo

  if ((drupal_is_front_page() || empty($_GET['q'])) && $user->uid != 0) {

// verifica se já existe algum node do tipo "galeria_de_fotos"

    $galerias = db_select('node','nid')->fields('nid')->condition('uid', $user->uid, '=')->condition('type', 'galeria_de_fotos', '=')->orderBy('created', 'DESC')->execute()->fetchField();

// caso não exista, crie um novo node com as seguintes características

```
    if (empty($galerias)) {
```

      $node = new StdClass(); // define $node como um objeto

      $node->type = 'galeria_de_fotos'; // tipo do node

      node_object_prepare($node);  // preenche os demais dados do node

      $node->status = 1; // define o node como publicado

      $node->uid = $user->uid; // define o autor como o usuário atual

      $node->title = 'Galeria de ' . $user->name; // define o título do node

      $node->created = time(); // data de criação como o sendo a data atual

      $node->language = LANGUAGE_NONE; // define a linguagem como neutra

      node_save($node); // salva o node no banco de dados.

```
    }
```
```
  }
```
```
}
```

No meu caso, o campo "body" não é necessário, então o deixei em branco. Mas caso precise preencher o campo, é só seguir a lógica apresentada acima (dica, o módulo devel é seu amigo):

```
// Let's add standard body field
```

$node->body[$node->language][0]['value'] = 'Este é o texto do body';

$node->body[$node->language][0]['summary'] = 'Este é o sumário do campo';

$node->body[$node->language][0]['format'] = 'filtered_html'; // É necessário definir qual o formato de texto, caso o campo use este recurso

E para outros campos, é quase a mesma coisa:

$node->field_custom_name[$node->language][0]['value'] = 'este é o texto de um campo de texto customizado';

// se você usa um formato de texto no campo, não esqueça de defini-lo

$node->field_custom_name[$node->language][0]['format'] = 'filtered_html';

E por aí vai.

Preencher campos de arquivo e imagem é um pouco mais complexo, pois no Drupal 7 os arquivos são uma entidade também, e precisam ser descrevidos. Exemplo:

$file_path = drupal_realpath('somefile.png');

```
// Cria o file object
```
```
$file = (object) array(
```

          'uid' => $user->uid, // "dono" do arquivo

          'uri' => $file_path, // caminho para o arquivo

          'filemime' => file_get_mimetype($filepath), // pega o mimetype do arquivo

```
          'status' => 1,
```
```
 ); 
```

$file = file_copy($file, 'public://'); // Salva o arquivo na raiz da sua pasta files. Você pode especificar uma sub-pasta, usando public://imagens, por exemplo.

$node->field_image[$node->language][0] = (array)$file; //associa o file object com o campo de imagem

This is it. Este código é uma exemplo simples e muito prático da criação de um node programaticamente. Você pode criar usuários, comentários e termos de forma muito semelhante ao que foi mostrado aqui.

Este artigo foi parcialmente baseado neste artigo em inglês aqui.

Tópicos:

drupal 7 Drupal snippet Tutorial

3 comentários

Comente você também!

Marcus VBP

Desenvolvimento Web, Drupal, Ubuntu, Nerdices, e o que mais der na telha...

snippet

SNIPPET (e um Plus): Adicionando a Página atual à trilha de navegação

Mas antes, uma palavrinha sobre as trilhas de navegação

Adicionando uma trilha de navegação para uma seção em seu site

Finalmente, o Snippet: alterando o HTML da trilha de navegação

SNIPPET: Criando páginas com conteúdo programático sem usar o filtro PHP

Começando

Criando um node programaticamente: um exemplo prático

Páginas

Siga no Twitter

Assine por Email

Mais Comentados

Populares do dia

Informativo

Arquivo mensal

Tópicos

Meu Twitter