- 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

1. Display Suite
Luis Ortiz Ramos
28/04/2012
Drupal Day Valencia 2012
www.ateneatech.com

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

5. Views, Token, Pathauto, Chaos tool suite (ctools), Content Construction Kit (CCK), Administration
menu, Wysiwyg, Date, IMCE, FileField, Google Analytics, ImageAPI, Webform, ImageField,
ImageCache, Link, Advanced help, CAPTCHA, Backup and Migrate, jQuery UI, CKEditor -
WYSIWYG HTML editor, Panels, jQuery Update, XML sitemap, Poormanscron, Lightbox2, Libraries
API, IMCE Wysiwyg bridge, Devel, Nodewords: D6 Meta Tags, Views Slideshow, Global Redirect,
Transliteration, Page Title, Image, Rules, Zen, Entity API, Calendar, Menu block, Voting API,
Features, Email Field, Nice Menus, Internationalization, Site map, Views Bulk Operations (VBO),
Colorbox, Printer, e-mail and PDF versions, Path redirect, FCKeditor - WYSIWYG HTML editor,
Context, LoginToboggan, Automatic Nodetitles, Fivestar, Ubercart, Better Formats, Location,
Embedded Media Field, Localization update, Content Profile, GMap Module, External Links,
Simplenews, Mollom, Vertical Tabs, Media, Taxonomy menu, Content Access, Tagadelic, Content
Templates (Contemplate), Admin, ImageCache Actions, Admin role, References, Skinr, Mime Mail,
Scheduler, Insert, Fusion, Media: YouTube, Taxonomy Manager, Content Taxonomy, Menu
Breadcrumb, Job Scheduler, Quick Tabs, reCAPTCHA, Diff, Strongarm, Node clone, SEO Checklist,
Feeds, Custom breadcrumbs, jQuery plugins, Site verification, Superfish, Field group, Search 404,
DHTML Menu, Privatemsg, ImageCache Profiles, SWF Tools, jCarousel, Flag, Views Bonus Pack,
Views Custom Field, Organic groups, getID3(), File (Field) Paths, Variable, Nodequeue, Menu per
Role, AdaptiveTheme, Advanced Forum, SMTP Authentication Support, Module Filter, Author Pane,
Menu attributes, Login Destination, Frequently Asked Questions, IMCE Mkdir, Messaging, Marinelli,
Thickbox, FileField Sources, Image Resize Filter, AddThis, Node Reference URL Widget, Twitter,
String Overrides, Display suite, Image Assist, Danland, Masquerade, Language icons, Service links,
ACL, Notifications, Omega - Responsive HTML5 Base Theme, Secure Pages, Views attach, Share
Buttons (AddToAny) by Lockerz, Computed Field, Front Page, Meta tags quick, Invite, Pathologic,
Autoload, Redirect, Comment notify, Address Field, Hierarchical Select, Meta tags, Node export,
Menu Trails, Dynamic display block, Boost, Block Class, Gallery Assist, Imagefield Crop, Advanced
Profile Kit, Better Exposed Filters, AdSense, SpamSpan filter, Taxonomy Image, Video, Conditional
Fields, Node import, Webform Validation, OAuth, Google chart API, Workflow, Services, Image
FUpload, Custom Search, Tao, Tabs (jQuery UI tabs), Styles, Gallery formatter, Pixture Reloaded,
Facebook social plugins integration, Acquia Marina, RealName, 404 Blocks, Multiple forms,
BUEditor, CSS Injector, DraggableViews, Event, BlueMasters, CKEditor Link - A plugin to easily
www.ateneatech.com
create links to Drupal internal paths, Search configuration, Views Accordion, Shadowbox, Javascript
Tools, LDAP integration, HTML Purifier, Semantic Views, Localization client, Apache Solr Search

6. “Estamos haciendo fácil para todo el mundo
construir sitios web potentes.”
www.ateneatech.com

7. Sin Display Suite...
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

13. /**
* Implements hook_entity_info_alter().
*/
function
MODULO_entity_info_alter(&$entity_info) {
$entity_info['node']['view modes']
['front_page_teaser'] = array(
'label' => t('Front page teaser'),
'custom settings' => TRUE,
);
}
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

16. /**
* Implements hook_field_extra_fields().
*/
function MODULO_field_extra_fields() {
$extras['node']['article']['display']['addthis'] = array(
'label' => t('AddThis'),
'description' => t('AddThis'),
'weight' => 0,
);
return $extras;
}
/**
* Implements hook_node_view().
*/
function MODUL_node_view($node, $view_mode, $langcode) {
if ($node->type=='article') {
$node->content['addthis'] = array('#markup' => 'EL CÓDIGO DE ADDTHIS');
}
}
●
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

25. Con Display Suite...
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

27. Demo
www.ateneatech.com

28. One more thing...
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

34. ¿Preguntas?
www.ateneatech.com