Artículos en Tutoriales

Hoy voy a realizar un tutorial que es casi una tradición, la creación de una galería de imágenes con Drupal 8 y Colorbox. En anteriores post, pudimos realizar esta acción con Drupal 7 e incluso con Drupal 6 (ya queda muy lejos!). ¡Vamos allá!

1. Instalar módulos necesarios

A diferencia de Drupal 6 y Drupal 7, el número de módulos para realizar esta galería de imágenes en Drupal 8 se ha reducido a uno solo: Colorbox

Colorbox es una libería que nos permite ver la imagen en detalle sin necesidad se abrirla en una nueva página del navegador. En esta ocasión, bajaremos el módulo de su página y lo instalaremos en nuestra web.

Hay que tener en cuenta que además tenemos que bajar esta libreria, descomprimirla y copiarla en nuestro site, asegurándonos que el path a la misma contiene este fichero: 'libraries/colorbox/jquery.colorbox-min.js'

2.Crear un Estilo para las imágenes

El código de Drupal 8 es diferente del de versiones anteriores. Se han adoptado conceptos y estandares modernos, la programación es ahora mayoritariamente orientada a objetos y se usan componentes de Symfony.

Ahora crear un módulo, una página o un bloque es totalmente diferente. Mi intención con esta serie de artículos es mostrar como se hace ahora para facilitaros el paso a esta nueva versión que vale mucho la pena.

Puedes leer otros artículos de esta serie:

1. Crear un módulo para Drupal 8
2. Crear una página desde un módulo para Drupal 8
3. Añadir parametros a una página en Drupal 8
4. Plugins en Drupal 8
5. Crear un bloque en Drupal 8

Un bloque es un plugin

Así, cada bloque estará definido en una clase que tendrá que:

• Estar en la subcarpeta src/Plugin/Block de nuestro módulo
• Tener la anotación @Block
• Implementar la interfaz Drupal\Core\Block\BlockPluginInterface

Vamos por partes.

No es raro que en nuestros desarrollos nos tengamos que enfrentar con algún elemento html al que se aplican estilos desde javascript, normalmente porque esos estilos son necesarios para el funcionamiento del plugin javascript de turno, como puede ser darle posicionamiento relativo a un elemento o darle un alto determinado. Pero en ocasiones, por requisitos de diseño, debemos cambiar este valor, o bien cambiarlo para determinados casos, como puede ser una cierta resolución de pantalla.

Javascript aplica estos estilos escribiendo en el atributo style del elemento html en cuestión. La mala noticia es que el atributo style tiene prioridad sobre cualquier otra regla de css que apliquemos... o casi. Si bien en las últimas versiones de chorme suele ser suficiente con un !important, esto no funciona para todas las versiones y navegadores modernos. Vamos a ver como lidiar con ello. Pongamos un ejemplo típico, google maps:

<div id="map" style="height: 360px; position: relative; overflow: hidden; 
transform: translateZ(0px); background-color: rgb(229, 227, 223);"> ... </div>

imaginemos que queremos cambiar el alto a 300px en tablet, en una resolución entre 768px y 992px:

@media (min-width: 768px) and (max-width: 992) {
  #map, #map[style] {
    height: 300px !important;
  }
}

Listo!