- No hay opciones para seleccionar la disposición o modos de visualización en Drupal sin Display Suite.
- No se pueden añadir elementos personalizados a la visualización de contenido.
- No se puede determinar fácilmente el HTML de los campos o ocultar el título de páginas.
- No se puede utilizar contenido de una entidad fuera del bloque de contenido principal.
Display Suite resuelve estas limitaciones permitiendo seleccionar disposiciones, añadir elementos y campos personalizados, determinar HTML, ocultar títulos y
2. ¿Quién soy?
Luis Ortiz Ramos
@luisortizramos en Twitter
luis@ateneatech.com
Cofundador d'Atenea tech
www.ateneatech.com
3. “Drupal y eliminar el intermediario”
Dries Buytaert, Abril de 2007
www.ateneatech.com
4. “Creo que hay un gran valor en perfeccionar las
tecnologías que se han creado para eliminar al
webmaster, al desarrollador/programador y al
diseñador. De esto es de lo que trata Drupal.”
www.ateneatech.com
9. No hay opciones para seleccionar la disposición.
www.ateneatech.com
10. Ejemplo
Queremos cambiar la disposición de los nodos del tipos de
contenido “Artículo”
Solución: en el tema personalizado:
● Copiar node.tpl.php en nuestro tema.
● Duplicarlo y renombrarlo a node—article.tpl.php
● Editar el PHP de este último archivo:
● Incluir la nueva disposición
● Pintar los campos donde toque
www.ateneatech.com
11. Los modos de visualización son fijos.
www.ateneatech.com
12. Ejemplo
Queremos tener un modo de visualización
personalizado que usaremos en una vista en la
página de inicio.
Solución: en un módulo propio:
● Implementar hook_entity_info_alter()
www.ateneatech.com
14. No se pueden añadir elementos a la
visualización.
www.ateneatech.com
15. Ejemplo
Queremos añadir un elemento que muestre
AddThis en los nodos de tipo “Artículo”.
Solución: en un módulo propio:
● Implementar hook_field_extra_field() para
definir el nuevo elemento.
● Implementar hook_node_view() para pintar el
nuevo elemento.
www.ateneatech.com
17. No se puede determinar el HTML de los campos.
www.ateneatech.com
18. Ejemplo
Queremos simplificar la salida del campo “Cuerpo” de los
nodos de tipo “Artículo”.
Solución “fácil”: en el tema personalizado:
● Copiar field.tpl.php
● Duplicar este archivo y renombrarlo a field—body—
article.tpl.php
● Editar el PHP de este último archivo para modificar el HTML del
campo.
www.ateneatech.com
19. No se puede ocultar el título de las páginas.
www.ateneatech.com
20. Ejemplo
Queremos ocultar el título de la página de los
contenidos del tipo “Artículo”
Solución: en el tema personalizado
● Creamos un archivo llamado template.php
● Implementamos theme_process_page()
www.ateneatech.com
21. /**
* Implements hook_process_page().
*/
function TEMA_process_page(&$vars) {
if ($vars['node'] && $vars['node']->type=='article') {
unset($vars['title']);
}
}
www.ateneatech.com
22. No se puede utilizar contenido de una entidad
fuera del bloque del contenido.
www.ateneatech.com
23. Ejemplo
Queremos mostrar el campo “Imagen” de los
nodos del tipo “Artículo” en la region
“Destacados”.
Solución: hacer una vista que muestre la imagen,
con un filtro contextual para el identificador del
nodo, que genere un bloque i ponerlo en la región
que toque.
www.ateneatech.com
24. Resumen
● No hay opciones para seleccionar la disposición.
● Los modos de visualización son fijos.
● No se pueden añadir elementos a la visualización.
● No se puede determinar el HTML de los campos.
● No se puede ocultar el título de las páginas.
● No se puede utilizar contenido de una entidad fuera
del bloque del contenido.
www.ateneatech.com
26. ● Seleccionar la disposición → Layouts
● Modos de visualización → View modes
● Elementos a la visualización → Fields
● Determinar el HTML de los campos → Fields display and
Styles
● Ocultar el título de las páginas → Page title options
● Utilizar contenido de una entidad fuera del bloque del
contenido → Region to block
¡Sin programar
una linea de código!
www.ateneatech.com
29. Crear un “layout” en nuestro tema
● Creamos la estructura de archivos para el
“layout”:
my_theme/ds_layouts/small_left_col/small_left_col.inc
/small-left-col.tpl.php
/small_left_col.css
www.ateneatech.com
30. Crear un “layout” en nuestro tema
● .inc describe el layout:
<?php
function ds_small_left_col() {
return array(
'label' => t('Small Left Column'),
'regions' => array(
'left' => t('Left'),
...
),
'css' => TRUE, // Add this line if there is a default css file.
);
}
?>
www.ateneatech.com
31. Crear un “layout” en nuestro tema
● .tpl.php describe el HTML:
<div class="<?php print $classes;?> clearfix">
<?php if (isset($title_suffix['contextual_links'])): ?>
<?php print render($title_suffix['contextual_links']); ?>
<?php endif; ?>
<?php if ($left): ?>
<div class="ds-left<?php print $left_classes; ?>">
<?php print $left; ?>
</div>
<?php endif; ?>
...
</div>
www.ateneatech.com
32. Crear un “layout” en nuestro tema
● .css el estilo (y es opcional):
.ds-left {
width: 20%;
float: left;
}
.ds-right {
width: 80%;
float: right;
}
www.ateneatech.com
33. Crear un “layout” en nuestro tema
● .tpl.php describe el HTML:
<div class="<?php print $classes;?> clearfix">
<?php if (isset($title_suffix['contextual_links'])): ?>
<?php print render($title_suffix['contextual_links']); ?>
<?php endif; ?>
<?php if ($left): ?>
<div class="ds-left<?php print $left_classes; ?>">
<?php print $left; ?>
</div>
<?php endif; ?>
...
</div>
www.ateneatech.com