El Administrador de imágenes (Image Manager) nos proporciona un lugar central para cargar y almacenar imágenes (biblioteca de imágenes), que luego podemos reutilizar en LibGuides y LibApps. Por ejemplo, podemos reutilizar las imágenes en:

• Los ítems de contenido de texto enriquecido (Rich Text/HTML) en LibGuides.
• En las imágenes destacadas de los eventos del calendario de LibCal.
• En las preguntas frecuentes de LibAnsers FAQs.

Para acceder al administrador de imágenes, hacemos clic en el menú "Content" (barra superior naranja) y seleccionamos la opción "Image Manager" en el desplegable.

Tenemos dos tipos bibliotecas de imágenes:

1. Personal Library: contiene las imágenes solo nosotros podemos administrar y reusar.
2. Shared Library: permite a los administradores subir imágenes para que puedan ser utilizadas por todos los usuarios de LibApps.

Podemos organizar las imágenes de nuestra biblioteca en carpetas (folders) y añadir a las imágenes palabras clave (keywords). Esto facilitará la navegación y búsqueda de las imágenes.

Crear, renombrar y eliminar carpetas

En la parte inferior de la columna izquierda de la biblioteca de imágenes (FOLDERS) podemos:

• Create New Folder: Crear una nueva carpeta.
• Rename / Delete Folder: renombrar o eliminar las carpetas.

Mover imágenes entre carpetas

Podemos reorganizar y mover nuestras imágenes entre carpetas, dentro de nuestra biblioteca personal (Personal Library).

1. Accedemos a nuestro administrador de imágenes, haciendo clic en el menú "Content" (barra superior naranja) y seleccionando la opción "Image Manager" en el desplegable.
2. Hacemos clic en la miniatura de la imagen que deseamos editar (si la imagen ya está en una carpeta, primero debemos abrir la carpeta contenedora de la imagen).
3. En la ventana emergente "Edit Image Properties", en el desplegable "Folder" seleccionamos la carpeta a la que deseamos mover la imagen.
   
    
4. Hacemos clic en "Save".

Insertar una imagen con el editor de texto enriquecido (Rich Text / HTML)

1. Para insertar una imagen, colocamos el cursor donde deseamos que vaya la imagen y hacemos clic en el botón  Imagen.
   
    
2. En la ventana "Propiedades de Imagen", hacemos clic en el botón "Ver Servidor".
   
    
3. En la ventana Administrador de imágenes (Image Manager Library) seleccionamos o cargamos una nueva imagen:
   1. Para cargar e insertar una nueva imagen, hacemos clic en "Cargar nueva imagen" (Upload New Image). Podemos cargar cualquier archivo JPG, JPEG, GIF, PNG o ICO de hasta 5 MB de tamaño.
   2. Para insertar una imagen existente, hacemos clic en el icono Reutilizar esta imagen  , debajo de su miniatura.
      
       
4. En la ventana "Propiedades de la imagen", podemos personalizar la imagen utilizando las opciones de la pestaña "Información de Imagen":
   1. URL: contiene la URL de la imagen de la biblioteca del Administrador de imágenes.
   2. Texto Alternativo: añadimos un texto descriptivo para que los usuarios de lectores de pantalla puedan acceder a la imagen.
   3. Anchura: personaliza el ancho de la imagen.
   4. Altura: Personaliza la altura de la imagen.
      • Cuando el icono del candado está bloqueado (Proporcional), al introducir una anchura o una altura se calculará automáticamente la otra dimensión para que la imagen conserve su relación de aspecto.
      • Podemos hacer clic en el icono del candado para activar o desactivar la relación de aspecto.
      • Para restaurar las dimensiones predeterminadas, hacemos clic en el icono "Tamaño original".
   5. Borde: introducimos un valor para aplicar un borde alrededor de la imagen. Cuanto mayor sea el valor, más grueso será el borde.
   6. Esp. Horiz: para aplicar un margen en los lados izquierdo y derecho de la imagen.
   7. Esp. Vert: para aplicar un margen en la parte superior e inferior de la imagen.
   8. Alineación: nos permite alinear la imagen a la izquierda o a la derecha del elemento de contenido de texto enriquecido/HTML.
       
5. Vínculo: Si deseamos que nuestra imagen se vincule a una URL, hacemos clic en la pestaña "Vínculo":
   • URL: introducimos la URL donde deseamos que enlace la imagen.
   • Destino: seleccionamos el destino del enlace (ventana actual "_self" o en una ventana nueva "_blank"). Desde el punto de vista de la accesibilidad, no se recomienda abrir los enlaces en ventanas nuevas porque no funciona el botón de retroceso del navegador (lo que puede confundir al usuario). Sólo se recomienda su uso cuando son enlaces a documentos no Web, como DOC, PDF, etc.
     
      
6. Aceptar: hacemos clic para insertar la imagen y guardamos los cambios en el editor de texto enriquecido.

Editar una imagen existente

Para editar una imagen que ya hemos insertado en nuestro elemento de contenido de texto enriquecido/HTML, simplemente hacemos clic con el botón derecho en la imagen y seleccionamos "Propiedades de imagen" en el menú contextual.

Introducción

Aunque es opcional, agregar un thumbnail o miniatura a un recurso ayuda a identificar el contenido y capta la atención del usuario. Por ejemplo, si tenemos un grupo de enlaces en nuestra guía, podemos mostrar una pequeña imagen en miniatura del logotipo de cada enlace.
Al agregar una imagen en miniatura a un recurso, se mostrará a la izquierda de su nombre y descripción. La miniatura tendrá un hipervínculo a la misma URL del recurso.

Añadir miniaturas a enlaces (Link), Documentos y Archivos (Document) y Bases de datos (A-Z Database List)

Podemos agregar y editar Thumbnails a los siguientes assets:

• Enlaces (Link).
• Documentos y archivos (Document).
• Bases de datos (A-Z Database List)

El procedimiento es el siguiente: cuando creamos o editamos los recursos mencionados, clicamos en el panel   "Assign Thumbnail Image" para desplegar varias opciones:

1. Image URL: clicando en el botón "Browse" podemos cargar o seleccionar al imagen del "Gestor de imágenes" (Image manager). También podemos introducir la URL de una imagen en línea.
   •  Para eliminar una miniatura de un recurso, eliminamos la URL y dejamos el campo vacío.
2. Height: alto en píxeles.
3. Width: ancho en píxeles.
   • Si solo proporciona un ancho, el alto se escalará automáticamente (y viceversa).
4. Alt Text: introducimos un texto alternativo para que pueda ser leído por los lectores de pantalla.

Una vez que realicemos los cambios en esa configuración, debemos guardar el asset.

NOTA: La lista de bases de datos A-Z solo puede ser administrada por los usuarios administradores o regular users con permisos para administrar assets. Aunque todos los demás usuarios pueden reutilizar las bases de datos en sus guías, no pueden agregarlas ni editarlas.

El acceso a la edición de un asset A-Z Database List no se encuentra en la página de assets, sino que es el siguiente: 
Content > A-Z Database List > y clicamos en el lápiz "Edit item", lo que nos mostrará el panel "Assing Thumbnail Image".

Generar una imagen en miniatura de la página de inicio de una Guía

LibGuides nos permite generar imágenes en miniatura de las páginas de inicio de nuestras guías, que podemos descargar para usarlas donde deseemos. Para generar una nueva miniatura el procedimiento es el siguiente:

1. Editamos nuestra guía y hacemos clic en el botón "Published/Unpublished" (reflejará el estado actual de la guía).
2. Seleccionamos en el desplegable "Change Status & Share".
   
    
3. En la ventana emergente "Guide Status" hacemos clic en la pestaña "Guide Thumbnail".
4. Hacemos clic en el botón "Take new guide screenshot". Aparecerá una miniatura de la página de inicio de nuestra guía, junto con un enlace a la imagen.
   NOTA: si nuestra página de inicio contiene un flash incrustado o un video HTML5, el video no se incluirá en la captura de pantalla de su guía.
   
    
5. Size: Elegimos el tamaño de la imagen.
6. Screenshot URL: copiamos la URL para compartirla como un enlace, agregarla a una página web en una etiqueta <img>, o subirla a la biblioteca de imágenes.
7. Close: cerramos la ventana.

Añadir miniaturas a Bases de Datos (A-Z List Management Beta)

Las bases de datos de nueva lista de bases de datos (Beta) pueden contener thumbnails, por ejemplo, pueden mostrar una pequeña imagen en miniatura del logotipo de cada base de datos.
La lista de bases de datos A-Z solo puede ser administrada por los usuarios administradores o regular users con permisos para administrar assets. Aunque todos los demás usuarios pueden reutilizar las bases de datos en sus guías, no pueden agregarlas ni editarlas.

Las bases de datos que contengan miniatura mostrarán la imagen en nuestra Guía, pero no podremos editarla.

Un administrador puede editar una base de datos (A-Z List Management Beta) pero no desde la biblioteca de assets, sino desde la lista de bases de datos:
 Content > A-Z List Management Beta > Settings > y clicamos en el lápiz "Edit item": en esta página pulsamos en "Additional Information"

• Thumbnail URL (Browse image Manager): introducimos la URL para mostrar la imagen en miniatura (como un logotipo) junto al nombre de la base de datos. El enlace "Browse image Manager" nos permite seleccionar una imagen de nuestra biblioteca de imágenes.
• Thumbnail Alt Text: introducimos el texto alternativo de la imagen.

Para insertar iconos en nuestras Guías, podemos emplear la librería de iconos Font Awesome.

En la web Font Awesome podemos copiar el código del icono deseado e insertarlo en nuestras guías con editor de texto Rich Text/HTML: para conseguirlo tenemos que insertar el código con el editor en modo vista código fuente, es decir, clicando en el botón Fuente HTML antes de pegarlo.
 

Podemos cambiar el tamaño y color de los iconos insertados de diferentes maneras:

• Cambiando el tamaño y/o color del texto junto al icono.
• Insertando el icono en un encabezamiento: h3, h4, h5...
•  Empleando en el código las clases: fa-lg (aumento del 33%),  fa-2x fa-3x fa-4x fa-5x

  <i aria-hidden="true" class="fa fa-pencil fa-lg"></i>
<i aria-hidden="true" class="fa fa-pencil fa-2x"></i>
<i aria-hidden="true" class="fa fa-pencil fa-3x"></i>
<i aria-hidden="true" class="fa fa-pencil fa-4x"></i>
<i aria-hidden="true" class="fa fa-pencil fa-5x"></i>

Añadir iconos a los menús laterales

En caso de que queramos añadir iconos a los menús laterales, al crear o editar una página incluiremos el HTML de Font Awesome antes del título de la página.

Consejo: añadir espacios a la derecha del icono para separar el icono del texto: