presentación sobre display suite en el drupal day valencia 2012
DESCRIPTION
Presentación de este útil módulo de Drupal por Luis Ortiz Ramos de Atenea tech.TRANSCRIPT
Display SuiteLuis Ortiz Ramos
28/04/2012Drupal Day Valencia 2012
www.ateneatech.com
¿Quién soy?
Luis Ortiz Ramos
@luisortizramos en Twitter
Cofundador d'Atenea tech
www.ateneatech.com
“Drupal y eliminar el intermediario”Dries Buytaert, Abril de 2007
www.ateneatech.com
“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
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
create links to Drupal internal paths, Search configuration, Views Accordion, Shadowbox, Javascript Tools, LDAP integration, HTML Purifier, Semantic Views, Localization client, Apache Solr Search
Integration, Rubik, Drupal Commerce, Phone, Media: Vimeo, Boxes, Alter profile page, MimeDetect, Node Blocks, Contact Forms, Corporate Clean, Insert View, Viewfield, Administration theme,
Schema, Mail System, Markdown filter
www.ateneatech.com
“Estamos haciendo fácil para todo el mundo construir sitios web potentes.”
www.ateneatech.com
Sin Display Suite...
www.ateneatech.com
No hay opciones para seleccionar la disposición.
www.ateneatech.com
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
Los modos de visualización son fijos.
www.ateneatech.com
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
/**
* 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
No se pueden añadir elementos a la visualización.
www.ateneatech.com
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
/**
* 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
No se puede determinar el HTML de los campos.
www.ateneatech.com
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
No se puede ocultar el título de las páginas.
www.ateneatech.com
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
/**
* Implements hook_process_page().
*/
function TEMA_process_page(&$vars) {
if ($vars['node'] && $vars['node']->type=='article') {
unset($vars['title']);
}
}
www.ateneatech.com
No se puede utilizar contenido de una entidad fuera del bloque del contenido.
www.ateneatech.com
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
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
Con Display Suite...
www.ateneatech.com
● 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
Demo
www.ateneatech.com
One more thing...
www.ateneatech.com
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
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
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
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
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
¿Preguntas?
www.ateneatech.com