Añadir imágenes en los artículos

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

En el video anterior veíamos como añadir una imagen destacada nuestro artículo y la razón por la que es importante hacerlo.

En este video te mostrare la forma correcta de añadir una imagen dentro del contenido de WordPress.

Así que vamos a entrar en la edición del artículo dando clic en editar entrada desde la barra de herramientas.

Muy bien, la primera imagen que le vamos a añadir a este artículo será justo después del primer título que tenemos aquí.

Lo primero que debemos hacer es añadir espacio en la zona que deseas insertar tu imagen.

Y ahora damos clic en el botón de añadir objeto.

Esto nos lleva a la vista de los elementos dentro de la biblioteca multimedia.

En este caso ya he subido previamente algunas imágenes, no vamos a ver como se suben las imágenes debido a que ya lo hemos realizado en el video anterior.

Vamos a seleccionar esta imagen para añadirla en nuestro artículo.

Al seleccionarla podrás ver todas las opciones de la imagen.

Como puedes ver, esta imagen no tiene aún un texto alternativo, así que debemos añadirle uno, ya que no podemos ninguna imagen sin texto alternativo.

A diferencia de cuándo añadimos la imagen destacada en el video anterior, ahora tenemos más opciones, contamos con los ajustes de visualización en la parte de abajo.

Desde aquí podemos en primer lugar indicar la alineación que deseamos para la imagen, podemos colocarla hacia la izquierda, centrarla, derecha o ninguna, no te recomiendo dejarlo en ninguna, deberías siempre definir una alineación según tus necesidades, en este caso le indicaremos que la deseamos centrada.

También podemos añadirle un link a la imagen.

El link puede dirigirse hacia el archivo de la imagen, es decir que cuando den clic sobre la imagen podrán ver el archivo de la imagen directamente.

Si lo colocamos en página de adjuntos, entonces WordPress mostrará la página que contiene a esta imagen, ya que el administrador multimedia le genera una página especial a cada archivo que subimos, vamos a hablar más sobre ese tema en el próximo video.

O podemos también añadir nuestra propia URL desde la última opción de URL personalizada.

Con esta opción yo podría indicarle a la imagen que al dar clic entre en lievanosan.com por ejemplo.

Pero en este caso no vamos a enlazar la imagen, así que lo dejamos en ninguna.

Luego podemos seleccionar el tamaño en el que deseamos mostrar la imagen.

Cuándo tu subes una imagen, WordPress automáticamente crea otros tamaños para tu imagen, en este caso el tamaño real de la imagen es de 640 por 350 pixeles, y WordPress me ha generado los tamaños de miniatura de 150 por 150 pixeles y el tamaño medio de 300 por 164 pixeles.

Esto es de mucha utilidad, ya que nos permite minimizar el tamaño de carga de nuestras imágenes y utilizar el tamaño adecuado en nuestros artículos.

En este caso le indicare que deseo utilizar el tamaño medio.

Muy bien, una vez tenemos todo configurado, damos clic en insertar en la entrada.

Y como puedes ver la imagen se añade correctamente en nuestro artículo.

Pero creo que nos hemos equivocado, y la versión mediana de esta imagen es en realidad muy pequeña como para encontrarse centrada, no sé muy bien.

Por suerte podemos editar las imágenes que añadimos a WordPress muy fácilmente, si damos clic sobre la imagen.

Podrás ver que podemos modificar su alineación fácilmente desde estos botones.

De modo que si pasamos la imagen hacia la izquierda por ejemplo, el texto la rodea y ahora se ve mejor, pero en realidad quiero dejarla centrada y que abarque todo el ancho disponibles.

Así que para editar el tamaño y otras opciones de la imagen, debemos dar clic sobre el ícono del lapíz.

Desde esta ventana podemos editar las opciones de la imagen que hemos añadido.

Podemos modificar o añadir una leyenda, modificar el texto alternativo.

Más abajo tenemos las opciones de alineación, tamaño y el link.

He incluso tenemos algunas opciones avanzadas las cuáles no vamos a ver en este video curso.

Lo que voy a hacer es modificar su tamaño, así que voy a utilizar el tamaño normal de la imagen.

Como puedes ver al lado derecho tenemos un pre visualizador, en él se observan los cambios que hacemos.

Y también nos permite editar la imagen e incluso remplazarla.

Vamos a editar esta imagen.

Este es el editor de imágenes de WordPress, desde aquí podemos modificar algunos aspectos de nuestra imagen.

Por ejemplo, podemos rotarla con estos botones.

Puedes girarla de arriba hacia abajo.

O puedes voltearla también.

Y con estos botones podemos deshacer o re-hacer cualquier cambio realizado.

Desde aquí también puedes modificar sus dimensiones. Es importante que tomes en cuenta que la únicamente podemos hacer la imagen más pequeña, no puedes hacerla más grande.

Si haces tu imagen mas grande, perderá calidad y se verá mal, de hecho si intentas hacerla más grande WordPress de lo advierte como puedes ver.

Y también podríamos recortar la imagen.

Para recortar la imagen únicamente debemos arrastrar el cursor sobre la zona que deseamos recortar dentro de la imagen.

Pero antes de hacerlo, puedes ver que aquí tenemos la opción de relación de aspecto, desde aquí podemos definir la relación que deseamos conservar en nuestro recorte.

Por ejemplo, si deseas crear un cuadrado entonces la relación de aspecto es de 1 a 1

Ahora cuándo vamos a la imagen, debes sostener shift y sombrear la parte que deseas recortar.

Como puedes ver mientras vamos seleccionando la relación de aspecto se mantiene.

Y no importando si hacemos la selección desde los lados, la relación siempre se mantiene.

Si dejas de presionar shift, entonces la relación de aspecto se rompre y tienes libertad de hacer tu selección tan grande como lo necesites.

En mi caso, voy a recortar esta imagen, voy a dejar visible esta zona. Para aplicar el recorte voy a dar clic en este ícono.

Y como puedes ver la imagen queda recortada. Recuerda que aún no hemos aplicado los cambios y que si deseas deshacer el recorte puedes hacerlo utilizando este botón.

Antes de aplicar los cambios debemos indicar en los tamaños de imágenes que deseamos afectar, en mi caso deseo afectar a todos los tamaños así que lo dejo en todos los tamaños de imagen, si te arrepientes de los cambios puedes dar clic en volver, pero si deseas aplicarlos damos clic en guardar.

Y como puedes ver nuestra imagen ahora se encuentra recortada. Muy bien para mostrar los cambios en el artículo damos clic en actualizar.

Muy bien, ahora tenemos la nueva imagen dentro de nuestro artículo, vamos a actualizar el artículo.

Y ahora veamos que tal luce desde el sitio web.

Genial, tenemos la imagen exactamente como necesitábamos mostrarla en el artículo.

Como puedes ver añadir una imagen en WordPress es muy fácil, y también tenemos opciones adicionales que te permiten modificar la imagen para que se vea como tú lo deseas.

En el siguiente video veremos a donde van todas estas imágenes, y como podemos administrarlas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image