DRUPAL Módulos Específicos

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: Aplicando clases de CSS a campos do tipo de contido
• 

  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 unha clase CSS a nivel de campo de nome css_campo_altura. Podemos crear clases 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 ao modelo que escollemos (dous columnas layout). Neste caso editamos o arquivo /instalación_drupal/modules/ds/css/ds-2col.css. Fixarse que o nome field__item leva dous guións baixos. Sabemos o nome de dito identificador ao ver o código fonte da páxina.

• 

  Debemos baleirar a cache.

• 

  Vemos o resultado.

• Poñer a definición de clases CSS no arquivo de configuración de layout pode levar consigo que se actualizamos o módulo perdamos os cambios. Tamén leva consigo que se queremos aplicar as mesmas clases a outros deseños teríamos que modificar tamén os CSS doutros layouts.

Veremos a continuación, no seguinte exemplo, como colocar o CSS nun arquivo separado e cargado polo Theme de Drupal.

• Exemplo 2: Aplicando clases CSS ao deseño do layout
• 

  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. No exemplo creamos dous clases CSS a nivel de layout. Unha clase CSS que será aplicada á columna esquerda e outra clase CSS para a dereita.

• 

  Se editamos o tipo de contido Ficha de Xogador e imos a parte de Presentación, podemos observar como na parte baixa podemos seleccionar a sección Custom clasess e podemos aplicar unha clase a todo o layout, a columna da esquerda ou a columna da dereita.

• 

  Seguindo co exemplo, aplicade a class_rexion_esquerda á parte left e a class_rexion_dereita á parte right. Premede o botón Guardar.

• 

  Agora imos a crear un arquivo CSS onde imos definir as clases anteriores. Para iso temos que ir onde se atopa o theme instalado. Por defecto deberedes ter o theme bartik (se non é o caso deberedes ir onde se atope o theme. Se é do core se atopará en /instalación_drupal/core/themes/nome_theme; se é un descargado por vos atoparase en /instalación_drupal/themes). No noso caso imos ir o cartafol /instalación_drupal/core/themes/bartik/css e creamos un arquivo de nome meuestilos.css

• 

  Creamos o contido e o gardamos. Fixarse que como seguimos tendo o código CSS do exercicio anterior vai aplicar os dous. O normal é que obtedes por unha das dúas formas para aplicar CSS. Eu recomendo esta que estamos a facer agora.

• 

  Agora temos que informar ao theme Bartik de que cargue o arquivo CSS creado. Para iso temos que editar o arquivo bartik.libraries.yml que se atopa no cartafol do theme (/instalación drupal/core/themes/bartik).

• 

  Engadimos a liña que informa de que debe cargar o arquivo meusestilos.css, que se atopa no cartafol css.

• 

  Debemos baleirar a cache.

• 

  Vemos o resultado.

• Con isto vemos unha parte do que se pode facer con este módulo.

Módulo Asset Injector

• Ven a substituír ao CSS Injector na versión 7 de Drupal.

Permite engadir, utilizando regras, código CSS e Javascript ás páxinas do noso sitio web.

Podedes ver un exemplo de uso (coa versión 7 e CSS Injector) neste enlace.

• Link de descarga: https://www.drupal.org/project/asset_injector

• Unha vez instalado podemos acceder dende: Administrar => Configuración => Asset Injector (dentro do grupo Development).

• Módulo referenciado na Unidade 2: Tipos de contido.

Novos a engadir

-- Ángel D. Fernández González -- (2016).