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:
- Subir desde tu ordenador.
- Agregar desde la biblioteca de medios.
- 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. 🙂
Hola:
Excelente contenido de un tema muy actual!
Crees que el editor hace innecesarios los maquetadores visuales actuales o los hará innecesarios dentro de poco?
Y en ese caso, qué te parece lo más conveniente?
Muchas gracias!!
Hola Hector, gracias por tu comentario.
Pues creo que a día de hoy no puede reemplazar a constructores visuales como Elementor o Divi en todos los casos, ya que estos ofreces muchas más posibilidades.
Pero sí que recomendaría que en diseños más sencillos se utilizara en nuevo editor de bloques. La verdad es que ya puedes conseguir resultados bastante buenos y esto solo va a mejorar con el tiempo.
A la larga es posible que los constructores visuales acaben ofreciendo paquetes de bloques premium, que se puedan utilizar con el nuevo editor.
La verdad es que estamos en un momento muy interesante.
Mi recomendación, utiliza el nuevo editor de bloques siempre que puedas y si para algún diseño concreto necesitas un constructor visual, úsalo.
Eso sí, siempre que sea una página, nunca uses un constructor visual en entradas normales.
Un saludo.
Hola, muchas gracias por el post, he resuelto varias dudas con él, pero tengo otra duda extra. En la galería de imágenes, me deja poner un enlace externo con las imágenes, pero el texto del enlace sale cobre la imagen, así que o estoy haciendo algo mal o es que queda así. Estoy segura que es más lo primero!!
Saludos.
Hola Beba,
seguramente estás introduciendo el link donde dice “Escribe la leyenda…” y por eso lo muestra.
Para poder añadir una URL a cada fotografía tienes que instalar un plugin, como por ejemplo:
https://wordpress.org/plugins/gallery-custom-links/
Una vez activado, ve a “editar galería” y al clickar sobre cada fotografía te dará la opción de añadir una URL externa. Rellena la casilla “URL del enlace” y ya lo tendrás.
Espero que te sirva de ayuda.
Un saludo.
Un saludo.
Hola! Muy interesante el truco de la /.
Cuando inserto una galería, sea de lástima columnas que sea, aparecen en la web todas las imágenes en vertical y con un punto negro (como una lista). Sin embargo, desde el editor de WP la galería está bien colocada… Alguna idea de que puede estar pasando?
Muchas gracias!
Hola Carlos,
¿te sigue ocurriendo si cambias de tema?
Si no lo has hecho ya, pruébalo con Twenty Nineteen.
Si los puntos desaparecen ya sabrás que es por motivo del tema.
Un saludo.
Hola excellente posteo. Resolviste algunas dudas que tenia pero tengo otra. Cuando creo una galería, las imágenes pierden su calidad, por más que las subo en su tamaño original. Normalmente uso 1024 mpx del lado ancho y lo que me de de altura. Lo que estoy haciendo pero que toma más tiempo es subir una imagen, editar el html y copiar y renombrarlas. Es la única forma que logro tener las imágenes al 100% y en su calidad. Muchas gracias de antemano
Hola Hans,
¿Estás utilizando el bloque nativo de galerías de WordPress?
Sin una URL donde ver qué ocurre es difícil saber que está ocurriendo.
De todas maneras, echa un ojo al plugin de Meow Gallery Block que te puede ayudar a gestionar un poco más la galería.
Un saludo.