Ir al contenido principal

Curso LibGuides

Guía de apoyo a la edición Web con LibGuides

Introducción

La caja (box) tipo Gallery nos permite incluir una carrusel o una cuadrícula con diapositivas:

  • Un carrusel con una sucesión diapositivas (slides) que se irán mostrando de manera manual o automática.
  • Una cuadrícula donde se mostrarán todas las diapositivas.

Una diapositiva es una combinación de una imagen y texto. Cada galería puede mostrar un máximo de 100 diapositivas.

Podemos crear los siguientes tipos de diapositivas:

  • Imágenes.
  • Libros (assets book).
  • Bases de datos A-Z.
  • Guías LibGuides (Thumbnail-screenshot)
  • Eventos LibCal

La configuración de las galerías incluye opciones como la velocidad de transición entre diapositivas, la cantidad de diapositivas que aparecen a la vez, los puntos de navegación, opciones de texto y más.

Agregar una diapositiva de imagen

Una diapositiva de imagen nos permite mostrar una imagen con un título y una descripción opcionales. Las imágenes se pueden cargar y seleccionar de nuestras bibliotecas personales o compartidas del Administrador de imágenes (Image Manager).
Para agregar una diapositiva de imagen a una de galería procedemos de la siguiente manera:

  1. Mientras editamos nuestra guía, hacemos clic en la página que contiene la caja de la galería en el menú de navegación de la guía (es decir, pestañas o navegación lateral).
  2. En el encabezado de la caja galería, hacemos clic en el icono Agregar/Editar paneles (Add/Edit Panes).
    Agregar Editar Paneles
     
  3. Hacemos clic en el botón Add New Slide y seleccionamos Image.
    Agregar diapositiva de imagen
     
  4. Slide Image URL (Open Image Manager): para cargar o seleccionar una imagen de nuestra biblioteca de imágenes, hacemos clic en el botón "Open Image Manager". Si deseamos utilizar una imagen externa, también podemos introducir su URL en este campo.
    Opciones de diapositiva de imagen
     
  5. Link URL: para hacer un enlace con la imagen agregamos una URL completa, que dirigirá a los usuarios a otro lugar al hacer clic en la diapositiva. Lo dejamos vacío si no queremos que la diapositiva se vincule a ninguna parte.
  6. Image Alt Text: introducimos el texto alternativo de la imagen.
  7. Slide Title: opcionalmente, podemos proporcionar un título de diapositiva. Esto se mostrará como un encabezamiento de tercer nivel <h3> encima, debajo o a un lado de la imagen, dependiendo de la opción elegida en el campo "Caption position" de la "Configuración de la caja galería" (Gallery Settings).
    Si hemos insertado una URL de enlace (Link URL), el título también se vinculará a esa URL.
  8. Slide Details: opcionalmente, podemos proporcionar detalles de diapositiva con un editor de texto enriquecido. El contenido se mostrará encima, debajo o a un lado de la imagen, dependiendo de la opción elegida en el campo "Caption position" de la "Configuración de la caja galería" (Gallery Settings).
  9. Save: hacemos clic en el botón Guardar.

Agregar una diapositiva de libro

Una diapositiva de libro nos permite mostrar una copia de la carátula (Cover Art), el título y la descripción del libro de los assets "Book" en una caja de galería.

Antes de empezar: solo podemos seleccionar un libro existente en los assets Book. Por lo tanto, para agregar una diapositiva de libro, el recurso debe aparecer en Content > Assets. Si no es así, debemos crear primero el asset con la herramienta para añadir contenido  "Book from the Catalog" y, a continuación, agregar la diapositiva.

Podemos editar los siguientes campos de las diapositivas libro:

  • Slide Image URL: podemos añadir una imagen si el libro no mostrase ninguna.
  • Link URL.
  • Image Alt Text.
  • Slide Title.
  • Slide Details.

Podemos personalizar el título,  la descripción, la imagen... de las diapositivas libros clicando en el icono edit . Los cambios que realicemos solo se reflejarán en la diapositiva, no afectarán al asset book.

Edición diapositiva libro

Agregar una diapositiva de lista de bases de datos A-Z

Una diapositiva de base de datos nos permite mostrar una base de datos de la lista de la A-Z de LibGuides en una caja de galería. Por ejemplo, si deseamos crear una galería de nuevas bases de datos de prueba, podemos agregar una diapositiva para cada base de datos que incluya una miniatura, un vínculo y una descripción.

Antes de empezar: solo podemos seleccionar las bases de datos existentes en la lista A-Z. Por lo tanto, para agregar una base de datos a una diapositiva, la base de datos primero debe aparecer en Content >  A-Z Database List. Si no es así, un administrador debe crear primero el recurso allí, después podemos agregarlo a nuestra diapositiva

Podemos editar los siguientes campos de la base de datos:

  • Slide Image URL: podemos añadir una imagen si la base de datos de la Lista A-Z no mostrase ninguna imagen.
  • Link URL.
  • Image Alt Text.
  • Slide Title.
  • Slide Details.
  1. Si deseamos editar o eliminar el título, la descripción u otra información de la base de datos, después de agregar la diapositiva, hacemos clic en el icono Edit . Los cambios que realicemos solo se reflejarán en la diapositiva, no afectarán a la base de datos real en la lista de la A-Z.
    Editar diapositiva de base de datos de la lista A-Z

Agregar una diapositiva de LibGuides

Una diapositiva de LibGuide nos permite resaltar una guía en una caja de galería. Por ejemplo, si deseamos crear una galería de guías temáticas, podemos agregar una diapositiva para cada guía. Cada diapositiva incluye una captura de pantalla de la página de inicio de la guía, junto con su título y descripción. Al hacer clic en la captura de pantalla o en el título, el usuario accederá a esa guía.

Antes de empezarYa debe haber una captura de pantalla de guía para que se muestre la imagen de manera automática en la diapositiva de la caja galería.

Podemos editar los siguientes campos las diapositivas LibGuide:

  • Slide Image URL: podemos añadir una imagen si la diapositiva de la guía no mostrase ninguna imagen.
  • Link URL.
  • Image Alt Text.
  • Slide Title.
  • Slide Details.
  1. Si deseamos editar o eliminar el título, la descripción u otra información de la guía, después de agregar la diapositiva, hacemos clic en el icono Edit . Los cambios que realicemos solo se reflejarán en la diapositiva, no afectarán a la guía real).
    Editar diapositiva de guía

Agregar una diapositiva de evento LibCal

Podemos destacar los próximos eventos añadiendo diapositivas de eventos de LibCal a una caja galería. Por ejemplo, si deseamos crear una galería de los próximos talleres, podemos agregar una diapositiva para cada evento. Cada diapositiva mostrará la imagen, el título, la descripción, la fecha, la hora, la ubicación y las categorías del evento, todo extraído directamente del calendario de LibCal.

Podemos editar los siguientes campos las diapositivas LibCal Event:

  • Slide Image URL: podemos añadir una imagen si la diapositiva del evento no mostrase ninguna imagen.
  • Link URL.
  • Image Alt Text.
  • Slide Title.
  • Slide Details.
  1. Si deseamos editar o eliminar el título, la descripción u otra información del evento, después de agregar la diapositiva, hacemos clic en el icono Edit . Los cambios que realicemos solo se reflejarán en la diapositiva, no afectarán al evento real).
    editar diapositiva evento LibCal

Configuración de la caja galería

  1. Mientras editamos nuestra guía, seleccionamos la página que contiene la caja galería en el menú de navegación de la guía (es decir, pestañas o navegación lateral).
  2. En el encabezado de la caja galería, hacemos clic en el icono Agregar/Editar paneles (Add/Edit Panes).
    Agregar Editar Paneles
     
  3. La columna "Gallery Settings" nos permite personalizar la configuración de la galería:
    Configuración de galería
     
    1. Automatically play: para reproducir la sucesión de diapositivas en el carrusel de manera automática (se mostrará un botón de reproducción/pausa).

    2. Slide speed: cuando la opción Reproducir automáticamente está activada, utilizamos la velocidad de la diapositiva para controlar durante cuánto tiempo que se mostrará cada diapositiva (en milisegundos) antes de avanzar a la siguiente.

    3. Transition type: efecto que deseamos aplicar a las transiciones de diapositivas:

      • Slide:  las diapositivas avanzan de derecha a izquierda.

      • Fade: la diapositiva anterior se desvanece y se sobrepone la siguiente.

    4. Transition speed: velocidad de transición de una diapositiva a otra (del avance-slide o del desvanecimiento-fade)

    5. Show Dots: puntos de navegación debajo de cada diapositiva.
      • La diapositiva actual se indicará con un punto negro, mientras que las demás se indicarán con puntos grises.
      • Al hacer clic en un punto, accedemos a esa diapositiva.
    6. Max image height: altura máxima de la imagen (en píxeles o porcentaje).

    7. Number of rows: si desea mostrar nuestras diapositivas en una cuadrícula, establecemos el número de filas en 2 o más.

      • Cuando la cuadrícula puede contener todas las diapositivas, se mostrarán todas en la cuadrícula.

    8. Slides per row: número de diapositivas por fila.

    9. Slides to show: número de diapositivas que se muestran a la vez.

    10. Slides to scroll: número de diapositivas que avanzan a la vez.

    11. Caption position: para personalizar el lugar en el que se muestran el título y detalles en relación con el contenido de la diapositiva.

    12. Caption background:  color de fondo del texto de cada diapositiva.

    13. Caption Text: color del texto.

  4. Hacemos clic en el botón Guardar y volver a la guía.

Ejemplos de configuraciones de cajas de galería

Cuadrícula de 2x3 de libros del catálogo Asset Book

Para crear el siguiente "grid" (cuadrícula) establecemos: 

  • Number of Rows: 2.
  • Slides Per Row: 3.

Cuadrícula de libros

Carrusel de Imágenes

Para crear el siguiente carrusel establecemos:

  • Number of Rows: 1.
  • Slides to Show: 3.

Gallery Box Carrusel