El administrador personal centralizado de imágenes se encuentra en el menú Content → Image Manager en la barra de menú principal. Es común a todo LibApps y en él se hallan:

• Las imágenes añadidas a las biblioguías y blogs a través del editor de texto enriquecido
• Las imágenes de los eventos de LibCal
• Las añadidas al módulo LibAnswers (si está disponible)

Hay dos tipos de bibliotecas de imágenes:

1. La biblioteca personal, en la que se almacenan las imágenes que solamente puede gestionar el usuario (administrador, editor)
2. La biblioteca compartida, que permite a los administradores subir imágenes que pueden reutilizar todos los usuarios de LibApps. Solamente los administradores pueden gestionar esta biblioteca institucional.

Cada biblioteca se puede organizar por medio de carpetas y palabras clave, permitiendo el filtrado y la búsqueda.

Los formatos admitidos son: JPG, JPEG, GIF, PNG e ICO con un tamaño de hasta 5 MB. En el gestor de imágenes tenemos herramientas para examinar una imagen, moverla a una nueva carpeta o copiar el enlace directo de esa imagen.

Pulsando en la imagen podremos añadir una descripción, palabras clave o moverla a otra carpeta.

Para crear una carpeta en el gestor de imágenes:

1. Ir a Content
2. Pulsar en Image Manager en el desplegable
3. Seleccionar la biblioteca en la que queremos añadir la carpeta. (Nota: sólo los administradores pueden crear carpetas en la Shared Library.)
4. Bajo las carpetas de la parte izquierda introduciremos el nombre de la nueva carpeta y pulsaremos el botón Create

Para mover una imagen entre carpetas

1. Seleccionamos la biblioteca que contiene la imagen. (Nota: sólo los administradores pueden mover imágenes en la Shared Library.)
2. Seleccionamos la carpeta que contiene la imagen y pulsamos directamente en la miniatura de la imagen
3. En las opciones Edit Image Properties seleccionamos la carpeta a la que queremos moverla en el desplegable Folder
   • Nota:  No se pueden mover imágenes entre la Shared Library y una biblioteca personal
4. Pulsamos Save

Las imágenes se pueden añadir a cualquier bloque de contenido Rich Text / HTML.

1. En la barra de herramientas del editor de texto enriquecido, seleccionamos el icono de imagen.

Se abrirá la ventana de diálogo de Propiedades de Imagen.

2. Podemos subir una imagen, reutilzar una imagen previamente subida al sistema o insertar vinculando una imagen externa de otra web.
   1. Para reutilizar una imagen, pulsamos el botón Ver Servidor. Localizaremos la imagen en la carpeta personal o compartida y pulsaremos en el icono de imagen para insertarla.

2. Para usar una imagen nueva, pulsamos el botón Ver Servidor y, a continuación, Upload New Image

Debemos asegurarnos de cambiar la carpeta en la que deseamos guardar la imagen antes de iniciar la subida. Solamente se pueden subir de una en una.

3. Para insertar un imagen externa que no esté incluida en la biblioteca de imágenes, rellenaremos el campo URL. Debemos ser cuidadosos y utilizar solamente imágenes con licencias abiertas o permisos de reutilización.

3. En cualquier caso, si la imagen no es decorativa debemos añadir a la imagen el Texto Alternativo (atributo alt) para proporcionar una breve descripción de la información contenida en la imagen. Es importante de cara a la accesibilidad.
   • Si la imagen enlaza a un recurso, debemos asegurarnos de que el atributo alt describa también dicho destino.
   • Los atributos alt deben ser breves y descriptivos pero no redundantes. Debemos evitar frases como "Imagen de..." o "Gráfico de..."
   • El texto alternativo definido en el gestor de imágenes se añade automáticamente al insertar la imagen.
     
   • Unos criterios básicos para saber si debemos añadir texto alternativo serían:
     • Si la imagen contiene un enlace, es un botón o un mapa de imágenes, es decir tiene una función, debe llevar texto alternativo
     • En caso contrario, depende del contenido:
       • Si la imagen presenta contenido que no ha sido explicado por el texto en torno a ella, debemos añadir texto alternativo
       • Si la imagen presenta contenido que sí está explicado en el texto, no es necesario añadir texto alternativo. Crearíamos un atributo vacío alt=""
       • Si la imagen no presenta contenido y es meramente decorativa, no es necesario añadir texto alternativo. Crearíamos un atributo vacío alt=""

4. Pulsamos OK

No es necesario configurar la alineación en todos los casos pero ayuda a fijar la imagen a la izquierda o derecha del texto, controla la posición de la imagen en relación al texto.

1. Por defecto: No definida
2. Izquierda: el texto fluye a la derecha de la imagen. Se debe añadir margen lateral.
3. Derecha: el texto fluye a la izquierda de la imagen. Se debe añadir margen lateral.

• Para centrar la imagen:

  • Deshabilitar Alineación. A continuación tendríamos tres opciones:

    • Antes de insertar la imagen, insertar salto de párrafo y seleccionar alineación centrada de texto. En vista HTML sería: <p style=”text-align:center;”><img src=”....” /></p>

    • Emplear la clase <p class=”text-center”><img src=”…” /></p>

    • Sin % de reducción ni márgenes: <img class=”center-block” src=”...” />

•  En cuanto a los márgenes, el espacio alrededor que separa la imagen del texto, la cantidad introducida en píxeles indica:

  • Horizontal space (horizontal ambos lados)

  • Vertical space (vertical arriba y abajo)

  • Si deseamos que solamente exista margen en un lado: <img src=”...” style=”margin-right:15px;” />

• Los márgenes entre las imágenes y el texto (es decir, cuando hay texto alrededor de una imagen) deben establecerse en 15px.

Buenas prácticas: si se trata de imágenes grandes, debemos redimensionar el tamaño de las mismas antes de subirlas a LibGuides en una herramienta de edición de imágenes como Paint.NET, Gimp o Photoshop. No se recomienda ajustar el tamaño de imagen en el propio LibGuides para reducciones de más de un 10-15%. Asimismo, es recomendable borrar las dimensiones (píxeles) en el menú de opciones de imagen al insertarlas.

Otras recomendaciones:

• No es necesario ni recomendable modificar el tamaño de imagen. Si se modifica el tamaño original de la imagen estableciendo el tamaño en píxeles fijos, podría no adaptarse correctamente a la pantalla de los dispositivos móviles. Si se desea modificar el tamaño, es preferible emplear tamaños relativos, como porcentajes.
• Poner nombres descriptivos a los archivos
  • No recomendado: asd98yfbjHYWF.jpg
  • Recomendado: logo-citavi.jpg
• Atención a los derechos de la imagen y usos permitidos. Dar atribución al autor cuando sea necesario, incluso en licencias abiertas
• Opcional: emplear las etiquetas <figure> y <figcaption>
• Utilizar iconos Font Awesome cuando sea posible