IMÁGENES Y VIDEO | ¿Cómo se añaden, se gestionan y/o se eliminan?

Cuando trabajas en tu blog, emparejar la información con imágenes y vídeos ayuda a tu audiencia a entender las palabras escritas rápidamente y sin ninguna ambigüedad o confusión. Después de todo, «una imagen vale más que mil palabras».

Un usuario puede digerir fácil y rápidamente una entrada de blog relativamente aburrida cuando se combina con imágenes atractivas para hacerla más interesante.

¿Qué es la biblioteca de medios de WordPress?

Como su nombre indica, la biblioteca de medios de WordPress es un conjunto de todos los archivos audiovisuales que los usuarios suben al sitio web para incorporarlos en sus páginas o entradas.

De forma predeterminada, puedes cargar archivos multimedia de todo tipo: imágenes, vídeos, audios, PDF, documentos de Word, hojas de cálculo de Excel, presentaciones de PowerPoint y hasta archivos de Photoshop.

¿Qué importancia tienen los archivos multimedia?

Añadir archivos multimedia a tu contenido no sólo lo hace más accesible y atractivo, sino que también ayuda en el posicionamiento de los motores de búsqueda. Google y otros motores de búsqueda te darán puntos extra por tener artículos con contenido multimedia.

Cómo acceder a la biblioteca de medios

Más adelante hablaremos sobre todas las posibilidades de tus archivos, incluyendo cómo arrastrar y soltar archivos para añadirlos a la biblioteca multimedia, la edición de imágenes, la adición de texto alternativo y la creación de una galería.

El primer paso es acceder a la sección de archivos multimedia en la pantalla del panel de control de WordPress. En la columna izquierda haremos click en Medios > Biblioteca, tal y como muestro en la imagen.

acceder a biblioteca medios

Cómo gestionar y/o eliminar imágenes o videos

En la pantalla de medios, verás un menú con algunas opciones básicas.

opciones biblioteca medios
  1. Estos dos iconos te permiten decidir si quieres ver los archivos de medios en una lista o en una vista de cuadrícula (por defecto se ven en cuadrícula).
  2. Estos menús desplegables te permiten filtrar los archivos de la biblioteca multimedia por tipo (imágenes, videos, audios, etc.) u ordenados por las fechas en que se añadieron a la biblioiteca.
  3. El botón «Selección en lotes» te permite borrar archivos y además seleccionar varios archivos a la vez. Esto es especialmente práctico cuando quieras hacer limpieza de tu biblioteca y necesites eliminar unos cuantos archivos a la vez. Haz clic en el botón, selecciona los archivos que quieras eliminar y luego haz clic en el botón «Eliminar permanentemente».
  4. Una barra de búsqueda para buscar archivos específicos por nombre.

¿Cómo subir una imagen o video a la biblioteca de medios?

Sigue los siguientes pasos para subir archivos multimedia:

arrastrar archivos a la biblioteca
  1. Pasa el ratón por encima del elemento de menú «Medios» en la columna izquierda y haz clic en «Añadir Nuevo» (Medios > Añadir Nuevo) o haz clic en el botón «Añadir Nuevo» en la parte superior de la pantalla del panel de control y selecciona «Medios».
  2. Ahora arrastra y suelta los archivos multimedia dentro del área de líneas punteadas marcada como «Suelta los archivos para subirlos» (en la imagen lo muestro con una flecha). Tu archivo se subirá al instante.
  3. Alternativamente, puedes hacer clic en el botón «Seleccionar archivos». Aparecerá un cuadro de diálogo. Examina los archivos de tu ordenador para cargarlos y haz clic en abrir. Una vez seleccionado, verás el archivo debajo de la sección de carga de archivos con el resto de tus archivos.

Importante: si lo que quieres es subir una imagen nueva a tu entrada o página, hay una forma mucho más ágil y directa, te la explico a continuación.

¿Cómo añadir imágenes en tu entrada o página?

añadir imagen en artículo wordpress

Tenemos tres opciones para añadir una imagen. O bien hacerlo desde el botón de «subir» y subir la imagen que tengamos en nuestros archivos. Desde «biblioteca de medios», es decir, de imágenes que ya hayamos subido previamente a la web, aquí podremos escogerla. O bien insertarla desde una URL, opción no recomendable (ya que si dicha URL desaparece la imagen también se borrará).

Una vez incrustada la imagen veremos las siguientes opciones:

opciones para imagen
  1. Haciendo click sobre el primer símbolo nos dará opciones para convertirlo en otro tipo de bloque (título, lista, etc.). A su derecha encontraremos un icono con flechas apuntando hacia arriba y hacia abajo. Esto nos permitirá desplazar el elemento una posición más arriba o más abajo. Nos sirve para reordenar nuestra entrada.
  2. Alineación. Podremos alinear la imagen a la izquierda, al centro o a la derecha de la columna. ¡Ojo! Cuando alinees la imagen a la izquierda o a la derecha, colocará el texto en el espacio sobrante, es decir, puede afectar a la visualización del espacio. También tendrás las opciones de «ancho amplio» (será un poco más ancho que el ancho total de la columna) o «ancho completo» (cubrirá todo el ancho de la pantalla). Es recomendable no usar estas dos últimas opciones a no ser que tengas muy claro lo que quieres.
  3. Hipervínculo. Podremos vincular la imagen a otra página web o bien vincularla al archivo original de la imagen. Esta última opción es práctica si por cuestiones de espacio tu imagen es demasiado grande y se queda pequeña al ponerla en la web. En ese caso cuando el usuario pulse en la imagen se abrirá la imagen en tamaño completo en otra pestaña del navegador.
  4. Cortar. En caso de que queramos retocar rapidamente la imagen, esta opción nos permite cortar la imagen en el propio editor de bloques.
  5. Reemplazar. Como el nombre indica, te permitirá cambiar la imagen por otra. Haciendo click nos mostrará dos opciones para ello: o bien mediante la biblioteca de medios o bien subiéndola nosotros mismos.
  6. Opciones más avanzadas tales como código integrado, subindice, tachado. Raramente se utilizan.
  7. Pie de foto. Nos permitirá añadir un pie de foto tan solo haciendo click encima y escribiendo.

Imágenes | Ajustes de la barra derecha

ajustes de la imagen en barra derecha
  1. Estilos. Con esta opción podrás redondear los contornos de tus imagen. En «estilos por defecto» podrás establecer esta opción como la predefinida para todas las imágenes que subas.
  2. Texto alt (texto alternativo). Este apartado es sumamente importante para posicionar Google. Deberías añadir una pequeña descripción de la imagen o lo que representa.
  3. Tamaño de la imagen. Aquí podrás escoger el tamaño de la imagen, por si la imagen es demasiado grande o demasiado pequeña. Tiene tres opciones predeterminadas para que no tengas que modificar el tamaño de forma manual
  4. Dimensiones de la imagen. Una opción más completa que te permite tener más control sobre el tamaño de la imagen.

Opción alternativa: Medios y Texto

Si lo que buscas es que el texto y la imagen estén uno junto al otro como en el ejemplo que he puesto aquí a continuación, puedes usar alternativamente el bloque ‘Medios y Texto’. Lo podrás encontrar facilmente pulsando en el icono «+» de la barra superior. Este bloque te ayuda a envolver el texto alrededor de la imagen en WordPress.

ejemplo del bloque texto y medios
  1. Las mismas opciones que ya expliqué en el bloque de párrafo.
  2. Alineación imagen / texto. Con estos dos botones podrás alinear la imagen a la izquierda o a la derecha del texto
  3. Alineación vertical. Las tres opciones de alineación vertical nos permitirán alinear el texto o arriba, o en el centro o en el lado inferior de la columna.
  4. Las mismas opciones que ya expliqué más arriba.

Medios y texto | Ajustes de la barra derecha

ajustes de medios y texto en wordpress
  1. Ajustes de color. Al igual que con las listas, aquí también tendrás la opción de añadir un fondo degradado.
  2. Apilar en móvil. Activando esta opción convertiremos las columnas en una sola para la versión móvil. Esta opción es la recomendada para evitar problemas de lectura en dispositivos pequeños.
  3. Recortar imagen para rellenar toda la columna. En caso de que la imagen quede demasiado descompensada con la columna, podrás hacer que encaje de forma automática. Además con el «selector del punto focal» podrás arrastrar el mouse por la imagen para definir su centro (en caso de que después de cortarla se haya descentrado)
  4. Las opciones de «texto alt» y «tamaño de la imagen» que ya expliqué en el bloque de «Imagen».

¿Cómo cambiar y/o sustituir imágenes en tu web?

Dependiendo de la forma que haya tenido que maquetar tu página es posible que la imagen exista como un «bloque de imagen» o como el «fondo de un bloque». No te preocupes, te explicaré ambos métodos. Tan solo decirte que en ocasiones el primer método te funcionara, y en ocasiones el segundo método. Te explico ambas opciones a continuación, así que si una no te funciona prueba la otra (también te lo explico en el video).

Método 1: botón REEMPLAZAR en imagen

  1. Hacemos click en la propia imagen que queramos cambiar.
  2. Prestamos atención a las opciones que nos saldrán encima de la imagen. Tenemos que buscar una opción que diga «reemplazar» o «replace». Si esta opción no aparece pasa a la Posibilidad 2.
  3. Hacemos click en reemplazar (o «replace») y nos aparecerán dos opciones:
    • Abrir Biblioteca de Medios (o «Open Media Library»): si queremos reemplazar la imagen con alguna que ya hayamos subido previamente a la web
    • Subir (o upload): para subir imágenes nuevas que no hayamos subido previamente en la web

Método 2: Cambiar FONDO

  1. Hacemos click en la imagen que queramos cambiar.
  2. Buscamos en la columna derecha una sección llamada «Fondos» (o «Backgrounds)
  3. Dentro de la sección «Fondos» veremos la sección «URL imagen» (o Image URL). Hacemos click en Seleccionar (o Browse)
  4. Nos abrirá automáticamente la galería de imágenes para nosotros poder substituirla por la que queramos

¿Cómo añadir videos a tu entrada o página?

opciones de incrustación de videos en wordpress

A la hora de añadir un video te desaconsejo subir un video mediante el bloque «Video». Esa opción te obliga a subir el video directamente en la web y eso afectará seriamente la velocidad de tu web y puede incluso bloquear el servidor.

La opción recomendable es subirlo a una plataforma tipo youtube o similares y luego incrustarlo automaticamente desde wordpress. ¿Cómo? pues muy fácil. en la imagen muestro las opciones que encontrarás en el listado de bloques, en el apartado de «incrustados». Usa el bloque que coincida con la plataforma donde tengas subido el video y ya.

Si lo prefieres, también puedes simplemente copiar y pegar la URL del vídeo en un bloque de párrafo, y WordPress lo convertirá automáticamente en un bloque de incrustación de vídeo.

Videos | Ajustes de la barra derecha

ajustes para video
  1. Ajustes de medios. Por defecto vendrá con esta opción activada. Lo dejamos así ya que nos ayudará a mantener una correcta proporción del video en dispositivos pequeños.

¿No encontraste solución?

Prueba con otro tutorial o contáctame para que te ayude