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.
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.
Hola, te doy las gracias por esta información que nos aportas, muy útil y valiosa. Sigo teniendo dudas sobre cómo insertar enlaces a diferentes páginas en cada imagen, cuando estas forman parte de una galería. Utilizo el plugin “Enlaces Personalizados a Galerías WP”, pero desde la actualización de wordpress a bloques no encuentro cómo hacerlo. ¿Podrías echarme una mano? Muchas gracias
Hola Laura,
me alegro de que el post te haya resultado de ayuda.
Como mencionaba en otro comentario, para poder añadir una URL a cada fotografía recomendaba instalar un plugin:
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.
Madre mía, Héctor… GRACIAS!!! Llevo más de dos años con mi blog en modo totalmente rudimentario. Me gusta escribir y Compartir, pero me he conformado con lo más básico. Al principio leí muchos artículos para arrancarlo y también tutoriales para saber, al menos, cómo subir lo que escribía, pero la forma en la que me llegaba la información se me hacía complicada de digerir (no estoy nada familiarizada con la tecnología), peeeeeroooooo… te he descubierto!!!!!! Joe, qué alegría!!!! No tengo ni idea de muchos de los términos que utilizas, pero creo que contigo será mucho más sencillo Aprender. Me encanta tu modo de Compartir la información, la normalidad y el sentido del humor. Cuando esté un poco encaminada te escribiré para que me eches un cable y reenfocar algunas cosas de las que tengo ganas cambiar. Mi blog no es de fotografía, pero estoy segurísima de que he dado con alguien que me va a ayudar a Aprender. Graaaaaaaacias y, por favor, continúa así. Da gusto leerte!!!!!
Hola Gema,
me alegro de que la página te resulte interesante 🙂
Por cierto, soy Nahuai, no sé quien ese tal Héctor al que te refieres, jeje.
Un saludo.
Hola, desde que está este sistema de bloques, no me deja añadir una imagen desde la biblioteca, osea, ni aparecen. Solo puedo subir imágenes. Alguien sabe a que es debido? Gracias. Por cierto, muy buena explicacion todo.
Hola Menchu,
El bloque te da la opción de añadir desde biblioteca de medios.
Al hacer click el botón “Biblioteca de medios” tienes que ver todas las imágenes de la instalación. ¿Te refieres a que no te aparece ninguna ahí?
En teoría, el editor de bloques no cambia nada relacionado con la biblioteca de medios, así que no debería de haber diferencia con el clásico.
Un saludo.
Hola Nahuai
El enlace desde una foto a una url en especifico no funciona, tipo cluster.
Tan solo quiero enlazar entre paginas con imágenes y no puedo.
¿Será que el plugin “gallery-custom-links” no esta funcionando?
Tengo el tema Twenty Seventeen actualizado con el WordPress 5.1.1 .
Gracias por el articulo.
Hola Raquel,
¿te has asegurado de añadir el link al que quieres redirigir al añadir la fotografía?
Yo lo he probado y me funciona correctamente.
Espero que después de revisar esto se solucione.
Un saludo.
Hola! Se agradece mucho la existencia de este tipo de artículos que son de gran ayuda para quienes nos lanzamos solos al mejor estilo paracaidista en este mundo de wordpress. Hasta ahora no había tenido este tipo de problema, pero qué puede estar pasando en la versión nueva, si al seleccionar la opción de insertar imagen desde la biblioteca de medios, ésta no aparece, dejando solo la opción de subir nuevas fotos desde el disco?
Muchas gracias por la ayuda!!
Hola, Serena.
Gracias por tus palabras, me alegro mucho de que los posts del blog te resulten de ayuda.
Por lo que me cuentas, el problema parece provocado por el tema o por un plugin que no es compatible 100% con el nuevo editor de bloques.
Mi recomendación es que:
Una vez hayas identificado al culpable busca un sustituto y te recomiendo que te pongas en contacto con el desarrollador para explicarle el problema.
Si esto se te hace muy cuesta arriba puedes contactarme y ver si con una bolsa de horas te puedo ayudar a solucionar el problema.
Un saludo.
Hola buenas. Antes de nada gracias por el articulo. Pero me surge una duda…
No soy capaz de añadir la leyenda tal y como lo hacia yo antes con el antiguo editor de WP.
Te cuento. Yo en mis galerías (en la home) tenia una galería y en cada imagen rellenaba su leyenda, Alt, titulo, url y de mas…..
El código que usaba y funcionaba era:
HTML.Pero ahora me sale un error….
Por el contrario si añado la imagen directamente desde la galería de medios (la cual por cierto no tiene todas las imágenes que tenía antes subidas) y esta imagen ya tenía dicha leyenda con el código anterior ya “puesto” no hay problema. Se visualiza sin problema.
El problema viene cuando subo una foto nueva y quiero ponerle una leyenda,,,,no me deja. Cuando actualizo se ve error.
Alguna idea?????
Muchas gracias de antemano.
Hola, Jose Luis.
No sé exactamente que sistema utilizabas antes, pero te recomiendo usar la galería nativa de WordPress y seguro que no te dará problemas para añadir los metadatos.
Si quieres expandir las posibilidades que ofrece la galería nativa, te recomiendo que eches un ojo al plugin Meow Gallery del cual tengo un post explicando sus funcionalidades.
Un saludo.
Hola, ¿cómo puedo elegir la foto de “portada” de mi entrada?
Hola, Tatiana.
Para elegir la foto tienes que hacer click en <>, en el bloque de la derecha que pone <> y elegir una imagen. Una vez hecho, guarda el cambio y ya debería de verse.
Un saludo.
Hola, tengo una duda a ver si me la puedes ayudar. Tengo una página online de venta textil. Por ejemplo una referencia de una tela tiene muchos colores imaginate del 0 al 40 y cada uno de ellos tiene una referencia.
Como puedo hacer para que en la galería de productos aparezcan todas (eso sí se hacerlo) pero que cuando picas en una de ellas y salga a la parte de imagen principal se cambie el nombre de la referencia.
No se si esto se puede hacer así. Ahora lo que uso es un código.
Gracias
Hola, Isabel.
Por lo que alcanzo a entender, siendo un tienda online, lo que pensaría es en gestionarlo con WooCommerce y sus variaciones para los distintos colores. Me parece más adecuado que usar galerías.
En cualquier caso, si necesitas más orientación puedes ponerte en contacto conmigo y contratar una consultoría.
Un saludo.
Hola Nahuai.
Tengo una duda. ¿Cómo puedo poner la imagen destacada de mi post por encima del título del post? Es decir, que quede el título del post debajo de la imagen principal que quiero utilizar.
Gracias
Buenas, Javier.
Eso depende del tema que estes utilizando.
Yo habitualmente utilizo Genesis Framework y para mostrar la imagen destacada hay que utilizar un pequeño fragmento de código.
Revisa cuál es tu tema y cómo se puede conseguir es ese caso.
Un saludo.
Hola, ¿como puedo hacer para que las imagenes cargadas a las entradas se vean sobre la entrada, y no en un enlace nuevo?
Es mi caso que al cargar una imagen y luego al abrirla esta se abre sobre la misma pagina pero como enlace aparte, porque para cerrarla hay que volver atrás el navegador.
Hola, Cristian.
La mejor forma es usando un plugin de lightbox. Yo recomiendo Meow Lightbox y WP Featherlight.
Puedes ver más sobre ellos en mi entrada de mejores plugins de lightbox y el de la suite de Meow.
Un saludo.
Hola! Tengo una duda que no sé cómo resolver sobre las imágenes en wordpress. Es posible tener 1 foto distinta de fondo para cada página de la web? He probado a través de los bloques de imágenes tal y como cuentas en esta entrada pero no… Hay alguna opción?
Muchas gracias de antemano!
Saludos!
Gala
Hola, Gala.
¿Te refieres a poner una imagen de fondo en cada página?
Si es así, por el momento no se puede realizar con el editor de bloques.
Tendrías que buscar un plugin que lo haga.
Un saludo.
Hola Nahuai,
En primer lugar, enhorabuena por el blog! Explicas todo de una forma súper clara y concisa, lo que es muy de agradecer para profanos en la materia!
Estoy intentando hacer una web en la que la hoja de portada sea una galería en la que cada imagen lleve enlazada una página. Como bien has explicado en otros comentarios con el Plugin gallery-custom-links he conseguido hacerlo pero… hay alguna forma de hacer que al pasar por encima de cada imagen con el cursor aparezca el titulo de la imagen (algo similar al Bloque de imagen de fondo que explicas pero que solo aparezca al pasar por delante el cursor). Igual estoy pidiendo demasiado! Jeje
Muchas gracias!
Hola, Mónica.
Muchas gracias por tus palabras, me alegro de que te resulte de ayuda.
Respecto a tu duda, si utilizas el plugin Meow Gallery, permite mostrar el nombre de la fotografía al pasar el cursor por encima.
De hecho, puedes verlo en mi portfolio fotográfico, en algunas de las fotos (la de los pájaros…).
Espero que te resulte de ayuda.
Un saludo.
Saludos, muy buen post
tengo una galería en la que necesito recorrer cada una de las imagen para aplicar un código, hace un tiempo me funcionaba $galeria = get_post_gallery(get_the_ID(), false); para obtener la información, posteriormente haciendo $galeria_imagenes_ID = explode(‘,’, $galeria[‘ids’]); las almacenaba en un arreglo y podía recorrerlo con un foreach, sin embargo, get_post_gallery ya no me está funcionando, no sé si se deba al nuevo editor ¿Sabes cómo puedo recorrer cada imagen de la galería? Gracias de antemano.
Buenas, Victor.
Sí, con la llegada del nuevo editor han cambiado algunas cosas de la galería nativa de WordPress.
Yo no he necesitado meterle mano todavía, pero he visto que en este hilo de Stackoverflow hablan del tema, espero que te sirva de ayuda.
Un saludo.
Hola, necesito ayuda con algo. Estoy usando el tema Twenty Fourteen e intento hacer que mis entradas destacadas se ven en la parte superior, pero por alguna razón no se ve nada de ellas, solo el título.
Observa: https://i.imgur.com/g0pZvWR.jpg
Si revisas la descripción del tema, eso es posible, pero, por qué cuando lo hago yo, no se ve nada?
Buenas, Akaryuu.
Primero te recomiendo que desactives todos los plugins para ver si se solucione el problema.
Si se soluciona, después vete activando uno a uno los plugins para descubrir cuál es el culpable.
Si a pesar de eso sigue sin verse, probaría a usar otro tema a ver si eso lo soluciona.
Un saludo.
Hola Nahuai, ¿qué tal?
Me manejaba con soltura creando filas e insertando widgets, pero ahora con los bloques no sé cómo hacer para que los productos de mi tienda no aparezcan uno debajo de otro, ¿no pueden visualizarse en horizontal? ¿cómo manejar la ubicación de los elementos con los bloques?
Mil gracias!
Saludos,
Vanessa.
Hola, Vanessa.
¿Has probado el plugin de WooCommerce blocks?
Te permite insertar productos, categorías… y cambiar su diseño de forma sencilla.
Un saludo.
¡Hola Nahuai! Un artículo genial y además haces que parezca todo muy fácil 🙂
Verás, al insertar la galería de imágenes con el nuevo editor, se queda la imagen con una banda gris medio transparente con la leyenda dentro en blanco. ¿Es normal? Quisiera poner la leyenda fuera de la imagen, debajo ¿es posible?. (parecido a la página deunicornios.online, por ejemplo)
¡¡Ah, y gracias por anticipado!!
Hola, Mariona.
Gracias por tus palabras. 🙂
Es muy posible que la leyenda se muestre dentro de la imagen porque el tema que estás usando está diseñado así.
Puedes probar a poner el texto en la descripción y ver si la muestra debajo de la imagen.
Sino puedes probar a ver si te pasa mismo usando otra galería (que no sea la nativa) como Meow Gallery.
Las otras opciones sería modificarlo por CSS (código) o usar otro tema.
Espero que alguna de las soluciones te sirva.
Un saludo.
Buenas, lo que yo busco es poder filtrar las imagenes de una galeria por su nombre, es decir, poder introducir el nombre o parte de éste y que me muestre las imagenes que contengan ese nombre.
Lo que busco es exactamente lo que hace el buscador de medios, “Buscar Medios…” que existe en la “Biblioteca de medios” de WP.
¡Buenas, Juan!
Creo que para lo que buscas Foo Gallery te puede ayudar, lo comento en el post sobre plugins de galerías de WordPress.
Un saludo.
Hola, Nahuai, muchas gracias por la ayuda!
Vengo con wordpress desde hace muchos años, y venía bien, pero ahora con todos los cambios (que son excelentes!!!) quedé desactualizada.
Estoy queriendo modificar el zócalo gris que aparece en las fotos de la galería. Me interesa que aparezca, pero preferiría que fuera más claro y menos ancho… Se puede hacer?
Gracias!!
Hola, Laura.
Por lo que puedo ver estás utilizando el módulo de Divi para mostrarlo.
Yo no lo utilizo así que desconozco si ofrece esa opción o si por el contrario lo deberías de modificar mediante código (usando CSS).
En cualquier caso, te animo a probar los bloques nativos de galerías de imágenes de WordPress.
Un saludo.
Cómo puedo hacer para que en una entrada de blog, que ahora la tengo convertida a bloques, pueda insertar una imagen en medio del texto y poder moverla dentro de dicho texto, donde mejor me convenga como hacía antes del cambio?
Hola, Iñaki.
La opción más sencilla que se me ocurre es que utilices el bloque de columnas y utilices 3, la central para la imagen y los laterales para el texto.
Un saludo.
Hola Nahuai
Excelente artículo, muy práctico y mejor explicado.
Estoy trabajando con el tema de génesis AgentPress Pro y no me da la opción de ancho completo, como lo indicas en el artículo creo debe ser que el tema no esta preparado para ello.
Que me aconsejas para poder tener una imagen de ancho completo en la landing page que estoy haciendo?
Gracias, Edgar Javier.
Efectivamente, el tema AgentPress Pro no está actualizado aún para el editor de bloques.
StudioPress tiene la intención de actualizar todos sus temas, pero van poco a poco.
Tienes la opción de esperar, aquí te dejo un recurso donde se van actualizando todos los temas que se adaptan al editor de bloques:
https://codigogenesis.com/child-themes-genesis/
Sino, tendrías que realizar la modificación a mano. Es decir, adaptar el código para que se muestre.
En Código Genesis justo tengo un tutorial para conseguir esto.
Un saludo.