Aunque en la mayoría de las ocasiones, los módulos contribuidos de Drupal podrán resolver el 85% de las necesidades; en algunos casos nos toca realizar desarrollos a medida o añadir ciertos ajustes, para que el resultado cumpla totalmente con nuestro propósito.
Otra de las razones por las que nos podemos ver obligados a realizar esta clase de personalizaciones, es para prevenir fallos por incompatibilidad entre versiones de Drupal, una vez actualizados nuestros proyectos.
Una de las funcionalidades más reclamadas es el uso de un carrusel o slideshow, donde el usuario administrador del sitio pueda promover algunso contenidos de su web, informar sobre promociones concretas o simplemente avisar a los recién llegados, acerca de las ventajas con las que contarán si se suscriben al sitio.
Por todo lo anterior, hoy te voy a contar los pasos para crear un Carrusel Responsivo, sin la necesidad de utilizar ningún módulo contribuido y con la capacidad añadida de que podrás utilizarlo en cualquier proyecto Drupal, independientemente de la versión.
Requerimientos
- Tener instalado un Subtheme o theme personalizado (Para realizar cambios en plantillas)
- Conocimientos básicos sobre Drupal Behaviors HAZ CLIC AQUÍ
- Tener instalado los módulos Media y Media Libraries (Para cargar las imágenes)
- Tener instalado el módulo Paragraphs (Para que el Slideshow sea más flexible) HAZ CLIC AQUI
- Tener habilitado el Modo debug de Drupal HAZ CLIC AQUÍ
Cómo crear un Slideshow Responsivo transversal en Drupal
Paso 1 - Crear el Subtheme o tema personalizado
Vamos a comenzar por generar nuestro tema personalizado, para ello utilizaremos el Theme Olivero, que viene instalado en Drupal, a partir de Drupal 9, sustituyendo a Bartik.
Arhivos y configuraciones del Subtheme basado en Olivero
Para poder implementar un tema personalizado en Drupal, serán necesarios varios archivos y carpetas, que nos permitirán conectarlo con Drupal; una vez instalado el subtheme, podremos añadir ciertas modificaciones posteriores, como haremos con los estilos CSS y el código javascript necesario para que funcione nuestro carrusel de imágenes.
Los archivos y carpetas, que deberás crear antes de poder instalar el Subtheme son:
Carpetas: olivero_subtheme, css, js, templates
Archivos: olivero_subtheme.info.yml, global_styling, olivero_subtheme.libraries.yml, style.css, global.js
olivero_subtheme/ olivero_subtheme.info.yml
name: 'Olivero Subtheme' type: theme description: 'Subhteme based on Olivero' core: 8.x core_version_requirement: ^8 || ^9 || ^10 base theme: olivero libraries: - olivero_subtheme/global-styling
olivero_subtheme/ olivero_subtheme.libraries.yml
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
js:
js/global.js: {}
dependencies:
- core/jquery
olivero_subtheme/ style.css
/** * @file * Subtheme specific CSS. */
Una vez creados todos los archivos necesarios para nuestro subtheme, podremos activarlo como theme por defecto, por medio de la interfaz de usuario de Drupal, desde la url '/admin/appearance', no hemos definido ninguna zona en el archivo olivero_subtheme.info.yml, porque utiliaremos las mismas que trae el theme base Olivero.
Paso 2 - Creación de los Paragraphs Carrusel y Diapositiva
Al igual que explicamos en el curso Landing Page para Drupal 8/9/10, nuestra idea será crear un componente del tipo Paragraphs al que llamaremos Carrusel, que nos permitirá añadirlo y reutilizarlo, en cualquiera de las páginas de nuestro proyecto, por eso lo combinaremos con los módulos Media y Media libraries, y así podremos aprovechar la máximo todo nuestro contenido.
Primero crearemos un tipo de paragraphs, al que llamaremos "Diapositiva" y le añadiremos cuatro campos:
- Imagen de fondo: Tipo multimedia, para reutilizar las imágenes.
- Títular princpal
- Subtítulo
- Botón: tipo enlace, para que podamos añadir un botón que lleve al usuario a otros contenidos.
Una vez creado el páragraph para las diapositivas, crearemos el segundo paragraphs, con el nombre "Carrusel Promocional", con un único campo del tipo Paragraphs, al que llamaremos "Diapositivas" y dejaremos como ilimitado, permitiéndonos añadir tantas diapositivas como hagan falta.
Paso 3 - Añadir el campo Contenidos en Basic Page
Ahora que ya tenemos creados y configurados los paragraphs, correspodientes a las diapositivas y al mismo carrsuel, es el momento de añadirlo, dentro del contenido "Página básica" o el que prefieras tú, lo llamaremos "Contenidos", y por el momento, sólo añadiremos la referencia hacia nuestro "Carrusel Promocional"
Paso 4 - Configurar las plantillas Twig
Este paso ya lo hemos explicado ampliamente en varias ocaciones, se trata de facilitar la identificación de las plantillas que necesistaremos, para adapatarlas a los cambios requeridos.
Si todavía no haz utilizado el Modo Debug de Drupal HAZ CLIC AQUÍ
Con el modo Debug activado, nos tocará averiguar y elegir el nombre para nuestras plantillas y aplicarles la estructura correspondiente en cada caso.
Así que, para poder probar nuestro carrusel, primero crearemos una página básica y le añadiremos todos los datos necesarios, que hemos configurado previamente. Como se trata de un carrusel, añadiremos dos diapositivas, para verificar que todo es correcto y se muestra según lo que esperábamos.
Cambiando la plantilla de las diapositivas
Basándonos en el nombre sugerido para la plantilla que afectará a nuestras diapositivas, copiaremos la plantilla modelo desde el módulo Paragraphs y a continuación copiaremos el siguiente código, cambiando los valores por los que hemos puesto.
{% block paragraph %}
<div{{ attributes.addClass(classes) }}
{% block content %}
{% if content.field_imagen_de_fondo|render is not empty %}
style=" background-image: url('{{ file_url(content.field_imagen_de_fondo[0]['#media'].field_media_image.entity.uri.value) }}')";
{% endif %}
>
<div id="home-content-box" {{ content_attributes.addClass('node__content', 'clearfix') }}>
<div id="home-content-box-inner" class="text-center">
<div id="home-heading">
{% if content.field_titular_princpal|render is not empty %}
<h1 class="label-slide">{{ content.field_titular_princpal.0 }}</h1>
{% endif %}
{% if content.field_subtitulo|render is not empty %}
<div id="env-explicacion">
<p class="explicacion">
{{ content.field_subtitulo.0 }}
</p>
</div>
{% endif %}
{% if content.field_boton_diapositiva|render is not empty %}
<div id="home-btn" class="animated zoomIn">
<a class="btn btn-light"
href="{{ content.field_boton_diapositiva[0]['#url'] }}" role="button"
title="{{ content.field_boton_diapositiva|render|striptags|trim }}">
{{ content.field_boton_diapositiva[0]['#title'] }}
</a>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}
</div>
{% endblock paragraph %}
Guaradaremos los cambios y deberíamos ver algo parecido a la siguiente pantalla, en caso contrario, puede que necesites borrar la caché de Drupal, o corregir el nombre de alguno de tus campos en la plantilla.
Aplicando CSS a la plantilla para las Diapositivas
En esta parte, aplicaremos los primeros cambios para modificar el aspecto de nuestras diapositivas, será desición tuya si colocas los estilos dentro de la misma plantilla, entre las etiquetas <style></style>, lo cual haría de esta plantilla una especie de Compente, como si trabajaras con un proyecto Headless o si lo prefieres, puedes añadirlo a tu hoja de estilos global.
<style>
/* Telefonos en vertical (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
#home-heading {
margin-top: -166px;
}
header#header {
position: absolute;
z-index: 99;
width: 100%;
}
#navbar-main {
background: none;
}
#navbar-main .container {
max-width: 90%;
}
.navbar-brand img, span.navbar-toggler-icon {
filter: invert(1);
}
button.navbar-toggler.collapsed {
border: none;
}
.paragraph--type--diapositiva {
height: 800px;
margin-bottom: 40px;
}
h1.label-slide {
font-size: 40px;
color: #fff;
line-height: 47px;
max-width: 243px;
margin: auto;
}
#env-explicacion {
font-size: 18px;
max-width: 314px;
}
}
/* Ordenadores y Laptops (desktops, 992px and up) */
@media (min-width: 992px) {
.paragraph--type--diapositiva {
height: 800px;
}
h1.label-slide {
font-size: 50px;
color: #fff;
line-height: 47px;
margin-bottom: 25px;
}
#env-explicacion {
font-size: 14px;
}
.paragraph--type--diapositiva a.btn.btn-light {
margin-top: 54px;
}
.owl-dots {
position: relative;
top: -254px;
}
}
.paragraph--type--diapositiva {
background-size: cover;
background-repeat: no-repeat;
}
#home-content-box {
width: 100%;
height: 100%;
display: table;
background: rgba(0,0,0,0.6);
}
#home-content-box-inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#env-explicacion {
font-size: 21px;
margin: auto;
color: #ccc;
line-height: 29px;
max-width: 90%;
}
#env-explicacion p {
max-width: 806px;
margin: 20px auto;
}
.paragraph--type--diapositiva a.btn.btn-light {
border-radius: 25px;
padding: 10px 30px;
text-decoration: none;
background: #ededed;
color: #000;
}
</style>
Pado 5 - Añadiendo las librerías de OWL Carousel
Como hemos prometido, nuestro carrusel no necesitará ningún módulo contribuido de Drupal para su funcionamiento, esto permitirá que podamos emplearlo en mútiples proyectos, sin correr riesgos de compatiblidad.
Así que utilizaremos los archivos descargados desde la página oficial de Owl Carousel 2, que nos permitirán obtener un carrusel, muy fácil de configurar y personalizar, gracias a varias de las opciones con las que cuenta.
Tienes la demostración y el código necesario en el apartado Demos, dentro de su misma web.
Por ahora, necesitaremos descarar el archivo ubicado en la página oficial, en el botón Download y a continuación, añadiremos, dentro de las carpetas js y css, de nuestro tema personalizado, los siguientes archivos:
- css / owl.carousel.min.css
- css / owl.theme.default.min.css
- js/ owl.carousel.min.js
Cuando hayamos colocado cada uno de los archivos, dentro de sus correspondientes carpetas css y js, en nuestro tema personalizado, añadiremos la ruta, dentro de nuestro archivo libraries, para poder ejecutar el código sobre los elementos de nuestro carrusel.
olivero_subtheme.libraries.yml
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
css/owl-carousel/owl.carousel.min.css: { }
css/owl-carousel/owl.theme.default.min.css: { }
js:
js/global.js: {}
js/owl-carousel/owl.carousel.min.js: { }
dependencies:
- core/jquery
Añadiendo el identificador para nuestro carrusel
Para que nuestro carrusel funcione con OWL Carousel 2, tendremos que añadir dos elementos fundamentales, el identificador, con el cual podremos aplicar todas las funcionalidades javascript y la clase owl-carousel owl-theme, que permitirá conectar el contenido con el carrusel.
En este caso, añadiremos una plantilla más, del tipo campo, porque así nos aseguraremos de que esté justo encima de las diapositivas.
Como estamos utilizando Olivero, copiaremos la plantilla field.html.twig, ubicada en su carpeta Templates y la renombraremos, colocándola dentro de nuestro tema personalizado.
Luego añadiremos el identificador y la clase, en la primera línea, tal y como te muestro en la siguiente imagen.
Paso 6 - Añadiendo el código javascript
Ya casi hemos terminado todo el trabajo, el último paso será llamar a nuestros elementos, utilizando el identificador que acabamos de agregar y aplicándole los ajustes necesarios de Javascript, que harán funcionar nuestro carrusel.
En esta parte, añadiremos el código que falta, dentro del archivo global.js.
/**
* @file
* Global utilities.
*
*/
(function (Drupal) {
Drupal.behaviors.drupalAdicto = {
attach: function (context, settings) {
$("#slider-home").owlCarousel({
autoplay: true,
loop: true,
autoplayHoverPause: true,
nav: false,
center: true,
margin: 0,
responsive: {
0:{
items: 1,
dots: true,
},
600:{
items: 1,
dots: true,
},
1000:{
items: 1,
dots: true,
}
}
});
}
};
})(Drupal);
