Diferencia entre revisiones de «DRUPAL Módulos Específicos»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
(No se muestran 24 ediciones intermedias del mismo usuario)
Línea 10: Línea 10:
  
 
* Link de descarga: https://www.drupal.org/project/ds
 
* Link de descarga: https://www.drupal.org/project/ds
−
* Módulo do que depende para funcionar: [https://www.drupal.org/project/layout_plugin Layout Plugin]. Sen dito módulo instalado non poderemos activar o módulo Display Suite.
+
* '''Módulo do que depende para funcionar''': [https://www.drupal.org/project/layout_plugin Layout Plugin]. Sen dito módulo instalado non poderemos activar o módulo Display Suite.
 
<br/>
 
<br/>
 
* Uso do módulo: O principal uso deste módulo é para dar un formato aos tipos de contido en Drupal.  
 
* Uso do módulo: O principal uso deste módulo é para dar un formato aos tipos de contido en Drupal.  
Línea 17: Línea 17:
  
  
 +
<br />
 +
* Módulo referenciado [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Tipos_de_contido#Personalizando_a_forma_en_que_se_visualizan_os_tipos_de_contido na Unidade 2: Tipos de contido].
 +
* Documentación: [https://www.drupal.org/node/644662 Documentación para a súa instalación e funcionamento].
 +
 +
 +
=== Funcionamento básico ===
 +
 +
* Vexamos un exemplo de funcionamento básico deste módulo.
 +
 +
<gallery caption="Funcionamento básico" widths="350" heights="300px" perrow="2">
 +
Image:Drupal tipo contidos ds 1.jpg| Unha vez instalado o módulo activamos '''Display Suite''' e prememos o botón '''Instalar''' na parte baixa da páxina.
 +
Image:Drupal tipo contidos ds 2.jpg| Pode avisar de que é necesario ter activado o módulo '''Layout_plugin'''. Neste caso prememos o botón '''Continuar'''.
 +
Imagen:Drupal_tipo_contidos_ds_3.jpg| Agora no menú '''Administrar''' => '''Estructura''' aparece unha entrada nova có nome: '''Display Suite''' ou '''Suite de presentación'''.
 +
Imagen:Drupal_tipo_contidos_ds_3B.jpg| Seleccionamos o tipo de contido que queremos modificar e prememos no botón '''Administrar presentación'''.
 +
Imagen:Drupal_tipo_contidos_ds_4.jpg| Agora dispoñemos dunha serie de opcións extra na lapela de [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Tipos_de_contido#Administrar_a_presentaci.C3.B3n 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'''.
 +
Imagen:Drupal_tipo_contidos_ds_5.jpg| Prememos o botón '''Guardar'''.
 +
Imagen:Drupal_tipo_contidos_ds_6.jpg| Agora aparece unha nova columna de nome '''REGION''' onde podemos situar os campos. Ao escoller un layout de dúas columnas teremos dúas rexións (esquerda = left | dereita = right). Dispoñemos os campos segundo o exemplo.
 +
Imagen:Drupal_tipo_contidos_ds_7.jpg| Se agora visualizamos o resultado podemos comprobar como os campos sitúanse no sitio indicado.
 +
</gallery>
 +
 +
* 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'''.
 +
::<syntaxhighlight lang="java" line enclose="div" highlight="" >
 +
/**
 +
* @file
 +
* Styling for the ds-2col template.
 +
*/
 +
 +
.ds-2col > .group-left {
 +
  float: left; /* LTR */
 +
  width: 50%;
 +
}
 +
 +
[dir="rtl"] .ds-2col > .group-left {
 +
  float: right;
 +
}
 +
 +
.ds-2col > .group-right {
 +
  float: left; /* LTR */
 +
  width: 50%;
 +
}
 +
</syntaxhighlight>
 +
 +
 +
 +
* 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.
 +
 +
<gallery caption="Exemplo 1: Aplicando clases de CSS a campos do tipo de contido" widths="350" heights="300px" perrow="2">
 +
Image:Drupal_tipo_contidos_ds_8.jpg| Imos ao menú '''Administrar''' => '''Ampliar''' e activamos o módulo '''Display Suite Extras'''.
 +
Image:Drupal_tipo_contidos_ds_9.jpg| 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) Prememos en clases. 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.
 +
Image:Drupal_tipo_contidos_ds_10.jpg| 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'''.
 +
Image:Drupal_tipo_contidos_ds_10B.jpg| Imos á Ficha do Xogador e escollemos a presentación '''Completa''' e no campo '''Altura''' prememos sobre a roda dentada da dereita.
 +
Image:Drupal_tipo_contidos_ds_11.jpg| Agora aparece unha parte nova na que podemos seleccionar a clase CSS creada nos pasos anteriores. Prememos o botón '''Actualizar'''.
 +
Image:Drupal_tipo_contidos_ds_12.jpg| Prememos o botón '''Guardar'''.
 +
Image:Drupal_tipo_contidos_ds_13.jpg| 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 [https://addons.mozilla.org/es/firefox/addon/firebug/ 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'''.
 +
Image:Drupal_tipo_contidos_ds_14.jpg| 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 <u>leva dous guións baixos</u>. Sabemos o nome de dito identificador ao ver o código fonte da páxina.
 +
Image:Drupal_tipo_contidos_ds_15.jpg| Debemos [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Atallos baleirar a cache].
 +
Image:Drupal_tipo_contidos_ds_16.jpg| Vemos o resultado.
 +
</gallery>
 +
 +
 +
* 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.
 +
 +
<gallery caption="Exemplo 2: Aplicando clases CSS ao deseño do layout" widths="350" heights="300px" perrow="2">
 +
Image:Drupal_tipo_contidos_ds_17.jpg| 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) '''Prememos en clases'''. 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.
 +
Image:Drupal_tipo_contidos_ds_18.jpg| 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.
 +
Image:Drupal_tipo_contidos_ds_21.jpg| Seguindo co exemplo, <u>aplicade a class_rexion_esquerda á parte left e a class_rexion_dereita á parte right</u>. Premede o botón '''Guardar'''.
 +
Image:Drupal_tipo_contidos_ds_19.jpg| 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 <u>creamos un arquivo de nome meuestilos.css</u>
 +
Image:Drupal_tipo_contidos_ds_20.jpg| 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. '''Importante:''' O nome da clase CSS para a rexión é o nome posto por nos <u>máis o nome da rexión: group-left e group-right</u>.
 +
Image:Drupal_tipo_contidos_ds_22.jpg| 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).
 +
Image:Drupal_tipo_contidos_ds_23.jpg| Engadimos a liña que informa de que debe cargar o arquivo meusestilos.css, que se atopa no cartafol css.
 +
Image:Drupal_tipo_contidos_ds_15.jpg| Debemos [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Atallos baleirar a cache].
 +
Image:Drupal_tipo_contidos_ds_24.jpg| Vemos o resultado.
 +
</gallery>
 +
 +
* Con isto vemos unha parte do que se pode facer con este módulo.
 +
 +
 +
 +
== Módulo Slick Carousel ==
 +
 +
* Permite engadir slideshow ao noso sitio web.
 +
 +
* Link de descarga: https://www.drupal.org/project/slick
 +
 +
: Slick View: https://ftp.drupal.org/files/projects/slick_views-8.x-1.0-rc2.tar.gz
 +
: Depende do módulo blazy: https://www.drupal.org/project/blazy
 +
: Librería Slick Library: https://github.com/kenwheeler/slick/ (ten que engadirse ao cartafol /libraries/)
 +
: Librería easing Library: https://github.com/gdsmith/jquery.easing (ten que engadir ao cartafol /libraries/)
  
 
== Módulo Asset Injector ==
 
== Módulo Asset Injector ==
  
−
* Ven a substituír ao CSS Injector na versión 7 de Drupal.
+
* 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) [https://swsblog.stanford.edu/blog/styling-sites-introduction-css-injector neste enlace].
  
 
* Link de descarga: https://www.drupal.org/project/asset_injector
 
* Link de descarga: https://www.drupal.org/project/asset_injector
 
<br/>
 
<br/>
 +
* Unha vez instalado podemos acceder dende: '''Administrar''' => '''Configuración''' => '''Asset Injector''' (dentro do grupo Development).
 +
 +
 +
<br />
 +
* Módulo referenciado [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Tipos_de_contido#Personalizando_a_forma_en_que_se_visualizan_os_tipos_de_contido na Unidade 2: Tipos de contido].
 +
 +
== Módulo Paragraphcs ==
 +
 +
* Link de descarga: https://www.drupal.org/project/ds
 +
* '''Módulo do que depende para funcionar''':
 +
:: Depende do módulo [https://www.drupal.org/project/entity_reference_revisions entity_reference_revisions]
 +
:: Depende do módulo [https://www.drupal.org/project/entity entity]. Dito módulo será integrado no Core do Drupal.
 +
 +
<br/>
 +
* Este módulo vai permitir crear un novo tipo de contido (Paragrapcs) no que imos poder modificar a posición dos campos e integrar novos tipos.
 +
 +
<br />
 +
* Módulo referenciado [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Tipos_de_contido#Personalizando_a_forma_en_que_se_visualizan_os_tipos_de_contido na Unidade 2: Tipos de contido].
 +
* Documentación: [https://www.drupal.org/project/paragraphs Documentación para a súa instalación e funcionamento].
  
−
* Unha vez instalado podemos acceder dende: '''Administrar''' => '''Configuración''' => '''Asset Injector''' (dentro do grupo Development).
 
  
  
−
== Módulos para implementar tendas online (UbeCart) ==
+
=== Funcionamento básico ===
  
−
* En Drupal temos varias alternativas para implementar unha 'tenda virtual'.
+
* O módulo Paragraphcs vai permitir crear un novo tipo de contido (paragraphc), formado por campos, seguindo os mesmos pasos vistos para a [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Tipos_de_contido#Creando_un_novo_tipo_de_contido creación de novos tipos de contido xa visto na wiki].
  
−
* Módulo simple: [http://drupal.org/project/basic_cart Basic Cart]
+
* Sobre dito paragraphc imos poder aplicar os deseños vistos no módulo Display Suite o calquera outra forma que permita modificar a súa presentación.
−
* Módulos complexos:
 
−
::* [https://drupal.org/project/ubercart UbeCart]: Ten [http://www.ubercart.org/ sitio web propio]
 
−
::* [https://drupal.org/project/commerce DrupalCommerce]: Ten [http://www.drupalcommerce.org/ sitio web propio]
 
  
−
* Os dous últimos permiten facer verdadeiro comercio online con posibilidade de integrar o pago con plataformas seguras.
+
* A <u>diferenza vai estribar en que imos poder utilizar un paragraphc completo como se foxe un campo máis dun tipo de contido</u>.
−
* A principal diferenza é que DrupalCommerce permite unha maior 'flexibilidade' á hora de implementar o sitio web permitindo adaptar a tenda virtual a calquera modelo de negocio.
 
−
:Por exemplo vai permitir:
 
−
:* Crear todo tipo de produtos cos seus atributos.
 
−
:* Diversas pasarelas de pago.
 
−
:* Módulos adicionais como métodos de envío, cupóns de desconto, pago por paypal,...
 
  
−
:Pero tamén é máis complexo de poñer en marcha, polo que neste curso imos a <u>instalar e configurar o módulo de UbeCart</u>.
+
* Vexamos un exemplo no que imos crear un paragraphc no que gardaremos información sobre as novas dos xogadores de baloncesto.
 +
: Imos facer que o paragraphc estea formado por un campo de texto e unha imaxe e imos modificar o tipo de contido 'Ficha Xogador' para que poidamos engadir un número ilimitado de paragraphc do tipo creado.
 +
: Visualizaremos o resultado.
  
−
<u>Nota:</u> Hai toda unha multitude de opinións de cal é mellor. Como mostra [http://www.innodus.com/blog/jorditr/ubercart-versus-drupal-commerce este artigo]. A nos neste curso no nos interesa cal é mellor ou peor se non poder configurar negocio de tipo 'tenda online' e por iso optamos pola forma máis sinxela.
+
<gallery caption="Creando un Paragraphc de exemplo" widths="350" heights="300px" perrow="2">
 +
Image:Drupal_tipo_contidos_paragraphc_1.jpg| Unha vez '''instalado''' e '''activado''' o módulo Paragraphcs, aparecerá no menú '''Administrar''' ==> '''Estructuras''' unha nova entrada de nome '''Paragraphcs types'''. Prememos sobre a opción.
 +
Image:Drupal_tipo_contidos_paragraphc_2.jpg| Prememos agora no botón '''Add paragraphcs types'''.
 +
Image:Drupal_tipo_contidos_paragraphc_3.jpg| Dámoslle un nome ao tipo de paragraphc e prememos o botón '''Guardar y administrar campos'''.
 +
Image:Drupal_tipo_contidos_paragraphc_4.jpg| Esta pantalla é a mesma á [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Tipos_de_contido#Creando_un_novo_tipo_de_contido creación de novos tipos de contido xa visto na wiki]. Creamos dous campos, un tipo texto con formato e outro tipo imaxe.
 +
Image:Drupal_tipo_contidos_paragraphc_4B.jpg| Como vemos na imaxe imos asociado un deseño de dous columnas utilizando o módulo Display Suite (visto anteriormente) e colocado cada campo nunha columna diferente. Se non tedes o módulo instalado podedes deixalos como veñen por defecto.
 +
Image:Drupal_tipo_contidos_paragraphc_5.jpg| Agora se imos a calquera tipo de contido xa creado (ou creamos un novo tipo de contido) podemos engadir un novo campo de '''tipo Párrafo'''. Indicamos a etiqueta que vai ter ese novo tipo. Fixarse que estamos a poñer como un tipo de campo algo que a súa vez está formado por máis campos (texto e imaxe).
 +
Image:Drupal_tipo_contidos_paragraphc_6.jpg| O número de valores permitidos podemos limitalo ou deixalo en ilimitado para permitir que cando se cre un novo contido deste tipo poidamos engadir un número ilimitado de novos do xogador.
 +
Image:Drupal_tipo_contidos_paragraphc_7.jpg| Configuramos o campo e na parte baixa podemos escoller que <u>tipos de paragraphc</u> podemos engadir. No exemplo soamente aparece un. Se non marcamos ningún poderíamos engadir calquera tipo de paragraphc creado.
 +
Image:Drupal_tipo_contidos_paragraphc_8.jpg| Agora creamos ou editamos un contido previo e podemos ver como no formulario de entrada de datos aparece a posibilidade de engadir novas (o pharaphac creado).
 +
Image:Drupal_tipo_contidos_paragraphc_9.jpg| Engadimos un par de novas.
 +
Image:Drupal_tipo_contidos_paragraphc_10.jpg| Colocamos dito campo na presentación do tipo de contido.
 +
Image:Drupal_tipo_contidos_paragraphc_11.jpg| Visualizamos o resultado.
  
  
−
=== Instalación ===
 
−
<gallery caption="Instalando módulo Ubercart" widths="350" heights="300px" perrow="2">
 
−
Image:Drupal_modulos_ecomercio_1.jpg| Buscamos a versión para o Core 8 do módulo. Podemos facer unha instalación manual ou a través da interface do Drupal como sempre.
 
−
Image:Drupal_modulos_ecomercio_2.jpg| Neste caso o facemos a través da interface de Drupal.
 
−
Image:Drupal_modulos_ecomercio_3.jpg| Agora activaremos os módulos necesarios.
 
 
</gallery>
 
</gallery>
  
  
  
−
=== Configuración ===
+
== Módulo View Unpublished ==
 +
 
 +
* Link de descarga: https://www.drupal.org/project/publishcontent
 +
<br/>
 +
* Uso do módulo: Permite establecer permisos sobre que roles poden ou non ver contido non publicado.
 +
 
 +
<br />
 +
* Módulo referenciado [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Permisos_de_usuarios#M.C3.B3dulo_View_Unpublished na Unidade 6: Permisos].
  
−
* Como podemos observar na pantalla anterior, UberCart ten as seguintes seccións:
 
  
−
:* '''UberCart - Core''': Contén os módulos cos compoñentes básicos necesarios para unha posta en marcha dunha tenda virtual.
 
−
::* Cart: Manexa o carrito da compra. Xestiona os produtos do carrito, cantidade e amosa o prezo.
 
−
::* Country: Actívase ao instalar o módulo Store. Permite configurar os campos que conforman unha dirección en función do país. Tamén podemos indicar a orde e se son obrigatorios ou non.
 
−
::* Order: Fai os seguimentos, xestiona os pedidos e os grava na base de datos cando finalizan.
 
−
::* Store: Módulo para a configuración global da tenda. Garda a información da tenda, información da empresa, unidades de medida e de peso, formato da moeda e símbolo,...
 
  
 +
== Módulo Publish Content ==
  
−
<gallery caption="Activando e configurando o módulo Ubercart - Store" widths="350" heights="300px" perrow="2">
+
* Link de descarga: https://www.drupal.org/project/view_unpublished
−
Image:Drupal_modulos_ecomercio_4.jpg| Activamos o módulo Store.
+
<br/>
−
Image:Drupal_modulos_ecomercio_5.jpg| Informa que vai activar o módulo 'Country'.
+
* Uso do módulo: Permite que un rol poida publicar/despublicar contido.
−
Image:Drupal_modulos_ecomercio_6.jpg| Detecta problemas. Isto é porque non está configurado o módulo Store.
 
−
Image:Drupal_modulos_ecomercio_7.jpg| Imos ao menú '''Administrar''' => '''Store''' e escollemos a opción '''Store'''.
 
−
Image:Drupal_modulos_ecomercio_8.jpg| Configuramos a información básica.
 
−
Image:Drupal_modulos_ecomercio_9.jpg| Configuramos a información da dirección.
 
−
Image:Drupal_modulos_ecomercio_10.jpg| Cubrimos os campos relacionados coa moeda.
 
−
Image:Drupal_modulos_ecomercio_11.jpg| Cubrimos os campos relacionados có peso.
 
−
Image:Drupal_modulos_ecomercio_12.jpg| Cubrimos os campos relacionados coas medidas métricas.
 
−
Image:Drupal_modulos_ecomercio_13.jpg| Prememos o botón '''Guardar configuración'''.
 
  
−
</gallery>
+
<br />
 +
* Módulo referenciado [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Permisos_de_usuarios#M.C3.B3dulo_Publish_Content na Unidade 6: Permisos].
 +
 
 +
 
 +
 
 +
== Módulo Agregator ==
 +
 
 +
* Link de descarga: Non necesita. Ven no CORE de Drupal
 +
<br/>
 +
* Uso do módulo: Permite publicar contido RSS externo.
  
 +
<br />
 +
* Módulo referenciado [http://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Sindicaci%C3%B3n_de_contidos#Agregando_RSS_externos na Unidade 7: Aspectos Varios].
  
  

Revisión actual del 18:01 5 jun 2017

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


  • 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.




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) Prememos en clases. 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) Prememos en clases. 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. Importante: O nome da clase CSS para a rexión é o nome posto por nos máis o nome da rexión: group-left e group-right.

  • 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 Slick Carousel

  • Permite engadir slideshow ao noso sitio web.
Slick View: https://ftp.drupal.org/files/projects/slick_views-8.x-1.0-rc2.tar.gz
Depende do módulo blazy: https://www.drupal.org/project/blazy
Librería Slick Library: https://github.com/kenwheeler/slick/ (ten que engadirse ao cartafol /libraries/)
Librería easing Library: https://github.com/gdsmith/jquery.easing (ten que engadir ao cartafol /libraries/)

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.


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



Módulo Paragraphcs

Depende do módulo entity_reference_revisions
Depende do módulo entity. Dito módulo será integrado no Core do Drupal.


  • Este módulo vai permitir crear un novo tipo de contido (Paragrapcs) no que imos poder modificar a posición dos campos e integrar novos tipos.



Funcionamento básico

  • Sobre dito paragraphc imos poder aplicar os deseños vistos no módulo Display Suite o calquera outra forma que permita modificar a súa presentación.
  • A diferenza vai estribar en que imos poder utilizar un paragraphc completo como se foxe un campo máis dun tipo de contido.
  • Vexamos un exemplo no que imos crear un paragraphc no que gardaremos información sobre as novas dos xogadores de baloncesto.
Imos facer que o paragraphc estea formado por un campo de texto e unha imaxe e imos modificar o tipo de contido 'Ficha Xogador' para que poidamos engadir un número ilimitado de paragraphc do tipo creado.
Visualizaremos o resultado.
  • Creando un Paragraphc de exemplo

  • Unha vez instalado e activado o módulo Paragraphcs, aparecerá no menú Administrar ==> Estructuras unha nova entrada de nome Paragraphcs types. Prememos sobre a opción.

  • Prememos agora no botón Add paragraphcs types.

  • Dámoslle un nome ao tipo de paragraphc e prememos o botón Guardar y administrar campos.

  • Esta pantalla é a mesma á creación de novos tipos de contido xa visto na wiki. Creamos dous campos, un tipo texto con formato e outro tipo imaxe.

  • Como vemos na imaxe imos asociado un deseño de dous columnas utilizando o módulo Display Suite (visto anteriormente) e colocado cada campo nunha columna diferente. Se non tedes o módulo instalado podedes deixalos como veñen por defecto.

  • Agora se imos a calquera tipo de contido xa creado (ou creamos un novo tipo de contido) podemos engadir un novo campo de tipo Párrafo. Indicamos a etiqueta que vai ter ese novo tipo. Fixarse que estamos a poñer como un tipo de campo algo que a súa vez está formado por máis campos (texto e imaxe).

  • O número de valores permitidos podemos limitalo ou deixalo en ilimitado para permitir que cando se cre un novo contido deste tipo poidamos engadir un número ilimitado de novos do xogador.

  • Configuramos o campo e na parte baixa podemos escoller que tipos de paragraphc podemos engadir. No exemplo soamente aparece un. Se non marcamos ningún poderíamos engadir calquera tipo de paragraphc creado.

  • Agora creamos ou editamos un contido previo e podemos ver como no formulario de entrada de datos aparece a posibilidade de engadir novas (o pharaphac creado).

  • Engadimos un par de novas.

  • Colocamos dito campo na presentación do tipo de contido.

  • Visualizamos o resultado.


Módulo View Unpublished


  • Uso do módulo: Permite establecer permisos sobre que roles poden ou non ver contido non publicado.



Módulo Publish Content


  • Uso do módulo: Permite que un rol poida publicar/despublicar contido.



Módulo Agregator

  • Link de descarga: Non necesita. Ven no CORE de Drupal


  • Uso do módulo: Permite publicar contido RSS externo.






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

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=DRUPAL_Módulos_Específicos&oldid=3856»