Personalizar node.tpl.php

personalizar node tpl 2

A cuantos les ha pasado que muchas veces queremos modificar la presentación de los campos de un tipo de contenido y lo único que podemos hacer desde la interfaz de drupal es modificar el orden de los campos, controlar si aparecen o no las etiquetas, mostrar las etiquetas encima o en la misma línea de su contenido y por último ocultar algunos campos en el teaser o full-node.

Pero que pasa si queremos agregar código en el teaser para mostrar por ejemplo los botones de las redes sociales o para cambiar las clases de los div que contienen los campos. En este caso necesitamos modificar el archivo que controla la presentación de los campos del tipo de contenido, el archivo se llama node.tpl.php

Ahora tenemos que duplicar y luego renombrar el archivo node.tpl.php para modificar la presentación de un tipo de contenido específico, el archivo node.tpl.php lo puedes encontrar en la raíz de tu sitio drupal en el directorio modules/node/node.tpl.php.

node-tpl

 

Si tienes un tipo de contenido llamado “articulo” entonces el nuevo archivo duplicado debe de llamarse  node – – articulo.tpl.php (todo junto sin espacios en blanco).

En este nuevo archivo es donde vamos a modificar el código como en el siguiente ejemplo:

Primero vamos a identificar dónde vamos a poner el código para el teaser node y para el full node.

// forma 1
<?php if ($view_mode == 'teaser'): ?>
  // acá el código para el teaser o resumen
<?php endif; ?>

<?php if ($view_mode == 'full'): ?>
  // acá el código para el full-node o presentación completa del nodo
<?php endif; ?>
// forma 2
if ($teaser){
 // acá el código para el teaser o resumen
}else{
 // acá el código para el full-node o presentación completa del nodo
}

Ahora en la parte del teaser vamos a mostrar el título del nodo.

print '<a href="'.$node_url.'">'.$title.'</a>';

Ahora mostramos la foto, el autor y la fecha de envío.

if ($display_submitted){
 print $user_picture;
 print $submitted;
}

Ahora mostramos la imagen, para este ejemplo tengo un campo creado llamado “field_image“.

// forma 1
print render($content['field_image']);
// forma 2
$image_uri = $node->field_image['und'][0]['uri'];
if(!$image_uri){
 // si no hay imagen se muestra la imagen default
 $image_uri = 'default.jpg';
}
$image_path = file_create_url($image_uri);
$image_url_with_style = image_style_url('thumbnail',$image_uri);
print '<img class="img-thumbnail" src="'.$image_url_with_style.'">';

Ahora mostramos el cuerpo o body.

print render($content['body']);

Ahora mostramos todos los elementos de un campo adjunto, o sea de un campo tipo file, para este ejemplo tengo un campo creado llamado “field_adjunto“.

// forma 1
print render($content['field_adjunto']);
// forma 2
if(isset($node->field_adjunto['und'][0]['fid'])){
 $file = field_get_items('node', $node, 'field_adjunto');
 $url = file_create_url($file[0]['uri']);
 $file_name = file_create_url($file[0]['filename']);
 
 foreach ($file as $key=>$value) {
 $output = field_view_value('node', $node, 'field_adjunto', $file[$key]);
 print render($output);
 }
}