Este documento resume una presentación sobre tematización en Drupal. Explica conceptos clave como temas, archivos de información (.info), template.php, archivos plantilla (.tpl.php), y funciones de tematización. También cubre temas avanzados como sobrescribir funciones de tematización, preprocessores, agregar regiones y módulos útiles para tematización.

1. Theming Drupal
Oskar Calvo
calvo.oskar@gmail.com – Documentados consultora Drupal

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. Theming Drupal
We Don't hack core
&
We don't hack anything
Oskar Calvo 3
Mail speaker – company or community

4. Theming Drupal
Whe hook she
OR
we override it
OR
we preprocess them.
Oskar Calvo 4
Mail speaker – company or community

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. 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. 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. 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. Theming Drupal
Oskar Calvo 9
Mail speaker – company or community

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. 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. 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. 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. Theming Drupal
• Atletas completos
– Fuerzar - Php
– Agilidad - Js
– Potencia - Módulos
– Resistencia - Css
Oskar Calvo 14
Mail speaker – company or community

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. Theming Drupal
Oskar Calvo 16
Mail speaker – company or community

17. Theming Drupal
Oskar Calvo 17
Mail speaker – company or community

18. Theming Drupal
Oskar Calvo 18
Mail speaker – company or community

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. 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. Theming Drupal
• Ejemplo de bartik
Oskar Calvo 21
Mail speaker – company or community

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. Theming Drupal
Oskar Calvo 23
Mail speaker – company or community

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. Theming Drupal
• *.info
– Agregamos nuevas regiones.
regions[newregion] = New region
Oskar Calvo 25
Mail speaker – company or community

26. Theming Drupal
• Template.php (empezamos con la chicha).
For all the conditional logic and data processing of the output, there is the
template.php file. It is not required, but to keep the .tpl.php files tidy it can be
used to hold preprocessors for generating variables before they are merged
with the markup inside .tpl.php files. Custom functions,
overriding theme functions or any other customization of the raw output
should 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. 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. Theming Drupal
Oskar Calvo 28
Mail speaker – company or community

29. Theming Drupal
Oskar Calvo 29
Mail speaker – company or community

30. Theming Drupal
• ¿Qué podemos hacer?
– Override theme functions
– Override Preprocess functions
Oskar Calvo 30
Mail speaker – company or community

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. 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. 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. 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. 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. 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. 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. Theming Drupal
Oskar Calvo 38
Mail speaker – company or community

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Theming Drupal
• Algunas funciones de theming de ejemplo
habituales.
Oskar Calvo 49
Mail speaker – company or community

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Theming Drupal
• Devel y devel themer
– Dos módulos fundamentales para cualquier
profesional de Drupal
Oskar Calvo 61
Mail speaker – company or community

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. Oskar Calvo 63
Mail speaker – company or community
http://gengibresolucionesinformaticas.xtrweb.com/

64. Oskar Calvo 64
Mail speaker – company or community