Successfully reported this slideshow.
Your SlideShare is downloading. ×

Presentación sobre Display Suite en el Drupal Day Valencia 2012

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Html5
Html5
Loading in …3
×

Check these out next

1 of 34 Ad
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (16)

Advertisement

Similar to Presentación sobre Display Suite en el Drupal Day Valencia 2012 (20)

More from Atenea tech (20)

Advertisement

Recently uploaded (20)

Presentación sobre Display Suite en el Drupal Day Valencia 2012

  1. 1. Display Suite Luis Ortiz Ramos 28/04/2012 Drupal Day Valencia 2012 www.ateneatech.com
  2. 2. ¿Quién soy? Luis Ortiz Ramos @luisortizramos en Twitter luis@ateneatech.com Cofundador d'Atenea tech www.ateneatech.com
  3. 3. “Drupal y eliminar el intermediario” Dries Buytaert, Abril de 2007 www.ateneatech.com
  4. 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. 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. 6. “Estamos haciendo fácil para todo el mundo construir sitios web potentes.” www.ateneatech.com
  7. 7. Sin Display Suite... www.ateneatech.com
  8. 8. No hay opciones para seleccionar la disposición. www.ateneatech.com
  9. 9. 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
  10. 10. Los modos de visualización son fijos. www.ateneatech.com
  11. 11. 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
  12. 12. /** * 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
  13. 13. No se pueden añadir elementos a la visualización. www.ateneatech.com
  14. 14. 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
  15. 15. /** * 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
  16. 16. No se puede determinar el HTML de los campos. www.ateneatech.com
  17. 17. 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
  18. 18. No se puede ocultar el título de las páginas. www.ateneatech.com
  19. 19. 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
  20. 20. /** * Implements hook_process_page(). */ function TEMA_process_page(&$vars) { if ($vars['node'] && $vars['node']->type=='article') { unset($vars['title']); } } www.ateneatech.com
  21. 21. No se puede utilizar contenido de una entidad fuera del bloque del contenido. www.ateneatech.com
  22. 22. 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
  23. 23. 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
  24. 24. Con Display Suite... www.ateneatech.com
  25. 25. ● 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
  26. 26. Demo www.ateneatech.com
  27. 27. One more thing... www.ateneatech.com
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. ¿Preguntas? www.ateneatech.com

×