carrusel

Slideshow responsive mulitversiones en Drupal

webmaster — Thu, 13 Apr 2023 09:14:03 +0000

Slideshow responsive mulitversiones en Drupal

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"

El resultado final, será un carrusel al que podremos añadir varias diapositivas, con los elementos necesarios para que nuestros usuarios puedan ver la información principal y hacer clic en el botón, para saber los detalles.

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);

webmaster Jue, 13/04/2023 - 11:14

Slick paragraphs

webmaster — Sat, 04 Mar 2023 09:36:21 +0000

Slick paragraphs webmaster Sáb, 04/03/2023 - 10:36

En Drupal siempre contarás con varias opciones para crear tus contenidos o ampliar las funcionalidades de tu proyecto, a partir de la versión 8, con la aparición de Paragraphs, se crearon una gran cantidad de nuevas posibilidades para que esto fuera posible.

Una de estas es la oportunidad de crear un Carrusel con más opciones de personalización que en el pasado, por esta razón te voy a contar cómo configurarlo para que puedas añadirlo a tu proyecto.

Cómo instalar y configurar el módulo:

Paso 1 Descargar el módulo:

Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.

Paso 2 Activación del módulo :

Para activar el módulo Slick Paragraphs, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en slick_paragraphs -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.

Cómo crear un carrusel de imágenes:

1.- Crear un contenido Tipo Paragrphs:

Cómo una de las dependencias del Slick Paragraphs es el módulo que revolucionó Drupal, llamado "Paragraphs" y ya lo tenemos activado, ahora podremos crear una la estructura correspondiente a una diapositiva con todos los elementos que deseamos mostrar en el carrusel, para ello accederemos a la siguiente url y añadiremos el tipo "diapositiva".

/admin/structure/paragraphs_type/add

2.- Añadir los campos de la diapositiva:

Si lo que tenemos pensado es un carrusel donde mostrar por ejemplo las ofertas de temporada, lo lógico sería que cada Diapositiva tenga al menos tres campos: Imagen de la campaña, el nombre de la campaña y algún texto adicional para describir o tal ves un enlace que nos lleve a la página de productos o al detalle de la campaña; por lo tanto, lo que necesitaremos en este momento es añadir tantos campos como vayamos a necesitar.

/admin/structure/paragraphs_type/slide/fields

3.- Creando el Carrusel:

Ya tenemos preparada nuestra diapositiva con todos los elementos que vamos a mostrar cada vez que se mueva el carrusel, por lo tanto, el siguiente paso que nos queda es crear nuestro "Carrusel", como la idea es que nuestro carrusel se muestre en la página principal, crearemos un Bloque personalizado

/admin/structure/block/block-content/types

Con un campo tipo "Paragraphs" al que llamaremos "carrusel_home", y dentro de este campos, vamos a permitir que se añadan tantas diapositivas como haga falta.

Lo siguiente será seleccionar el otro tipo paragraphs al que llamamos "diapositiva" para completar el proceso de nuestro carrusel.

Ahora ya podrás crear tu carrusel con todas las diapositivas que necesites, también podrás realizar otras configuraciones del carrusel, desde la pestaña de visualización del campo:

Categoria

Crear Bootstrap Slideshow en Twig con Paragraphs

webmaster — Wed, 01 Mar 2023 07:54:05 +0000

Crear Bootstrap Slideshow en Twig con Paragraphs

Descripción

En algunos casos, nuestro cliente puede querer controlar las proporciones de la imagen que se verán en un carrusel, aqui te dejo el código con el que podrías solucionarlo.

webmaster Mié, 01/03/2023 - 08:54

Instrucciones

Instalamos el módulo ImageWidgetCrop que nos permitirá crear varios estilos para una misma imagen
Creamos un campo imagen que permita añadir múltiples elementos
Creamos los estilos y los Crop Styles para cada caso y los configuramos.
Asignamos en el formulario del tipo de contenido, en el campo de las imágenes los estilos para que estén disponibles
Ya tendremos bootstrap theme instalado y nuestro subtema creado
En la plantilla correspondiente a nuestro tipo de contenido añadimos el código que está debajo

{# Slider#}
<div class="contenedor-slider">
        {% if content.field_slideshow_de_fondo|render %}
             <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                  <ol class="carousel-indicators">
                         {% for key, item in content.field_slideshow_de_fondo if key|first != '#' %}
                             <li class="{% if loop.first %}active{% endif %}" data-slide-to="{{ key }}" data-target="#myCarousel"></li> //Agrega el ACTIVE al primer elemento
                         {% endfor %}
                    </ol>
                   <!-- Wrapper for slides -->
                     <div class="carousel-inner">
                        {% for key, item in content.field_slideshow_de_fondo['#items'] if key|first != '#' %}
                             <div id="{{ key + 1 }}" class="paragraph--layout-slideshow__slide-{{ key + 1 }} item carousel-item{% if loop.first %} active{% endif %}">
                                   <picture>
                                       <source media="(max-width: 414px)" srcset="{{ file_url(item.entity.uri.value|image_style('estilo_movil')) }}"> // Nos permite acceder a la url de la imagen con el estilo aplicado
                                       <source media="(max-width: 768px)" srcset="{{ file_url(item.entity.uri.value|image_style('estilo_tablet')) }}">
                                       <source media="(max-width: 1023px)" srcset="{{ file_url(item.entity.uri.value|image_style('estilo_escritorio')) }}">
                                       <source srcset="{{ file_url(item.entity.uri.value|image_style('estilo_escritorio')) }}">
                                       <img src="{{ file_url(item.entity.uri.value|image_style('estilo_escritorio')) }}" alt=""> //Selecciona la imagen correcta según el dispositivo
                                  </picture>
                                </div>
                           {% endfor %}
                        </div>
               </div>
          {% endif %}
</div>

Paginador

Categoría

Portada