Con el editor de bloques de WordPress, Gutenberg, la manera en que se añaden y alinean las imágenes incluidas en las entradas y páginas, cambia un poco respecto al editor clásico. Si todavía no estás familiarizado con el editor de bloques, aquí te explicamos todo lo que necesitas para aprender a dominar cómo insertar y alinear imágenes.
Insertar un bloque que contiene una imagen
Cuando estás escribiendo una entrada, si quieres insertar una imagen, el editor de bloques te permite que crees los siguientes tipos de bloque:
- Imagen,
- Galería,
- Medios y Texto,
- Fondo
Y antes de continuar, recuerda que ya te expliqué anteriormente las diferencias que hay entre el bloque de fondo y la imagen destacada.
Continuemos… Cuando quieres insertar cualquier tipo de bloque en WordPress, es tan fácil como hacer clic en el botón + que encuentras en la esquina izquierda superior del editor o justo debajo o encima de cualquier bloque y escoger el tipo de bloque que quieres insertar.
Alternativamente, otra forma muy rápida de añadir cualquier tipo de bloque consiste en usar los atajos que empiezan por / seguido de las letras del bloque que buscas. Simplemente, si empiezas a escribir /imag te saldrá rápidamente el bloque Imagen recomendado:
Dependiendo del tipo de bloque que hayas seleccionado (Imagen, Galería, Medios y Texto, y Fondo), te aparecerá uno de los bloques siguientes:
Como ves, en los cuatro tipos de bloques puedes subir una imagen de tu ordenador o seleccionar una imagen ya cargada de la biblioteca multimedia (o múltiples imágenes, en caso del bloque Galería). También puedes, sólo en el caso del bloque Imagen, insertar una imagen proporcionando la URL del archivo de imagen, lo cual es útil cuando quieres añadir gifs o imágenes procedentes de otra web.
Por ejemplo, en el caso del bloque Imagen, si haces clic en el botón Subir, subes la imagen que quieras de tu ordenador, introduces su leyenda y la seleccionas, esta se insertará en el bloque imagen que has creado en el editor de bloques.
En el caso de los bloques de tipo Medios y Texto y en el de tipo Fondo el proceso es exactamente el mismo. Y en el caso del bloque de tipo Galería, puedes seleccionar un conjunto de imágenes a la vez y a continuación cambiar el orden en que se muestren.
Alinear las imágenes
Veamos ahora, para los cuatro bloques anteriores, las distintas alternativas de alineación de las que disponemos.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
Alineación de imagen de los bloques Imagen y Fondo
Cuando insertamos una imagen en un bloque de tipo Imagen o un bloque de tipo Fondo, tenemos 5 opciones de alineación que se muestran en la barra de herramientas del bloque:
- Alineación izquierda,
- Alineación centrada,
- Alineación derecha,
- Ancho amplio, y
- Ancho completo
Si tu imagen es más pequeña que el ancho del texto, la alineación a la izquierda o derecha mostrará la imagen con texto al lado. Pero la alineación centrada, como es el caso de la imagen anterior, no añade ningún texto a sus lados.
La alineación ancho amplio, hará que la imagen ocupe todo el ancho del texto, tal y como te muestro en la siguiente imagen:
Y el Ancho completo, muestra la imagen ocupando todo el ancho de la ventana. A continuación puedes ver la imagen en un bloque de tipo Fondo.
Bloque Fondo ocupando el ancho completo.
Este tipo de alineación es muy útil para crear separaciones entre secciones de páginas, tal y cómo puedes encontrar en muchas de las páginas de esta web.
Alineación de imagen del bloque Medios y Texto
El bloque de tipo Medios y Texto básicamente es un bloque que lo que hace es añadir un área con dos columnas: una para la imagen y la otra para el texto. En la barra de herramientas del bloque tienes la opción de indicar, por un lado, si quieres que el ancho de todo el bloque ocupe el ancho del texto, el ancho amplio o el completo. Y por otro lado, si quieres que la imagen se muestre a la derecha o izquierda del texto.
A continuación te muestro cómo queda la imagen a la izquierda con una alineación del bloque de ancho amplio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat est hendrerit neque blandit semper. Mauris vel lectus nec urna sollicitudin sodales. Aenean at imperdiet risus. Etiam a enim justo. Cras mollis velit placerat laoreet cursus. Nulla accumsan quis eros sed rhoncus. Etiam ornare rhoncus finibus. Sed mollis lorem justo, eget maximus nunc tempus id. Proin a lacus urna. Nullam sed arcu quis justo tempus sodales. Morbi odio quam, ultricies ornare bibendum nec, laoreet vel neque. Vestibulum non dolor mattis, ultricies magna vitae, accumsan neque. Mauris leo lacus, tempus vel porttitor at, efficitur quis erat. Nunc quis porttitor odio, in ornare mi. Duis nec purus pellentesque, egestas quam at, bibendum augue. Donec dapibus pharetra lectus.
Alineación de imágenes de Galerías
En el caso de insertar una galería de imágenes, las opciones de alineación del bloque son las mismas que en el caso de tratarse de un bloque tipo Imagen o tipo Fondo. Es decir cuando hablamos de la alineación de una galería es como si consideraras toda la galería completa una única imagen y decides cómo la quieres alinear.
La alineación de imágenes entre ellas la determinas indicando, en las propiedades del bloque, el número de columnas que quieres que contenga la galería. Automáticamente, el editor de bloques alineará las imágenes para ajustarse a lo indicado.
En la imagen anterior puedes ver cómo quedan alineadas las imágenes de una galería que contiene 7 imágenes, si las quiero mostrar en 3 columnas.
Y a continuación te muestro como quedaría la misma galería si indico que las quiero mostrar en 4 columnas y que ocupe el ancho completo de la entrada:
Como puedes ver, los resultados de cómo se alinean las imágenes en la galería son muy buenos pero si necesitas realizar ajustes más complejos de alineación, deberás considerar instalarte algún plugin de galerías de imágenes, como por ejemplo, EnviraGallery.
Y hasta aquí ya has visto que insertar imágenes y alinearlas es muy fácil con el editor de bloques y los resultados quedan fantásticos.
Imagen destacada de Markus Spiske en Unsplash.
Deja una respuesta