Un tutorial completo sobre el módulo ColorBox para Drupal 9 (y cómo extenderlo)
Publicado: 2020-09-29Las imágenes juegan un papel importante en la mejora de la experiencia del usuario de un sitio web. Un estudio muestra que el 90% de la información que transmitimos a nuestro cerebro es visual. Muchos sitios web trabajan solo en torno a esta teoría y bombardean a los usuarios con toneladas de medios enriquecidos como imágenes y archivos de video. La mayoría de ellos pasan por alto el aspecto de presentación de estos archivos multimedia y terminan con una experiencia de usuario decepcionante. Lo que necesitan es una herramienta como ColorBox que es un complemento jQuery extremadamente liviano que le permite mostrar imágenes de manera elegante e intuitiva. Los estilos y funcionalidades son altamente personalizables a través de CSS y Javascript. El módulo Drupal ColorBox es compatible con Drupal 6, 7, 8 y ahora también con Drupal 9. En este artículo, aprenderá a configurar, implementar y ampliar aún más el módulo ColorBox para Drupal 9.
ColorBox para Drupal
El módulo ColorBox se integra con el complemento ColorBox jQuery en Drupal. El complemento es una caja de luz liviana y personalizable para jQuery. Entre los otros módulos “box” de la competencia que se utilizan para propósitos similares (Thickbox, Lightbox2, Shadowbox, Greybox, etc.), el módulo ColorBox es el más popular y tiene el mayor número de instalaciones. El uso de Drupal ColorBox no solo termina con la visualización hermosa de las imágenes cargadas. También admite el diseño de videos similares, archivos PDF, nodos, taxonomía, formularios web, contenido iframed y más. El estilo se puede controlar a través de CSS, por lo que la apariencia es altamente personalizable. La funcionalidad también se puede personalizar fácilmente a través del archivo JS sin tener que tocar el HTML. También admite la agrupación de fotos y precarga las próximas imágenes
Pasos para instalar el módulo ColorBox
1.Instale el módulo ColorBox con composer.
composer require 'drupal/colorbox:^1.6'composer require 'drupal/colorbox:^1.6'
2. Descargue el complemento ColorBox 1.x.
1. Usando el comando Drush
(Nota: si está utilizando el comando drush para instalar el complemento ColorBox, debe habilitar el módulo y luego ejecutar el siguiente comando)
drush colorbox-plugindrush colorbox-plugin
2. Descarga manualmente el complemento ColorBox
Descargue el complemento Colorbox y descomprímalo en / libraries. Asegúrese de que la ruta al archivo del complemento se vea así:
“/libraries/colorbox/jquery.colorbox-min.js”“/libraries/colorbox/jquery.colorbox-min.js”
3. Habilite el módulo Drupal ColorBox.
drush en -y colorboxdrush en -y colorbox
¡Felicidades! Ahora está listo para utilizar las funciones del módulo ColorBox.
Configuración del módulo ColorBox
Configure el módulo Drupal ColorBox navegando a Configuración -> Medios -> Configuración de Colorbox .
Cómo crear una galería de imágenes usando ColorBox
1. Para crear una galería de imágenes, primero debemos agregar un campo de imagen para uno de los tipos de contenido. Elija el nombre de la etiqueta y luego haga clic en el botón Guardar y continuar.
2. El siguiente paso es configurar los ajustes de campo. Podemos agregar la imagen predeterminada cuando no hay imágenes cargadas. Un texto alternativo con fines de accesibilidad y un título. La configuración del número permitido de valores indica el límite máximo de carga para un campo. Seleccione la opción deseada y luego haga clic en el botón Guardar configuración de campo.
3. Luego, estableceremos las otras configuraciones para los campos de esta imagen como extensiones de archivo permitidas, directorio de archivos, resolución de imagen máxima y mínima, tamaño máximo de carga, alt y título para la imagen y luego haga clic en guardar configuración.
4. Ahora, hemos terminado la configuración del campo de imagen. Establezcamos la opción de formato para el campo de imagen creado para ColorBox. Navegue hasta Administrar visualización del tipo de contenido y luego configure la opción de formato del menú desplegable como ColorBox. Hacer clic en el engranaje junto a la opción de formato nos permite personalizar la imagen mostrada. Una vez que se actualicen todas las opciones, haga clic en el botón de actualización y luego haga clic en la opción de guardar.
5. Ahora agreguemos algo de contenido a nuestra galería de imágenes de ColorBox haciendo clic en Agregar contenido. Podemos cambiar el orden de las imágenes cargadas en función del peso de las imágenes. Y luego haga clic en el botón Guardar. La visualización del contenido se verá a continuación.
6. Finalmente, al hacer clic en cualquiera de las imágenes, se muestra la imagen dentro del modal ColorBox como se muestra a continuación.
También puede hacer lo mismo con el campo incrustado de video.
Cómo integrarse con el módulo en línea ColorBox
El módulo Colorbox Inline permite al usuario abrir el contenido que ya está en la página dentro del ColorBox.
1. Instale el módulo en línea de colorbox
composer require 'drupal/colorbox_inline:^1.2'composer require 'drupal/colorbox_inline:^1.2'
2. Habilite el módulo usando el comando drush / Habilite manualmente a través de la interfaz de usuario de drupal
drush en -y colorbox_inlinedrush en -y colorbox_inline
3. Abrir imagen en modal ColorBox que está en la página usando un enlace
4. Navegue para agregar contenido -> Cualquier tipo de contenido que tenga un campo de cuerpo
Cambiar el formateador de texto de html básico a html completo
6. Luego haga clic en el botón Guardar.
Aquí, en el ejemplo anterior, el atributo data-colorbox-inline de la etiqueta de anclaje también puede contener el nombre de la clase en lugar de la identificación. Ver imagen es un enlace donde abre una imagen ya existente en una página (modifique los cambios de acuerdo con los requisitos de su proyecto). Podemos usar este módulo para renderizar cualquier contenido (video, formulario web, etc.) de manera similar.
Al ver esta página, puede ver un enlace con la imagen. Y al hacer clic en el enlace Ver imagen, aparecerá una ventana emergente ColorBox como se muestra en la imagen de abajo.
Cómo integrar ColorBox con el módulo de carga ColorBox
El módulo ColorBox Load permite a los usuarios cargar el contenido en ColorBox usando Ajax. Con este módulo, los usuarios pueden especificar una serie de rutas que, cuando se renderizan, abrirán un ColorBox con el contenido. Depende del módulo NG Lightbox para la interfaz de administración de rutas. Este método se puede utilizar para representar nodos, páginas, formularios web y más.
Instale el módulo de carga de la caja de color
composer require 'drupal/colorbox_load:^1.2'composer require 'drupal/colorbox_load:^1.2'
Habilite el módulo usando el comando drush / Habilite manualmente a través de la interfaz de usuario de drupal
drush en -y colorbox_loaddrush en -y colorbox_load
Implementación de una ventana emergente de inicio de sesión utilizando el módulo ColorBox Load .
1. Configure el módulo de carga de ColorBox navegando a Configuración -> Ng Lightbox (debajo de Medios). Podemos configurar las rutas para las que queremos proporcionar la visualización modal de ColorBox, el ancho del modal de ColorBox, la clase para el modal de caja de luz y las opciones del renderizador. (Elija la opción que desee).
2. Ahora podemos ver el modal Drupal ColorBox implementado para la página de inicio de sesión haciendo clic en el botón de inicio de sesión en la página de inicio.
Cómo integrar ColorBox con vistas de Drupal
Para algunos sitios web, es posible que necesitemos una función que pueda mostrar un modal ColorBox para una lista de imágenes. Esto se puede hacer con la ayuda del módulo Vistas.
1. Vaya a estructura -> vistas -> agregar vista.
2. Agregue el campo de imagen para ver y configurar el formateador en ColorBox y otras configuraciones en consecuencia y luego guarde la vista.
3. Ahora eche un vistazo a la vista que acaba de crear (en mi caso, he creado una vista como una página). Puede ver una lista de imágenes y cuando hace clic en una de ellas, la imagen individual se muestra en la ventana emergente ColorBox.
