Presentación sobre Display Suite en el Drupal Day Valencia 2012
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 3,864 views

Presentación de este útil módulo de Drupal por Luis Ortiz Ramos de Atenea tech.

Presentación de este útil módulo de Drupal por Luis Ortiz Ramos de Atenea tech.

Statistics

Views

Total Views
3,864
Views on SlideShare
3,518
Embed Views
346

Actions

Likes
4
Downloads
20
Comments
0

1 Embed 346

http://ateneatech.com 346

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Display SuiteLuis Ortiz Ramos28/04/2012Drupal Day Valencia 2012 www.ateneatech.com
  • 2. ¿Quién soy? Luis Ortiz Ramos @luisortizramos en Twitter luis@ateneatech.com Cofundador dAtenea 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 alwebmaster, 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, MenuBreadcrumb, 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.comcreate 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
  • 8. No hay opciones para seleccionar la disposición. www.ateneatech.com
  • 9. EjemploQueremos cambiar la disposición de los nodos del tipos decontenido “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. Los modos de visualización son fijos. www.ateneatech.com
  • 11. EjemploQueremos tener un modo de visualizaciónpersonalizado que usaremos en una vista en lapágina de inicio.Solución: en un módulo propio:● Implementar hook_entity_info_alter() www.ateneatech.com
  • 12. /*** Implements hook_entity_info_alter().*/functionMODULO_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. No se pueden añadir elementos a la visualización. www.ateneatech.com
  • 14. EjemploQueremos añadir un elemento que muestreAddThis 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. /*** 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. No se puede determinar el HTML de los campos. www.ateneatech.com
  • 17. EjemploQueremos simplificar la salida del campo “Cuerpo” de losnodos 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. No se puede ocultar el título de las páginas. www.ateneatech.com
  • 19. EjemploQueremos ocultar el título de la página de loscontenidos del tipo “Artículo”Solución: en el tema personalizado● Creamos un archivo llamado template.php● Implementamos theme_process_page() www.ateneatech.com
  • 20. /** * Implements hook_process_page(). */function TEMA_process_page(&$vars) { if ($vars[node] && $vars[node]->type==article) { unset($vars[title]); }} www.ateneatech.com
  • 21. No se puede utilizar contenido de una entidad fuera del bloque del contenido. www.ateneatech.com
  • 22. EjemploQueremos mostrar el campo “Imagen” de losnodos del tipo “Artículo” en la region“Destacados”.Solución: hacer una vista que muestre la imagen,con un filtro contextual para el identificador delnodo, que genere un bloque i ponerlo en la regiónque toque. www.ateneatech.com
  • 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. Con Display Suite... www.ateneatech.com
  • 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. Demo www.ateneatech.com
  • 27. One more thing... www.ateneatech.com
  • 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. Crear un “layout” en nuestro tema● .inc describe el layout:<?phpfunction 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. 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. 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. 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. ¿Preguntas? www.ateneatech.com