display suite - drupal.cat

26
Display Suite Luis Ortiz Ramos 9/02/2012 Drupal.cat www.ateneatech.com

Upload: atenea-tech

Post on 08-May-2015

1.955 views

Category:

Technology


2 download

DESCRIPTION

Display Suite permet prendre el control sobre com les entitats (continguts, usuaris, termes de taxonomies,...) es pinten sense haver de fer-ho picant codi al tema de la nostra Web. Ens permet fer servir disposicions amb multiples columnes, gestionar el codi que es genera per a cada camp, crear-ne de nous, i s'integra amb el Views i el Panels (si volem). - Característiques principals de DS: Disposicions, Camps, Estils, Modes de visualització. - Extres: Plantilles de camps, Mode de visualització per node, Cambiador de mode de visualització, Mode de visualització revisió, Opcions de títol de pàgina, Regió a bloc - Integració amb altres mòduls: Views, Panels, Field groups, Renderable elements

TRANSCRIPT

Page 1: Display suite - Drupal.cat

Display SuiteLuis Ortiz Ramos

9/02/2012Drupal.cat

www.ateneatech.com

Page 2: Display suite - Drupal.cat

Qui soc

Luis Ortiz Ramos

@luisortizramos a Twitter

[email protected]

Cofundador d'Atenea tech

www.ateneatech.com

Page 3: Display suite - Drupal.cat

“Drupal i eliminar l'intermediari”Dries Buytaert, Abril de 2007

www.ateneatech.com

Page 4: Display suite - Drupal.cat

“Crec que hi ha un gran valor en perfeccionar les tecnologies que es varen crear per eliminar al

webmaster, al desenvolupador, i al disenyador. D'això és del que tracta Drupal”

www.ateneatech.com

Page 5: Display suite - Drupal.cat

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

Page 6: Display suite - Drupal.cat

“... estem fent fàcil per a tothom construir llocs web potents.”

www.ateneatech.com

Page 7: Display suite - Drupal.cat

Sense Display Suite :(

www.ateneatech.com

Page 8: Display suite - Drupal.cat
Page 9: Display suite - Drupal.cat

No hi ha opcions per a seleccionar la disposició.

www.ateneatech.com

Page 10: Display suite - Drupal.cat

Exemple

Volem canviar la disposició dels nodes d'un tipus de contingut “article”

Solució: al tema personalitzat:

● Copiar node.tpl.php al nostre tema.

● Duplicar-lo i renombrar-lo a node—article.tpl.php.

● Editar el PHP d'aquest últim arxiu:

● Incloure la nova disposició● Pintar els camps on toqui

www.ateneatech.com

Page 11: Display suite - Drupal.cat

Els modes de visualització són fixos.

www.ateneatech.com

Page 12: Display suite - Drupal.cat

Exemple

Volem fer un mode de visualització per fer servir en una vista amb resums especials a la pàgina d'inici.

Solució: a un mòdul propi:● Implementar hook_entity_info_alter()

www.ateneatech.com

Page 13: Display suite - Drupal.cat

/**

* Implements hook_entity_info_alter().

*/

function MODUL_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

Page 14: Display suite - Drupal.cat

No es poden afegir elements a la visualització.

www.ateneatech.com

Page 15: Display suite - Drupal.cat

Exemple

Volem un element que mostri AddThis als articles

Solució: a un mòdul propi:● Implementar hook_field_extra_field() per a

definir el nou element.● Implementar hook_node_view() per a pintar

l'element.

www.ateneatech.com

Page 16: Display suite - Drupal.cat

/**

* Implements hook_field_extra_fields().

*/

function MODUL_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 CODI HTML QUE DONA ADDTHIS...');

}

}

www.ateneatech.com

Page 17: Display suite - Drupal.cat

No es pot determinar la sortida HTML dels camps.

www.ateneatech.com

Page 18: Display suite - Drupal.cat

Exemple

Volem simplificar la sortida del camp Cos dels Articles

Solució “fàcil”: al tema personalitzat:

● Copiar field.tpl.php

● Duplicar aquest arxiu i li diem field—body—article.tpl.php

● Editar el PHP d'aquest arxiu per a modificar la sortida del camp.

www.ateneatech.com

Page 19: Display suite - Drupal.cat

No és possible ocultar el títol de les pàgines.

www.ateneatech.com

Page 20: Display suite - Drupal.cat

Exemple

Volem ocultar el títol de la pàgina dels continguts de tipus “Pàgina bàsica”

Solució: al tema personalitzat● Creem un arxiu anomenat template.php● Implementem theme_process_page()

www.ateneatech.com

Page 21: Display suite - Drupal.cat

/**

* Implements hook_process_page().

*/

function TEMA_process_page(&$vars) {

if ($vars['node'] && $vars['node']->type=='page') {

unset($vars['title']);

}

}

www.ateneatech.com

Page 22: Display suite - Drupal.cat

No és possible fer servir contingut d'una entitat fora del bloc de contingut ni a l'inrevés.

www.ateneatech.com

Page 23: Display suite - Drupal.cat

Exemple

Volem mostrar el valor del camp 'icona' de l'article a la barra lateral.

Solució: fer una vista que mostri la icona, rebi com a filtre contextual l'identificador del node i generi un bloc, col·locar-lo a la barra lateral i configurar-lo per a que només es vegi quan estem a la pàgina d'un article.

www.ateneatech.com

Page 24: Display suite - Drupal.cat

Resum

● No hi ha opcions per a seleccionar la disposició.● Els modes de visualització son fixos.● No es poden afegir elements a la visualització.● No es pot determinar la sortida HTML dels

camps.● No és possible ocultar el títol de les pàgines.● No és possible fer servir contingut d'una entitat

fora del bloc de contingut ni a l'inrevés.

www.ateneatech.com

Page 25: Display suite - Drupal.cat

Amb Display Suite :)

www.ateneatech.com

Page 26: Display suite - Drupal.cat

Demo

www.ateneatech.com