Tutorial biblioteca de medios de WordPress

Vamos a repasar en esta entrada todo lo que debes saber para gestionar los elementos multimedia en WordPress.

Al final de misma, como en otros tutoriales, encontrarás un vídeo donde podrás ver de forma visual todo lo explicado.

¿Qué son los medios de WordPress?

En WordPress se entiende por elemento multimedia, que se almacena en la biblioteca de medios, cualquier archivo que se carga en la web o que se puede descargar desde un enlace.

En la mayoría de los casos estos medios se refieren a las imágenes que se cargarán en páginas, entradas, plugins y widgets.

Además de las imágenes, podremos tener otros elementos multimedia que se muestren en la web como vídeos o archivos de audio.

También podremos tener otros medios no visibles de forma directa en la web, pero que se podrán descargar o abrir desde un enlace, como un archivo pdf, un zip o un documento de Word.

Gestionar la biblioteca de medios de WordPress

Todos estos elementos se pueden gestionar desde la biblioteca de medios de WordPress. Para acceder a ella hay que ir en la administración de WordPress a Medios > Biblioteca.

Nos encontraremos una página donde se mostrarán todos los elementos multimedia que hayamos agregado en nuestro WordPress hasta ese momento: imágenes, vídeos, archivos de audio, otros archivos, etc.

Para las imágenes veremos una vista en miniatura, mientras que para el resto de elementos simplemente se mostrará un icono relacionado con el tipo de archivo.

En la parte superior de la biblioteca de medios veremos una barra con la que podremos aplicar varios filtros a los elementos que aquí se muestran.

En primer lugar veremos 2 iconos con los que podremos cambiar la vista en la que muestra el contenido.

Por defecto veremos la vista de cuadrícula, pero pulsando sobre el primero de los iconos cambiaremos a la vista de lista.

En esta vista veremos información adicional para cada medio añadido, como el usuario que lo ha subido, el elemento de la web (página, entrada, widget, etc.) con el que está asociado, si es que tiene alguno, los comentarios asociados y la fecha en la que se subió.

En la columna Subido a, que indica el elemento de la web donde se ha añadido el elemento multimedia, veremos también enlaces para adjuntar el elemento o separarlo, aunque normalmente esto no es necesario hacerlo, ya que se realiza de forma automática. Por ejemplo, cuando asociamos una imagen a una entrada.

Colocando el cursor de ratón sobre cualquier elemento veremos que se muestran enlaces con los que podremos editarlo, borrarlo permanentemente o ver una vista previa.

Continuando con el repaso de la barra superior de filtros, pulsando sobre el segundo icono volveremos a la vista de cuadrícula.

A su derecha veremos un lista desplegable donde podremos filtrar por el tipo de elemento multimedia u otras propiedades: imágenes, audio, vídeo, elementos sin adjuntar o elementos subidos por el usuario con el que estemos conectados.

A continuación veremos un nuevo listado con el que podremos filtrar los elementos que se muestran por mes y año de subida.

Con el botón Selección múltiple se entrará en un modo de edición con el que podremos seleccionar varios elementos para su borrado.

Para ello, una vez pulsado el botón anterior simplemente tendremos que pulsar sobre los elementos a borrar y, una vez hecho, pulsar en el botón Borrar permanentemente.

Por último, dispondremos de un buscador donde podremos localizar los elementos multimedia por su título.

Editar elementos multimedia en WordPress

Para editar un elemento multimedia simplemente tendremos que pulsar sobre él, si estamos en la vista de cuadrícula, o en el enlace Editar, si estamos en la vista de lista.

Dependiendo del tipo de medio editado, los parámetros a configurar pueden variar.

Editar imágenes

Cuando editamos una imagen nos encontraremos con una página donde veremos una vista previa de la misma y varios parámetros a configurar.

Vamos a repasar estos parámetros que se muestran en la parte derecha.

• Texto alternativo: se corresponde con la etiqueta alt de la imagen, y sería el texto que se muestra cuando colocamos el cursor del ratón sobre una imagen. Es importarte añadir este dato, ya que se tendrá en cuenta para temas de SEO (posicionamiento de la web en buscadores).
• Título: por defecto mostrará el nombre que tenía la imagen subida. Se puede cambiar, aunque no se usará en la carga de la imagen.
• Leyenda: este texto se mostrará en el pie de la imagen cuando la añadamos en una página o entrada.
• Descripción: un texto donde podemos añadir información sobre la imagen. En ocasiones viene cargado con el propio archivo. Se puede dejar vacío, ya que tampoco se usa al mostrarla en WordPress.

Tanto el valor del texto alternativo como la leyenda los podremos cambiar en el momento de añadir la imagen en una página o entrada, como revisaremos más adelante.

Debajo veremos el usuario que ha subido la imagen y el enlace con el que cargaría la misma, por si queremos usarlo para añadirla de forma manual.

Por último, tenemos 3 enlaces:

• Ver página de adjuntos: muestra la vista de la página que se carga cuando enlazamos una imagen con su elemento multimedia.
• Editar más detalles: carga una vista parecida a la vemos en esta página, aunque mostrando algo más de información, como el formato de la imagen, el espacio en disco que ocupa y sus dimensiones.
• Borrar permanentemente: elimina la imagen.

Debajo de la imagen veremos un botón Editar imagen con el que podremos cambiar su aspecto.

En la nueva página que se carga dispondremos de un editor básico con el que podremos aplicar cambios en el diseño de la imagen.

En la parte superior izquierda veremos una serie de iconos. De izquierda a derecha realizan las siguientes acciones:

• Recorta la imagen. Pulsando sobre él la imagen entrará en modo de recorte, donde podremos seleccionar la parte de la imagen que queremos mantener. Pulsando una segunda vez se produce el recortado dejando la imagen resultante.
• Rota la imagen 90º a la izquierda.
• Rota la imagen 90º a la derecha.
• Voltea la imagen verticalmente.
• Voltea la imagen horizontalmente, es decir, realiza un efecto espejo.

En la parte derecha veremos varias opciones más de transformación de la imagen.

Por una parte podremos escalar la imagen para reducir o aumentar su tamaño (normalmente lo primero).

Modificando uno de los valores, ancho o alto, veremos que el otro valor se ajusta de forma automática para mantener la relación de aspecto. Finalmente se pulsa en el botón Escala para aplicar los cambios.

En el apartado Recortar imagen dispondremos de más opciones para recortar la imagen a nuestro gusto.

Por una parte podremos elegir la relación de aspecto que tendrá el área de recorte. Por ejemplo, si ponemos una relación 1:1 el área de recorte será cuadrada.

Para recortar simplemente tendremos que pulsar sobre la imagen, y sin soltar el botón de ratón, arrastrar el cursor para marcar el área a recortar.

En los campos Selección veremos el ancho y alto de la nueva imagen resultante.

Por último, tenemos varios selectores donde podremos elegir para que imágenes queremos aplicar los cambios: todos los tamaños, solo la miniatura, o todas las imágenes excepto la minuatura.

Recuerda que cuando se sube una imagen en WordPress se generan varias versiones de la misma en diversos tamaños, que serán utilizadas en función de dónde se carguen.

Para tener más información sobre esto te recomiendo revisar nuestro tutorial sobre los ajustes de medios de WordPress.

Una vez que hayamos acabado de aplicar los cambios en la imagen tendremos que pulsar en el botón Guardar, o en el botón Cancelar si queremos dejar la imagen como estaba.

Editar audio

La edición de archivos de audio (por ejemplo, un mp3), reduce el número de opciones de configuración disponibles.

En la parte izquierda podremos ver un reproductor con el que se podrá escuchar el archivo de sonido.

En la parte derecha podremos añadir información adicional sobre el archivo: título, autor, álbum, leyenda y descripción.

Todos estos parámetros son opcionales y habrá casos en los que tenga sentido rellenar algunos de ellos. En todo caso, no se mostrarán en el reproductor de audio, excepto la leyenda, que se mostrará en el pie.

El resto de opciones que se muestran debajo son similares a las que habíamos visto en la edición de imágenes.

Editar vídeo

En este caso, al editar un vídeo veremos en la parte izquierda un reproductor con el que podremos ver el archivo de vídeo subido (por ejemplo, un mp4) y en la parte derecha diversos aspectos informativos del mismo.

Podremos configurar opcionalmente su título, leyenda y descripción, aunque el único dato que se mostrará al insertarlo en una página o entrada será la leyenda.

Es conveniente indicar el título del vídeo para localizar más fácilmente el vídeo, ya que el reproductor no mostrará una vista previa en forma de imágenes.

Editar otro tipo de archivos

Además de subir imágenes, audios y vídeos en WordPress también podremos subir otro tipo de archivos, de forma que luego podamos poner en las páginas enlaces para su descarga.

Como ejemplo de este tipo de archivos podemos subir documentos pdf o de Word, o archivos comprimidos en formato zip.

No conviene subir archivos con extensiones potencialmente peligrosas como .exe, ya que podrían ser bloqueados por el propio WordPress, por el navegador o por otras herramientas de seguridad. Para estos casos es mejor comprimir previamente el archivo en un zip.

Al editar un archivo de este tipo desde la biblioteca de medios podremos configurar el título, la leyenda y la descripción, aunque solo los 2 primeros se mostrarán en la web.

El resto de enlaces para editar, ver y borrar funcionan igual que para el resto de elementos multimedia.

Añadir nuevos elementos multimedia a WordPress

Para subir nuevos medios (imágenes, vídeos, etc.) podremos hacerlo desde Medios > Biblioteca pulsando en el botón Añadir nuevo o directamente desde Medios > Añadir nuevo.

Veremos que en la página se carga un área donde podremos arrastrar los elementos multimedia que queremos subir o, si lo preferimos, se puede utilizar el botón Seleccionar archivos para poder elegir los archivos a cargar.

Con esta opción de arrastrar los archivos podremos añadir de una sola vez varios archivos desde la carpeta de nuestro equipo hasta el WordPress. Una vez hecho veremos que debajo comienza el proceso de subida.

Al finalizar veremos los archivos subidos y un enlace para cada editar cada uno de ellos.

Insertar contenidos multimedia en páginas y entradas de WordPress

Una vez que hemos repasado cómo subir y gestionar los medios en WordPress vamos a ver cómo podemos incluir estos contenidos dentro de las páginas y entradas de WordPress.

Para ello utilizaremos el editor Gutenberg que incluye WordPress para la edición de los artículos. Si no estás familiarizado con su uso te recomiendo revisar nuestro tutorial sobre el manejo del editor Gutenberg.

Para cada tipo de elemento multimedia dispondremos de un bloque para su inserción en el contenido: Imagen, Audio, Vídeo y Archivo. Todos ellos se encuentra en el grupo Bloques comunes.

Insertar imágenes

Una vez añadido el bloque Imagen al contenido se mostrará una caja donde podremos seleccionar la imagen de la biblioteca de medios, subir la nueva imagen en ese momento o insertar a través de una url externa.

Como puedes ver, tanto para las imágenes como para otros archivos multimedia disponemos de la opción de realizar la subida en el momento en el que los vayamos a utilizar. Este uso es muy habitual.

Una vez seleccionada o subida la imagen podremos configurar la forma en la que se mostrará.

Encima de la imagen disponemos de una serie de iconos con los que podremos cambiar el tipo de bloque, alinearla o cambiarla por otra.

Otros tipos de bloque compatibles con las imágenes serían Archivo, Galería, Fondo y Medios y texto.

Debajo de la imagen podremos añadir la leyenda, texto que se mostrará en el frontal de la web debajo de la imagen con un estilo diferente al resto de textos de la página. En el caso de que hayamos configurado el valor Leyenda en el momento de subir la imagen ya se cargará aquí este texto, que podremos cambiar si queremos.

En la columna derecha podremos configurar otros parámetro como el texto alternativo (texto alt), que de nuevo cargará el valor que hayamos puesto en la imagen y que podremos personalizar para cada caso.

Debajo podremos personalizar el tamaño de la imagen que queremos cargar de entre las generadas por WordPress o personalizarlo a nuestro gusto.

Por último podremos elegir si la imagen irá enlazada y, en caso afirmativo, contra que lo hará.

No te recomiendo enlazar la imagen con el elemento multimedia, ya que esto puede llegar a ser perjudicial para temas de SEO.

Insertar audio

Una vez seleccionado el bloque Audio se mostrará una caja similar a la de las imágenes para seleccionar el elemento multimedia a cargar, en este caso un archivo de audio como, por ejemplo, un mp3.

Cuando hayamos seleccionado el archivo veremos que ya se muestra un reproductor para reproducir el archivo de sonido.

Encima del reproductor veremos iconos con los que podremos cambiar el bloque asociado con el archivo, alinear el reproductor o cambiar el archivo subido.

El único bloque compatible con el de audio será el de tipo Archivo.

Debajo podremos añadir una leyenda, texto que se mostrará en el frontal de la web debajo del reproductor.

En la parte derecha veremos parámetros que podremos activar para iniciar la reproducción de forma automática, repetir la canción en bucle o realizar una precarga. Esto último no suele ser necesario.

Insertar vídeo

Para agregar un vídeo seleccionamos el bloque Vídeo. Se carga una caja similar a las anterior para seleccionar el vídeo o subirlo, que deberá tener un formato compatible como mp4 o avi.

Se cargar el reproductor del vídeo. Encima veremos opciones similares a las anteriores para cambiar el tipo de bloque, alinear el vídeo o cambiarlo por otro.

Otros tipos de bloque compatibles con archivos de vídeo serían los de Archivo, Fondo y Medios y texto.

También podremos añadir el texto de leyenda que se cargará en el pie del reproductor del vídeo.

En la columna derecha dispondremos de parámetros adicionales de configuración: reproducción automática, repetir el vídeo en bucle, silenciar por defecto el vídeo y mostrar los controles de reproducción. También podremos activar una precarga del mismo.

Para mostrar vídeos en la web no es recomendable subir el archivo a la biblioteca de medios y reproducirlo desde la propia web.

Además del espacio en disco que puedan ocupar estos vídeos, su reproducción provocará un alto consumo de ancho de banda, lo que puede llegar a ralentizar la carga de la web.

Es mucho mejor opción utilizar servicios externos como YouTube o Vimeo para insertar los vídeos. De esta forma ni consumirás espacio en disco ni ancho de banda de tu cuenta de hosting.

El propio editor Gutenberg ya cuenta con bloques para añadir este tipo de contenidos externos.

Insertar archivos

El bloque Archivo está pensado para crear un enlace de descarga de un determinado archivo dentro de una página o entrada de WordPress.

Una vez insertado se carga la caja donde seleccionar o subir el archivo que queremos ofrecer para su descarga.

Después de seleccionar el archivo veremos que se muestra un texto con el título del archivo, que podemos haber configurado previamente desde la biblioteca de medio y un botón para descargar.

El texto se puede cambiar por el que queramos, ya que es editable. Encima veremos las ya típicas opciones para alinear este contenido o cambiar el archivo. En este caso no hay otros bloques compatibles con el de Archivo.

En la parte derecha podremos elegir si queremos enlazar el texto con un archivo multimedia o una página de adjuntos, y si el enlace se abrirá en una pestaña nueva.

También podremos decidir si queremos mostrar o no el botón de descarga.

Consejos finales

Aunque hemos visto como trabajar con distintos tipos de archivos multimedia en WordPress en la mayor parte de las ocasiones trabajaremos únicamente con imágenes.

Antes de empezar a subir imágenes es conveniente que tengamos una configuración correcta de los medios. Te recomiendo revisar el tutorial sobre los ajustes de Medios de nuestro blog donde se explica esto.

También es muy importante que las imágenes que subamos tengan el tamaño y la calidad adecuadas.

Por ejemplo, si vas a subir una imagen que se va a mostrar con un ancho máximo de 1000 píxeles, ese deberá ser el ancho máximo de la imagen original. Para imágenes que se muestran ocupando el 100% del ancho de la ventana del navegador no conviene pasarse con su tamaño, que no debería superar los 2000 píxeles, para evitar que ocupe demasiado espacio.

Puedes cambiar el tamaño de la imagen a subir con cualquier editor o herramienta online, o incluso con el editor de imágenes de WordPress que hemos visto antes.

Respecto a la calidad, este también será un aspecto que deberemos tener en cuenta a la hora de subir las imágenes.

Cuanta más calidad tenga una imagen más espacio en disco ocupará y, con ello, más tiempo tardará en cargar, lo que puede ser perjudicial tanto a nivel de experiencia de usuario como de SEO.

En muchos casos, una calidad excesiva no es apreciable a simple vista respecto a calidades inferiores, por lo que no tiene sentido usar calidades muy altas a menos que tengamos una página específica, como una empresa de servicios fotográficos.

La calidad de una imagen se puede ajustar con editores de pago como PhotoShop o Fireworks, o gratuitos como Gimp.

También existen herramientas online de ajuste de calidad como Kraken o plugins para WordPress que ajustan automáticamente la calidad, como Optimizador.io. Esta última opción puede ser la más cómoda.

Por último, sube solo a la biblioteca de medios los archivos que vayas a utilizar en tu web. De esta forma tendrás el contenido mejor organizado y no ocuparás espacio en disco innecesario de tu cuenta de hosting.

Os dejo con un vídeo donde repasamos de forma detallada todo lo visto y no vemos en futuros tutoriales.