DRUPAL Módulos Específicos

Sumario

1 Introdución
2 Módulo Display Suite
- 2.1 Funcionamento básico
- 2.2 Funcionamento avanzado
3 Módulo Asset Injector
4 Novos a engadir

Introdución

Neste punto veremos diferentes módulos necesarios para completar o curso.

Ditos módulos estarán referenciados nas unidades onde sexan necesarios.

Módulo Display Suite

Link de descarga: https://www.drupal.org/project/ds
Módulo do que depende para funcionar: Layout Plugin. Sen dito módulo instalado non poderemos activar o módulo Display Suite.

Uso do módulo: O principal uso deste módulo é para dar un formato aos tipos de contido en Drupal.

Cando creamos un tipo de contido formado por varios campos, estes aparecen un detrás doutro. Con este módulo imos poder asociar ao contido un layout específico (multi-columna) e tamén poderemos personalizar o estilo (con CSS) a cada unha das partes do novo layout. En cada parte creada poderemos colocar os campos que conforman o tipo de contido creado en Drupal.

Módulo referenciado na Unidade 2: Tipos de contido.
Documentación: Documentación para a súa instalación e funcionamento.

Funcionamento básico

Vexamos un exemplo de funcionamento básico deste módulo.

Funcionamento básico
Unha vez instalado o módulo activamos Display Suite e prememos o botón Instalar na parte baixa da páxina.
Pode avisar de que é necesario ter activado o módulo Layout_plugin. Neste caso prememos o botón Continuar.
Agora no menú Administrar => Estructura aparece unha entrada nova có nome: Display Suite ou Suite de presentación.
Seleccionamos o tipo de contido que queremos modificar e prememos no botón Administrar presentación.
Agora dispoñemos dunha serie de opcións extra na lapela de Administrar presentación. Fixarse que é a mesma pantalla que se imos dende os 'Tipos de Contido'. Debemos escoller o tipo de vista a modificar (no exemplo 'Contenido Completo' e na parte baixa dispoñemos dunha serie de novas configuracións que fan referencia ao tipo de layout (deseño) que queremos aplicar ao tipo de contido. No exemplo está escollido o layout Two column layout.
Prememos o botón Guardar.

dereita = right). Dispoñemos os campos segundo o exemplo.

Se agora visualizamos o resultado podemos comprobar como os campos sitúanse no sitio indicado.

Comentar que podemos modificar o CSS do layout escollido. Este atópase no cartafol /instalción_drupal/modules/ds/css. Concretamente o do exemplo ten de nome ds-2col.css.

 1 /**
 2  * @file
 3  * Styling for the ds-2col template.
 4  */
 5 
 6 .ds-2col > .group-left {
 7   float: left; /* LTR */
 8   width: 50%;
 9 }
10 
11 [dir="rtl"] .ds-2col > .group-left {
12   float: right;
13 }
14 
15 .ds-2col > .group-right {
16   float: left; /* LTR */
17   width: 50%;
18 }

Podemos ver como cada rexión ten como clase CSS asociada: group-left e group-right.

Funcionamento avanzado

Nestes exemplo imos modificar mediante clases e con arquivos CSS o aspecto dos tipos de contido dentro de cada rexión.

Exemplo 1
Imos ao menú Administrar => Ampliar e activamos o módulo Display Suite Extras.
Se imos ao menú Administrar => Estructura e escollemos a opción de Display Suite ou Suite de presentación, teremos na parte superior tres opcións: presentación (na que estamos por defecto, clases e campos. Se non caben visualmente teredes que premer nuns puntos suspensivos que aparece ao carón de Presentaciones. Como vemos, podemos crear nomes de clases que despois deberán ser desenvolvidas nun arquivo CSS. No exemplo creamos un CSS a nivel de campo de nome css_campo_altura. Podemos crear CSS a nivel de layout e aplicalo a todo o deseño, ao layout esquerdo ou ao layout dereito.
Activamos, en opcións de presentación, o uso de etiquetas CSS asociadas aos campos dos tipos de contido e prememos no botón de Guardar configuración.
Imos á Ficha do Xogador e escollemos a presentación Completa e no campo Altura prememos sobre a roda dentada da dereita.
Agora aparece unha parte nova na que podemos seleccionar a clase CSS creada nos pasos anteriores. Prememos o botón Actualizar.
Prememos o botón Guardar.
Agora, se visualizamos a ficha de xogador e co navegador vemos o código fonte da altura (no firefox podemos premer sobre a altura na páxina e có botón dereito escollemos a opción de Inspeccionar elemento. Tamén podemos instalar o complemento firebug para inspeccionar o CSS das páxinas) podemos observar como o div que engloba á etiqueta e o dato da altura ten asociado o CSS de nome class_campo_altura.
Agora temos que definir un arquivo CSS onde definimos a clase anterior. Dito arquivo podería ir no Theme (é o aspecto do sitio web, o veremos máis adiante) ou podemos poñelo no CSS asociado á plantilla que