Theming DrupalOskar Calvocalvo.oskar@gmail.com – Documentados consultora Drupal
Theming Drupal       • Oskar         – + 5 años con Drupal.         – Implicado en la           comunidad.         – Docum...
Theming DrupalWe Dont hack core&We dont hack anything                                            Oskar Calvo   3          ...
Theming DrupalWhe hook sheORwe override itORwe preprocess them.                                              Oskar Calvo  ...
Theming Drupal• Para entender mejor esta presentación recomiendo a  todo el mundo que se vea  la presentación de Alessandr...
Theming Drupal• ¿Qué veremos?           • ¿Qué no veremos?  – Temas, starters         – No veremos todo  – Profesionales. ...
Theming Drupal• Temas de Drupal  – ¿Porqué tiene menos temas que otros cms?  – ¿Qué son los Starter Themes?    •   Basic  ...
Theming Drupal• Los profesionales de Drupal suelen ser  denominados Frontend developers.  Vamos a dividirlos en 4 tipos de...
Theming Drupal                                   Oskar Calvo   9           Mail speaker – company or community
Theming Drupal• Skinner:  – Únicamente se encargan de hacer las hojas    de estilo. Su profesionalidad se centra en    cre...
Theming Drupal• Visual effects builders:  – Son aquellos profesionales que programan en    javascript, jquery u otras libr...
Theming Drupal• Theming architects:  – Estos especialistas se especializan sobre todo en    la configuración de módulos, n...
Theming Drupal• Frontend developers  – Profesionales completos, además de todo lo    anterior son capaces de programar tod...
Theming Drupal       • Atletas completos         – Fuerzar - Php         – Agilidad - Js         – Potencia - Módulos     ...
Theming Drupal• PAC:  – Drupal usa el sistema PAC para su motor de    temas.  – La forma de entender PAC imaginar un contr...
Theming Drupal                                   Oskar Calvo   16           Mail speaker – company or community
Theming Drupal                                   Oskar Calvo   17           Mail speaker – company or community
Theming Drupal                                   Oskar Calvo   18           Mail speaker – company or community
Theming Drupal• Donde instalamos los temas:  – Nunca en la carpeta theme de la raíz.  – Los instalamos en /raiz/sites/all/...
Theming Drupal• Temas de Drupal, archivos:  – *.info  – Template.php  – *.tpl.php  – *.css (no lo veremos)  – *.jss (no lo...
Theming Drupal• Ejemplo de bartik                                                  Oskar Calvo   21                       ...
Theming Drupal• *.info  – definen la información básica de los temas de    Drupal y son obligatorios.  – Se definen los si...
Theming Drupal                                   Oskar Calvo   23           Mail speaker – company or community
Theming Drupal• *.info  – El css añadido mediante el archivo *.info se carga    solo en el tema correspondiente.  – El js ...
Theming Drupal• *.info  – Agregamos nuevas regiones.                regions[newregion] = New region                       ...
Theming Drupal• Template.php (empezamos con la chicha).For all the conditional logic and data processing of the output, th...
Theming Drupal• Template.php  – Template.php es el último archivo antes de pasar toda la    información a las variables de...
Theming Drupal                                   Oskar Calvo   28           Mail speaker – company or community
Theming Drupal                                   Oskar Calvo   29           Mail speaker – company or community
Theming Drupal• ¿Qué podemos hacer?  – Override theme functions  – Override Preprocess functions                          ...
Theming Drupal• Override theme function  – Drupal nos permite “re-escribir” una función de tema para modificarlo a    las ...
Theming Drupal•   function mytheme_menu_local_tasks() {•       $output = ;•       if ($primary = menu_primary_local_tasks(...
Theming Drupal• Override preprocess function  – Los hooks de preprocesamiento permite modificar    la salida de informació...
Theming Drupal• /**•   * Override or insert variables into the node template.•   */• function mytheme_preprocess_node(&$va...
Theming Drupal• Template.php  – De los más normal en un tema de drupal:   function mytheme_preprocess_page(&$vars) {     $...
Theming Drupal• Template.php  – En un módulo sustituimos la función    mytheme_preprocess_page por    mymodule_preprocess_...
Theming Drupal• ¿Que no debemos hacer en template.php?  – Embeber Vistas.  – Realizar consultas a la base de datos.    El ...
Theming Drupal                                   Oskar Calvo   38           Mail speaker – company or community
Theming Drupal• *.tpl.php  – Los archivos tpl.php se encuentra dentro del    directorio templates.  – Los archivos tpl de ...
Theming Drupal• *.tpl.php  – Estos archivos contienen diferentes tipos de    información y y tamaño. Podemos tener un arch...
Theming Drupal• *.tpl.php  – Esta forma de trabajar tiene una doble cara, por un    lado tenemos una gran flexibilidad a l...
Theming Drupal• ¿Qué se puede hacer en un tpl.php?  – Desgraciadamente, muchos desarrolladores al ver    que los tpls de d...
Theming Drupal• ¿Porqué lo hacen?  – Cometen este error porque en los archivos tpls    viene toda la información que se va...
Theming Drupal• ¿Qué supone hacerlo?  – Los archivos tpls son la “meta”, si en dicha meta le    metemos funciones (consult...
Theming Drupal• ¿Qué debería haber en un tpl?  – <?php print $vars; ?>  – <?php if($vars): ?>html<? Endif; ?>  – <?php hid...
Theming Drupal• Agregar tpls a nuestros módulos.  – Toca ver código de módulos (será compartido en    breve).  – Veremos c...
Theming Drupal• Sobreescribir tpls existentes de módulos.  – Simplemente copiamos y pegamos el tpl del    módulo en nuestr...
Theming Drupal• Tlps en views, panels, display suit, etc...  – Siempre, siempre que exportemos a feature un    módulo con ...
Theming Drupal• Algunas funciones de theming de ejemplo  habituales.                                                    Os...
Theming Drupal<?php   $variables = array(      path => path/to/img.jpg,      alt => Test alt,      title => Test title,   ...
Theming Drupal<?php $config = array(   "style_name" => "my_image_style_name",   "path" =>image_style_path(large,logogrupos...
Theming Drupal<?php   l(t(Link text), about­us, array(attributes =>array(class => array(about-link, another-class))));?>  ...
Theming Drupal• Crear nuevas regiones en un tema.  – regions[sidebar_first] = Sidebar first  – <?php if ($page[sidebar_fir...
Theming Drupal• Módulos interesantes de Drupal.  – Muchos módulos de Drupal están a caballo entre    módulos como producto...
Theming Drupal• Image (imagecache).  – Es un módulo del core que permite crear “presets” de    imágenes, un preset es una ...
Theming Drupal• Display Suit  – Display Suite allows you to take full control over how your content is    displayed using ...
Theming Drupal• Views  – De views hay dos dichos.     • No se cual es tu pregunta,pero si mi respuesta “Views”.     • ¿Qué...
Theming Drupal• Panels  – Si views es el “Query Builder” Panels es “Pager builder”.  – Panels permite definir páginas, def...
Theming Drupal• Custom Pages  – Custom Pages, a diferencia de panels lo que nos    permite únicamente es definir archivos ...
Theming Drupal• Sweaver.  – El módulo Sweaver es un editor wysiwyg del css    de tu tema de drupal.  – Lo mejor será que l...
Theming Drupal• Devel y devel themer  – Dos módulos fundamentales para cualquier    profesional de Drupal                 ...
Themign drupal• Las imágenes escaneadas 17-30 pertenecen  al libro Drupal 7 module development, que  tiene los capítulos 3...
Oskar Calvo   63                                                    Mail speaker – company or communityhttp://gengibresolu...
Oskar Calvo   64Mail speaker – company or community
Upcoming SlideShare
Loading in …5
×

Drupal theming

515 views
439 views

Published on

gengibre soluciones informaticas

http://gengibresolucionesinformaticas.xtrweb.com/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
515
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Drupal theming

  1. 1. Theming DrupalOskar Calvocalvo.oskar@gmail.com – Documentados consultora Drupal
  2. 2. Theming Drupal • Oskar – + 5 años con Drupal. – Implicado en la comunidad. – Documentados proyecto personal. – Otras empresas. Oskar Calvo 2 Mail speaker – company or community
  3. 3. Theming DrupalWe Dont hack core&We dont hack anything Oskar Calvo 3 Mail speaker – company or community
  4. 4. Theming DrupalWhe hook sheORwe override itORwe preprocess them. Oskar Calvo 4 Mail speaker – company or community
  5. 5. Theming Drupal• Para entender mejor esta presentación recomiendo a todo el mundo que se vea la presentación de Alessandro Mascherpa Guinot porque entenderá mucho mejor el apartado de Theming Drupal Oskar Calvo 5 Mail speaker – company or community
  6. 6. Theming Drupal• ¿Qué veremos? • ¿Qué no veremos? – Temas, starters – No veremos todo – Profesionales. theming, es muy – Tipos de archivos. amplio. – Funciones theme() – No serás un experto después de la charla, – Hook_theme sorry. – Módulos intersantes Oskar Calvo 6 Mail speaker – company or community
  7. 7. Theming Drupal• Temas de Drupal – ¿Porqué tiene menos temas que otros cms? – ¿Qué son los Starter Themes? • Basic • Zen • Start • …. Oskar Calvo 7 Mail speaker – company or community
  8. 8. Theming Drupal• Los profesionales de Drupal suelen ser denominados Frontend developers. Vamos a dividirlos en 4 tipos de profesionales según sus conocimientos.• ¿Qué es un Frontend developer de Drupal? Oskar Calvo 8 Mail speaker – company or community
  9. 9. Theming Drupal Oskar Calvo 9 Mail speaker – company or community
  10. 10. Theming Drupal• Skinner: – Únicamente se encargan de hacer las hojas de estilo. Su profesionalidad se centra en crear hojas de estilo. Oskar Calvo 10 Mail speaker – company or community
  11. 11. Theming Drupal• Visual effects builders: – Son aquellos profesionales que programan en javascript, jquery u otras librerías, además de programar las hojas de estilo Oskar Calvo 11 Mail speaker – company or community
  12. 12. Theming Drupal• Theming architects: – Estos especialistas se especializan sobre todo en la configuración de módulos, no siempre manejan css o js, ya que los propios módulos lo dan. Oskar Calvo 12 Mail speaker – company or community
  13. 13. Theming Drupal• Frontend developers – Profesionales completos, además de todo lo anterior son capaces de programar todas las líneas de código de php que necesitan. Oskar Calvo 13 Mail speaker – company or community
  14. 14. Theming Drupal • Atletas completos – Fuerzar - Php – Agilidad - Js – Potencia - Módulos – Resistencia - Css Oskar Calvo 14 Mail speaker – company or community
  15. 15. Theming Drupal• PAC: – Drupal usa el sistema PAC para su motor de temas. – La forma de entender PAC imaginar un controlador de vuelo que va dando paso a las funciones de temas / tpls correspondientes según se requieran. Oskar Calvo 15 Mail speaker – company or community
  16. 16. Theming Drupal Oskar Calvo 16 Mail speaker – company or community
  17. 17. Theming Drupal Oskar Calvo 17 Mail speaker – company or community
  18. 18. Theming Drupal Oskar Calvo 18 Mail speaker – company or community
  19. 19. Theming Drupal• Donde instalamos los temas: – Nunca en la carpeta theme de la raíz. – Los instalamos en /raiz/sites/all/themes/ Oskar Calvo 19 Mail speaker – company or community
  20. 20. Theming Drupal• Temas de Drupal, archivos: – *.info – Template.php – *.tpl.php – *.css (no lo veremos) – *.jss (no lo veremos) Oskar Calvo 20 Mail speaker – company or community
  21. 21. Theming Drupal• Ejemplo de bartik Oskar Calvo 21 Mail speaker – company or community
  22. 22. Theming Drupal• *.info – definen la información básica de los temas de Drupal y son obligatorios. – Se definen los siguientes valores: name, description, screenshot, core, engine, base theme, regions, features, stylesheets, scripts Oskar Calvo 22 Mail speaker – company or community
  23. 23. Theming Drupal Oskar Calvo 23 Mail speaker – company or community
  24. 24. Theming Drupal• *.info – El css añadido mediante el archivo *.info se carga solo en el tema correspondiente. – El js añadido mediante el archivo *.info se carga solo en el tema correspondiente. Oskar Calvo 24 Mail speaker – company or community
  25. 25. Theming Drupal• *.info – Agregamos nuevas regiones. regions[newregion] = New region Oskar Calvo 25 Mail speaker – company or community
  26. 26. Theming Drupal• Template.php (empezamos con la chicha).For all the conditional logic and data processing of the output, there is thetemplate.php file. It is not required, but to keep the .tpl.php files tidy it can beused to hold preprocessors for generating variables before they are mergedwith the markup inside .tpl.php files. Custom functions,overriding theme functions or any other customization of the raw outputshould also be done here. This file must start with a PHP opening tag "<?php",but the close tag is not needed and it is recommended that you omit it.fuente: drupal.org Oskar Calvo 26 Mail speaker – company or community
  27. 27. Theming Drupal• Template.php – Template.php es el último archivo antes de pasar toda la información a las variables de las plantillas. – Para entenderlo lo mejor es ver el gráfico de carga de datos para entender como funciona la carga de información en Drupal. – Como se puede ver en el gráfico, el archivo template.php es el último proceso que es instanciado por Drupal a la hora de ejecutar la construcción de la página web. Oskar Calvo 27 Mail speaker – company or community
  28. 28. Theming Drupal Oskar Calvo 28 Mail speaker – company or community
  29. 29. Theming Drupal Oskar Calvo 29 Mail speaker – company or community
  30. 30. Theming Drupal• ¿Qué podemos hacer? – Override theme functions – Override Preprocess functions Oskar Calvo 30 Mail speaker – company or community
  31. 31. Theming Drupal• Override theme function – Drupal nos permite “re-escribir” una función de tema para modificarlo a las necesidades sin necesidad de hacekar el core u otro módulo. Oskar Calvo 31 Mail speaker – company or community
  32. 32. Theming Drupal• function mytheme_menu_local_tasks() {• $output = ;• if ($primary = menu_primary_local_tasks()) {• $output .= "<ol class="tabs primary">n". $primary ."</ol>n";• }• if ($secondary = menu_secondary_local_tasks()) {• $output .= "<ol class="tabs secondary">n". $secondary ."</ol>n";• }• return $output;• } Oskar Calvo 32 Mail speaker – company or community
  33. 33. Theming Drupal• Override preprocess function – Los hooks de preprocesamiento permite modificar la salida de información que nos devuelve las funciones de temas. – Estas funciones reciben un array con todas las variables que luego serán cargadas en los archivos *.tpl.php del tema. Oskar Calvo 33 Mail speaker – company or community
  34. 34. Theming Drupal• /**• * Override or insert variables into the node template.• */• function mytheme_preprocess_node(&$variables) {• if ($variables[view_mode] == full && node_is_page($variables[node])) {• $variables[classes_array][] = node-full;• }• } Oskar Calvo 34 Mail speaker – company or community
  35. 35. Theming Drupal• Template.php – De los más normal en un tema de drupal: function mytheme_preprocess_page(&$vars) { $variables[theme_hook_suggestions][] = node__. $variables[node]->type; } Oskar Calvo 35 Mail speaker – company or community
  36. 36. Theming Drupal• Template.php – En un módulo sustituimos la función mytheme_preprocess_page por mymodule_preprocess_page. – Con una feature, si la presentación esta cambiada de la forma básica, ya sea por panels, views, o directamente código de tpl, tiene que ir asociado a la feature, y nunca al tema. Oskar Calvo 36 Mail speaker – company or community
  37. 37. Theming Drupal• ¿Que no debemos hacer en template.php? – Embeber Vistas. – Realizar consultas a la base de datos. El motivo de esto se ve en la siguiente gráfica. – Abusar de template.php puede suponer un Asesino de rendimiento. Oskar Calvo 37 Mail speaker – company or community
  38. 38. Theming Drupal Oskar Calvo 38 Mail speaker – company or community
  39. 39. Theming Drupal• *.tpl.php – Los archivos tpl.php se encuentra dentro del directorio templates. – Los archivos tpl de Drupal, son los archivos que corresponderían directamente a los archivos de la Vista en los modelos MVC. Estos archivos son una mezcla entre php y html. Oskar Calvo 39 Mail speaker – company or community
  40. 40. Theming Drupal• *.tpl.php – Estos archivos contienen diferentes tipos de información y y tamaño. Podemos tener un archivo tpl únicamente para mostrar un comentario (comment.tpl.php), o que contengan la estructura total de la página web que estamos visualizando (page.tpl.php). Oskar Calvo 40 Mail speaker – company or community
  41. 41. Theming Drupal• *.tpl.php – Esta forma de trabajar tiene una doble cara, por un lado tenemos una gran flexibilidad a la hora de “personalizar” una nueva funcionalidad, pero por otro lado, esto requiere más trabajo que el requerido por otros frameworks. Oskar Calvo 41 Mail speaker – company or community
  42. 42. Theming Drupal• ¿Qué se puede hacer en un tpl.php? – Desgraciadamente, muchos desarrolladores al ver que los tpls de drupal terminan con un “php”, piensan que son el lugar adecuado para metor el código que requieren. Oskar Calvo 42 Mail speaker – company or community
  43. 43. Theming Drupal• ¿Porqué lo hacen? – Cometen este error porque en los archivos tpls viene toda la información que se va a imprimir en las pantallas. Al tener toda la información piensan que es el lugar correcto para ejecutar cualquier código, implementar cualquier funcionalidad, etc... Oskar Calvo 43 Mail speaker – company or community
  44. 44. Theming Drupal• ¿Qué supone hacerlo? – Los archivos tpls son la “meta”, si en dicha meta le metemos funciones (consulta a bbdd, modificar html, agregar información, etc....) nos penalizan con retrasos a la hora de finalizar la impresión de la página. Oskar Calvo 44 Mail speaker – company or community
  45. 45. Theming Drupal• ¿Qué debería haber en un tpl? – <?php print $vars; ?> – <?php if($vars): ?>html<? Endif; ?> – <?php hide($element[piece]); ?> – <?php show($element[piece]); ?> – <?php print render($element); ?> Oskar Calvo 45 Mail speaker – company or community
  46. 46. Theming Drupal• Agregar tpls a nuestros módulos. – Toca ver código de módulos (será compartido en breve). – Veremos como se crea un tpl para una página. Oskar Calvo 46 Mail speaker – company or community
  47. 47. Theming Drupal• Sobreescribir tpls existentes de módulos. – Simplemente copiamos y pegamos el tpl del módulo en nuestro tema. – Los tpls de los temas tienen más peso que los tpls de los módulos. – Drupal 7 Theme Hook Suggestions Oskar Calvo 47 Mail speaker – company or community
  48. 48. Theming Drupal• Tlps en views, panels, display suit, etc... – Siempre, siempre que exportemos a feature un módulo con plantilla, tenemos que agregarle el tpl correspondiente, como si fuese un módulo más. Oskar Calvo 48 Mail speaker – company or community
  49. 49. Theming Drupal• Algunas funciones de theming de ejemplo habituales. Oskar Calvo 49 Mail speaker – company or community
  50. 50. Theming Drupal<?php   $variables = array( path => path/to/img.jpg, alt => Test alt, title => Test title, width => 50%, height => 50%, attributes => array(class => some-img, id => my-img), ); $img = theme(image, $variables);?> Oskar Calvo 50 Mail speaker – company or community
  51. 51. Theming Drupal<?php $config = array( "style_name" => "my_image_style_name", "path" =>image_style_path(large,logogruposm.jpg);, "height" => NULL, "width" => NULL,);$goatse_picture= theme_image_style($config);?> Oskar Calvo 51 Mail speaker – company or community
  52. 52. Theming Drupal<?php   l(t(Link text), about­us, array(attributes =>array(class => array(about-link, another-class))));?> Oskar Calvo 52 Mail speaker – company or community
  53. 53. Theming Drupal• Crear nuevas regiones en un tema. – regions[sidebar_first] = Sidebar first – <?php if ($page[sidebar_first]): ?> – <div id="sidebar-first" class="column sidebar"><div class="section"> – <?php print render($page[sidebar_first]); ?> – </div></div> <!-- /.section, /#sidebar-first --> – <?php endif; ?> Oskar Calvo 53 Mail speaker – company or community
  54. 54. Theming Drupal• Módulos interesantes de Drupal. – Muchos módulos de Drupal están a caballo entre módulos como productos y APIs para implementar mejoras. Oskar Calvo 54 Mail speaker – company or community
  55. 55. Theming Drupal• Image (imagecache). – Es un módulo del core que permite crear “presets” de imágenes, un preset es una configuración concreta que permite realizar re-dimensionamientos, recortes, marcas de agua, rotaciones, cambios en el color, etc... en las imágenes. – Viene en el core de Drupal Oskar Calvo 55 Mail speaker – company or community
  56. 56. Theming Drupal• Display Suit – Display Suite allows you to take full control over how your content is displayed using a drag and drop interface. Arrange your nodes, views, comments, user data etc. the way you want without having to work your way through dozens of template files. A predefined list of layouts (D7 only) is available for even more drag and drop fun!Display Suite allows you to take full control over how your content is displayed using a drag and drop interface. Arrange your nodes, views, comments, user data etc. the way you want without having to work your way through dozens of template files. A predefined list of layouts (D7 only) is available for even more drag and drop fun! Oskar Calvo 56 Mail speaker – company or community
  57. 57. Theming Drupal• Views – De views hay dos dichos. • No se cual es tu pregunta,pero si mi respuesta “Views”. • ¿Qué es Views? La mejor forma de ahorrar tiempo y dinero a tu jefe. – Views es definido como el “query builder” de Drupal, es un módulo que permite que crear consultas a la base de datos, y definir como se mostrará los resultados. Oskar Calvo 57 Mail speaker – company or community
  58. 58. Theming Drupal• Panels – Si views es el “Query Builder” Panels es “Pager builder”. – Panels permite definir páginas, definir los elementos que se imprimen en dichas páginas, y agregar reglas de visibilidad, de acceso a contenido, etc... Oskar Calvo 58 Mail speaker – company or community
  59. 59. Theming Drupal• Custom Pages – Custom Pages, a diferencia de panels lo que nos permite únicamente es definir archivos tpl para rutas concretas. Oskar Calvo 59 Mail speaker – company or community
  60. 60. Theming Drupal• Sweaver. – El módulo Sweaver es un editor wysiwyg del css de tu tema de drupal. – Lo mejor será que lo veamos. Oskar Calvo 60 Mail speaker – company or community
  61. 61. Theming Drupal• Devel y devel themer – Dos módulos fundamentales para cualquier profesional de Drupal Oskar Calvo 61 Mail speaker – company or community
  62. 62. Themign drupal• Las imágenes escaneadas 17-30 pertenecen al libro Drupal 7 module development, que tiene los capítulos 3 y 4 dedicados a Theming Drupal. Oskar Calvo 62 Mail speaker – company or community
  63. 63. Oskar Calvo 63 Mail speaker – company or communityhttp://gengibresolucionesinformaticas.xtrweb.com/
  64. 64. Oskar Calvo 64Mail speaker – company or community

×