Cómo usar los bloques de imágenes y galerías en el nuevo editor de WordPress

Gracias a WordPress 5.0 y el nuevo editor de bloques, añadir imágenes y galerías fotográficas a tu web nunca fue tan fácil. Aprende a sacarles partido. 😉

Ahora que ya sabes qué supone la llegada del nuevo editor a WordPress ha llegado el momento de que aproveches al 100% las novedades de cada bloque.

Y como no podía ser de otra forma en este blog, el primer turno es para los bloques de imagen y galería.

Shh… Que no se entere nadie… Pero esta es justo una de las mejoras más interesantes del nuevo editor.

Truco: Cuando quieras añadir un bloque escribe “/” seguido del comienzo del nombre que lo identifica (por ejemplo, “im” o “gal”) para que te aparezca la opción de introducirlo. Así te ahorras tener que navegar por todos lo bloque existentes. Yo utilizo este atajo constantemente.

Bloque de imagen

Este es el bloque nativo de WordPress que te permite añadir una imagen.

Cuando lo eliges te da 3 opciones para introducir una fotografía:

1. Subir desde tu ordenador.
2. Agregar desde la biblioteca de medios.
3. Insertar desde una URL.

Opciones en el bloque de imagen

Una vez introducida podrás ver la foto dentro del bloque y una barra con varias alternativas en forma de iconos en la barra superior.

Si tu tema ha sido actualizado y optimizado para el nuevo editor, además de las 3 alineaciones de imagen habituales:

• A la izquierda.
• Centrada.
• A la derecha.

También te aparecerán 2 nuevas:

• Ancho amplio.
• Ancho completo.

Este es le resultado al utilizar los dos nuevos diseños:

Además el bloque te permite introducir una leyenda debajo de la imagen e incluso formatearla (negrita, cursiva, tachado o incrustar un link).

En la barra lateral derecha aparecen los ajustes del bloque, que incluyen:

• Texto alternativo: es esencial completar este campo, tanto por motivos de SEO como de accesibilidad.
• Tamaño de la imagen:
  • Miniatura.
  • Medio.
  • Grande.
  • Tamaño completo.
• Enlazado:
  • Archivo de medios.
  • Página de adjuntos.
  • URL personalizada.

Por último, en “Avanzado” tienes la opción de agregar una clase CSS adicional, por si quieres modificar el aspecto final.

Bloque de galería

Este bloque cuenta casi con las mismas características que el de imágenes pero adaptado a la gestión de múltiples fotografías.

Así, para añadir imágenes al bloque de galería necesitas seguir los mismos pasos que antes con la única diferencia de que, en este caso, debes elegir varias fotografías a la vez en lugar de solo una.

¿Ya las tienes seleccionadas? Pues haz clic en el botón “Crea una nueva galería”.

Opciones del bloque de galería

Una de las características más interesantes es la posibilidad de seleccionar el número de columnas (de 1 a 8) y decidir si prefieres que se recorten las imágenes para que tengan la misma altura y se visualicen mejor distribuidas en la rejilla.

Dependiendo del número de columnas, ajusta el tamaño de la última para que ocupe el espacio que queda libre.

Como puedes comprobar en la animación anterior, los cambios de diseño se ven a tiempo real sin necesidad de que previsualices la página. Esto es una gran ventaja con respecto al editor clásico.

También puedes elegir el enlazado. Si utilizas un plugin de lightbox, lo cual te recomiendo, escoge la opción “Archivo de medios”.

Un detalle interesante es que tienes la posibilidad de seleccionar varios bloques de imagen y convertirlos a uno de galería y viceversa.

Este es otro ejemplo más de la versatilidad de los bloques del nuevo editor.

Añadir imágenes mediante drag and drop

Además de las opciones anteriores también puedes utilizar el “arrastrar y soltar” de toda la vida para agregar tus fotografías.

Si lo haces con una te creará un bloque de imagen. En cambio, si arrastras unas cuantas, se insertarán como bloque de galería.

Bloque de imagen de fondo

Este bloque te permite introducir una imagen con texto superpuesto.

Esta opción resulta ideal combinada con el formato de ancho completo para colocarla al inicio de un post o como sección que divida una página.

Opciones del bloque de imagen de fondo

Por defecto, la fotografía se muestra completa y baja al hacer scroll. Sin embargo, si quieres conseguir un efecto parallax puedes activar el botón de “Fondo fijo”.

También tienes la posibilidad de decidir el color y porcentaje de opacidad de la capa superpuesta y jugar con ambos parámetros para asegurarte de que el texto se visualiza correctamente.

Con respecto al texto puedes:

• Dar un formato básico (negrita, cursiva o tachado).
• Añadir un enlace.
• Elegir la alineación del texto (izquierda, centrada o derecha).

Ya ves que algo que antes requería conocimientos de código o instalar un constructor visual, ahora es muy fácil de conseguir de forma nativa con el nuevo editor de WordPress.

Más vale tarde que nunca. 😉

Bloques de contenido incrustado (Instagram, Flickr…)

Otra novedad del nuevo editor de WordPress son los bloques de contenido incrustado (o embeds) que permiten colocar el link de una fuente externa (por ejemplo, un vídeo de Youtube o fotografías de Instagram) y mostrarlo sin problemas. 

Lo mejor es que, con solo introducir el enlace, WordPress reconoce la fuente de forma automática y añade el bloque correspondiente de los más de 30 soportados.

Muchos de ellos te permiten añadir imágenes, cómo:

• Instagram.
• Flickr.
• Photobucket.
• Imgur.

De esta forma solo necesitas pegar la URL que tiene la fotografía dentro de la red social y WordPress reconocerá de forma automática la fuente y creará el bloque adecuado.

Opciones bloque de contenido incrustado

Aunque ofrece menos alternativas que los bloques anteriores, sí puedes elegir la alineación de la imagen y activar el modo responsive para que se vea bien en dispositivos móviles.

Conclusiones

La gestión de imágenes y galerías fotográficas ha mejorado de forma sustancial con la llegada del nuevo editor.

Por un lado, tienes 2 nuevas modalidades de ancho de imagen (amplio y completo) que te permiten jugar con el diseño y otorgar más presencia a tus fotografías.

Y por otro lado, el bloque nativo dedicado a crear galerías permite hacerlo de forma sencilla, poniéndotelo fácil para elegir el número de columnas y previsualizar los cambios a tiempo real.

Gracias a estas herramientas a partir de ahora muchos proyectos sencillos tendrán más que suficiente con el editor nativo, sin necesidad de instalar un plugin de galerías.

En mi caso sigo utilizando Meow Gallery (que ya se ha actualizado creando su propio bloque) porque ofrece más diseños y se sincroniza fantásticamente con mis librerías de Lightroom mediante WP/LR Sync (que uso a diario).

Pero he descubierto hace poco un plugin muy prometedor: Block Gallery, que te permite ver cómo queda la galería y pasar de un tipo a otro a tiempo real.

Estoy terminando de traducirlo al español. En cuanto lo tenga listo haré una review para que tú también tengas controlada esta joyita. 😉

Si quieres que repase el funcionamiento de algún otro bloque del nuevo editor cuéntamelo en los comentarios o escríbeme.

Soy todo oídos. 🙂