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. 🙂
Y si quieres ser el primero en enterarte cuando lo haga, suscríbete a la newsletter:
Hector dice
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!!
Nahuai dice
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.
Beba dice
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.
Nahuai dice
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.
Carlos dice
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!
Nahuai dice
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.
Hans dice
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
Nahuai dice
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.
Laura dice
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
Nahuai dice
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.
maro dice
Hola Nahuai,
Me he colado aquí, la verdad que muy interesante ese plugin, ahora el intento hacerlo en una página de portfolio (them kalium) y no me da esa opción, tu crees que es por el tema?
Gracias
pd perdón por haberme colado aquí
Nahuai dice
Hola, Maro.
Sí, seguramente es cosa del tema que estás utilizando.
Veo que trae un constructor visual incorporado (cosa que no debería) y es posible que esté deshabilitando el editor de bloques nativo. de WordPress.
Mi recomendación es que te pongas en contacto con los creadores del tema para que te informen cómo puedes usar el editor de bloques en su tema.
Un saludo.
Gema Abuín dice
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!!!!!
Nahuai dice
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.
Menchu dice
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.
Nahuai dice
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.
Raquel Ordonez dice
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.
Nahuai dice
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.
Serena dice
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!!
Nahuai dice
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.
Jose Luis dice
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.
Nahuai dice
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.
Tatiana dice
Hola, ¿cómo puedo elegir la foto de “portada” de mi entrada?
Nahuai dice
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.
isabel dice
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
Nahuai dice
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.
Javier dice
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
Nahuai dice
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.
Cristian Saavedra Parra dice
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.
Nahuai dice
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.
Gala dice
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
Nahuai dice
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.
Monica dice
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!
Nahuai dice
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.
Victor dice
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.
Nahuai dice
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.
Akaryuu dice
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?
Nahuai dice
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.
Vanessa dice
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.
Nahuai dice
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.
mariola dice
¡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!!
Nahuai dice
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.
Juan Bautista dice
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.
Nahuai dice
¡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.
Laura dice
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!!
Nahuai dice
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.
Iñaki Sarrabayrouse dice
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?
Nahuai dice
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.
Edgar Javier dice
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?
Nahuai dice
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.
Alberto dice
Buenos dias,
Mi pregunta es que cuando creo una pagina con un bloque si le pongo ver pagina cuando estoy dentro de worpress la veo bien pero cuando salgo del editor y consulto mi pagina no sale nada.
A ver si me podeis explicar cual es el problema.
Muchas gracias.
$Albert
Nahuai dice
Hola, Albert.
Lo primero asegúrate de que se está guardando correctamente la página, antes de ir a visualizarla.
También puedes probar a crear una nueva página para descartar que sea una cosa puntual.
Si a pesar de eso sigues con problemas de visualización, te recomiendo desactivar todos los plugins (si tienes un clon de la web mejor) y ver si se soluciona.
Veo que tienes Visual Composer instalado, en ocasiones da problemas.
Si está integrado en el tema ponte en contacto con el desarrollador.
Un saludo y suerte.
Marketing Digital dice
Hola bien explicado, pero me surge una duda, no se si es por los cambios actuales de wordpress pero.
¿Sabéis si hay alguna forma de hace que un bloque se vea solo en movil o pc? Quiero hacerlo sin añadir ningún constructor ni nada por el estilo. Hacerlo con wodpress.
Nahuai dice
Hola.
Para conseguir lo que me comentas te recomiendo el plugin EditorsKit que amplia las posibilidades nativas del editor de bloques. Y entre las opciones está la de decidir si mostrar u ocultar bloques dependiendo del tamaño de pantalla (móvil, tablet o escritorio).
Un saludo.
Victoria dice
Hola!! Súper interesante tu artículo, me ayuda mucho!!
He leído todas las preguntas y respuestas, pero sigo sin conseguir poner una foto como portada de un producto! Antes era muy fácil, ponía literalmente “añadir una foto de portada” y la añadías, pero ahora no lo encuentro, puedes ayudarme porfi??
Gracias!!!
Victoria.
Nahuai dice
Hola, Victoria.
Gracias por tus palabras. 🙂
Desconozco el tema que estás usando y si eso modifica la forma nativa de WordPress. Pero si no lo hace y respeta los estándares, deberías de poder añadir la imagen desde la parte superior derecha, dentro de la pestaña «Documento».
Y esa imagen destacada es la que se debería de mostrar. 😉
Un saludo.
GRELA FARIÑA, MARTA dice
Hola Héctor qué gusto leerte, tengo un problema.
No me sale de manera predefinida los iconos de ajustar el ancho completo en las imagenes, solo me deja centrar, o poner en lado derecho e izquierdo, me es imposible ajustar la imagen a todo el ancho de la página, como puedo resolverlo?no me salen ni los iconos
graciass!
Nahuai dice
Hola, Marta.
No sé quien es Héctor, pero te contesto igualmente. 😉
Seguramente no puedes verlo porque el tema que estás utilizando no ha dado soporte al editor de bloques aún.
Mira a ver si tienes alguna actualización pendiente y sino contacta a los creadores para preguntarles al respecto.
Un saludo.
Anabel dice
Hola Marta, disculpa que entre a su conversación pero estuve en la misma situación, en este link te informa como agregar el ancho completo al bloque https://ayudawp.com/ancho-amplio-y-completo-bloques/
Eric dice
Hola Nahuai. Comencé hace poco con WordPress. No puedo encontrar o quizás no se expresarme para poder rastrear la información que estoy buscando. A ver si tu me puedes ayudar.
Quiero convertir mi página en una página simple. Donde la página de aterrizaje solamente sean imágenes que ocupen toda la pantalla de tal forma que cuando ingrese un usuario solo pueda hacer scroll down para ver más trabajos míos. Solamente eso. Conoces alguna plantilla con la que pueda resolver esta inquietud?
Muchas gracias.
Nahuai dice
Hola, Eric.
En realidad lo que quieres conseguir te lo permite cualquier tema de WordPress.
Simplemente tendrías que crear una página con los bloques y el diseño que te interese e indicar que esa sea la página principal. Esto último puedes hacerlo desde Ajustes > Lectura.
Para elegir una buena plantilla de WordPress te recomiendo que te leas el post que escribí al respecto.
Y para conocer todo lo que puedes conseguir mediante los bloques del editor, te recomiendo este otro tutorial.
Espero que te resulte de ayuda.
Suerte con tu proyecto.
Primosegundo dice
Hola Nahuai,
Tengo una duda y necesito me ayudes.
Quiero hacer un theme y no se donde, en el codigo se llaman a las imagnes del diseño del theme.
No se si me entiendes.
Salu2
Nahuai dice
Hola,
creo que te vendría genial un curso sobre creación de temas.
Te recomiendo el de SiliCodeValley, es el más completo que conozco.
Un saludo.
Anabel dice
Hola Nauai, me ha encantado tu post.
una consulta, yo agregue una linea de código al archivo fuction.php a mi tema ya que no me aparecía el ancho completo en mi bloque, y me ha funcionado, pero al ver la vista previa no se ve el ancho completo. tengo que modificar el css o alguna solución ?
Nahuai dice
Buenas, Anabel.
Además de la línea en el fichero functions.php tienes que añadir también unas líneas de CSS para que el diseño se aplique.
Seguramente estarán en el mismo tutorial en que sacaste la de functions.php.
Un saludo.
Roberto L dice
Algunos temas dan problemas y no dejan editarlos en algunos puntos o se descoloca. Pero gracias por los datos.
Nahuai dice
Hola, Roberto.
Efectivamente, siempre vas a depender de que el desarrollador del tema haga bien su trabajo.
Por eso hago tanto énfasis en la importancia de elegir un buen tema. 😉
Un saludo.
Francisco Encarnación dice
Hola, que tal, acabo de descubrir tu blog y esta sensacional, gracias
Oye tengo una duda que creo es muy simple y espero me puedas ayudar, fijate que tengo una galeria de fotos, super simple, la hice de manera nativa con el bloque de galería de imágenes de wordpress y cuando das click en la imagen, la abre, pero no aparece ninguna flecha de desplazamiento para ver la siguiente fotografía sino que hay que regresar y dar click en la otra foto, existe alguna manera de que se pueda cambiar de fotografía sin regresar a la galería, muchas gracias
Nahuai dice
Hola, Francisco.
Gracias por tus palabras. 🙂
Respecto a lo que comentas, creo que lo que necesitas es un plugin de lightbox. Puedes echar un ojo a esta recopilación en la que recomiendo los mejores.
Espero que te resulte de ayuda.
Un saludo.
jose dice
Hola, muy bueno tu post, me ayudaste bastante.
Tengo una duda. Es posible que en una pagina de inicio (editada con elementor) se pueda agregar contenido creado en otra pagina distinta?
Me explico, tengo mi página de inicio creada con elementor y quiero agregarle a esa página de inicio un bloque galeria (quiero agregarle ésta ya que probando varios plugins de galerias me han dado problemas con los tamaños de las fotos, cosa que el bloque de galeria no me da) pero no consigo como “llamar” o “adjuntar” ese bloque galería a mi pagina de inicio desde elementor.
Muchas gracias por tu ayuda
Nahuai dice
Hola, Jose.
No conozco en profundidad Elementor porque no trabajo con él.
Pero si te puedo decir que no vas a poder introducir en una misma página contenido en parte hecha con Elementor + otra cosa como un bloque de galería.
En tu caso buscaría qué galerías son compatibles con Elementor y te permiten añadirlas dentro del mismo.
Un saludo.
Jose Angel dice
Hola Nahuai,
¡Excelente artículo! Tengo una duda con los bloques, y es que no encuentro la manera de convertir el texto de cada imagen de la galería en h3, h4… ¿sabes cómo lo podrías solucionar? Muchas gracias de antemano
Nahuai dice
Hola, Jose Angel.
No tengo claro a qué texto te refieres, ¿a la leyenda? ¿por qué querrías hacerlo?
En cualquier caso seguramente necesitarías realizar la modificación a nivel de código.
Un saludo.
Eugenio Vila dice
El bloque Galeria de WordPress, ¿se puede abrir en un carrusel?
Nahuai dice
Hola, Eugenio.
Puedes echar un ojo a los plugins de lightbox que recomiendo, especialmente Meow Lightbox.
Un saludo.
Jaime dice
Estimado buen tutorial me ha servido mucho y se agradece la información.
hay alguna manera de usar este editor para poder organizar mis fotos, pero por categorías…Ejemplo.. estoy haciendo una pagina para arrendar algunas casas o departamentos, pero las necesito organizar x categorías, lo que significa que muestre estas fotos de forma dinámica como lo hace woocommerce.
Muchas gracias por tu atención y respuesta.
Nahuai dice
Hola, Jaime.
Echa un ojo a este plugin que te permite organizar mejor las imágenes de la biblioteca.
Pero si lo que necesitas es que lo haga en la parte frontal de la página, mira el tutorial sobre las distintas galerías que puedes usar en WordPress, alguna de ellas como FooGallery permite filtrar por categorías.
Un saludo.
Cecilia dice
Hola!, sabes como puedo hacer para que las imágenes me queden encuadradas iguales en los bloques, ya que no existe la opción de free transform, soy nueva en wordpress, disculpa quizás ya respondiste esto pero no encontré la respuesta en los comentarios 🙂
muchas gracias de antemano!
Nahuai dice
Hola, Cecilia.
Para queden todas encuadradas puedes activar la opción de “Recortar las imágenes” que tienes en ajustes de galería:
Un saludo.
diego dice
Antes de nada darte la enhorabuena por tu página, es de gran ayuda para nosotros los novatos…
Quería consultarte, ¿hay alguna opción o pluying, dentro de la galería nativa, para que alguien que ve la galería de imágenes pueda seleccionar varias fotos y enviarme la descripción de la imagen de esa selección? Algo parecido a un carrito de compra, no sé si me explico…
un saludo y gracias de nuevo por hacernos participes de tu conocimiento!!
Nahuai dice
Hola, Diego.
El bloque galería nativa de WordPress no permite lo que comentas.
Puedes echar un ojo a los plugins de galerías, algunos de ellos permiten hacer “proofing” que creo que lo más parecido a lo que buscas.
Preparé un tutorial en Carrete Digital donde explicaba cómo funciona en NextGEN Gallery.
Espero que te sirva de ayuda.
Un saludo.
Delfina dice
Hola! Gracias por tu data de ayuda. Quería consultarte si sabes cómo hacer que un grupo de bloque (imagen más texto al lado) pase a ancho completo de pantalla, se como hacerlo solo con una imagen de fondo pero no me permite o no estoy encontrando la opción para hacer lo mismo con un grupo de bloque conformado por imagen más texto al lado.
Agradecería tu respuesta!
Saludos
Nahuai dice
Hola, Delfina.
El bloque de «Medios y texto» sí permite elegir el diseño de ancho completo:
Si te aparece la opción es posible que sea una limitación del tema de WordPress que estás usando.
Puedes ponerte en contacto con su creador/a para ver si lo puede adaptar completamente al editor de bloques.
Un saludo.
Luz Rojas dice
Hola Nahuai! estoy usando el tema Jollyany, todo iba estupendo, pero en las ultimas publicaciones que he realizado en mi bloque de proyectos las imágenes me salen desorientadas, he revisado la biblioteca de medios en donde las tengo almacenadas y están en la orientación perfecta, tal y como las necesito publicar. pero al publicar algo sucede que algunas se desorientan.
Tienes idea de que es lo que puede estar sucediendo?
Nahuai dice
Hola.
Te recomiendo que contactes con los creadores de tema para que te orienten con la solución.
Tiene mucha pinta de que es algo específico del mismo.
Un saludo.
Linus dice
Hola Nahuai
Estoy trabajando en una web con Divi, pero las entradas al blog las hago directamente en el editor nativo (WP 5.6).
Creo galerias y funcionan como tu explicas, peeeero, al visualizar la entrada con esa galeria y clicar con el ratón encima de una foto, no se amplia, no pasa nada, por lo que hay que contentarse en ver la foto a tamaño minúsculo.
Alguna sugerencia?
Gracias por compartir!
Nahuai dice
Buenas, Linus.
Te recomiendo de que eches un ojo al artículo sobre los mejores plugins de lightbox, ya que necesitarás uno de ellos para conseguir el efecto que buscas.
Un saludo.
Verónica dice
Hola Nahuai.
Me encanta tu manera de explicar.
Tengo un problema cuando subo un carrusel de imágenes en WordPress nativo, a la hora de subirlo me deja poner una leyenda debajo de cada imagen pero luego al publicarlo no aparece la leyenda, se van pasando las fotos sin nada escrito debajo. ¿Sabrías ayudarme? Muchas gracias
Nahuai dice
Buenas, Verónica.
Ojo porque WordPress no trae un bloque de carrusel nativo, trae un bloque de galería. En el cual te deja elegir el número de columnas, pero no mostrarlo en modo carrusel.
Revisa que no sea un bloque que sea parte de otro plugin y en ese caso tendrías que contactar con el creador para preguntarle porqué no muestra la leyenda.
Un saludo.
Concha (Aetheria Travels) dice
Hola Nahuai, ¡gracias, muy buen post! Tengo una pregunta ¿esos dos nuevos formatos de imagen que mencionas (ancho amplio y ancho completo) deberían aparecrn por defecto? Yo desde luego no los veo en el tema que utilizo y parece que no soy la única. Te agradeceré que me puedas sacar de dudas.
¡Gracias y enhorabuena de nuevo!
Nahuai dice
Buenas, Concha.
Para poder ver los nuevos formatos tu tema se tiene que actualizar al editor de bloques.
Cualquier tema que se precie debería haberlo hecho a estas alturas.
Mi recomendación es que contactes con los creadores y se lo comentes.
Si no te contestan o no actualizan el tema para dar soporte, pensaría en ir cambiando de tema. 😉
Un saludo.
José Juan dice
Hola, inserté el widget iconos sociales en una de las páginas. Pero al visitar el sitio no aparecen. Sabes si debo configurar algo para que aparezcan o es un error de programación de wordpress? Saludos.
Nahuai dice
Hola, José Juan.
No es una pregunta relacionada con el contenido del post, pero ¿has probado a añadir las URLs de las redes sociales?
Un saludo.
Cecilia dice
Hola. Tengo problemas con las imágenes, están enlazadas a archivo de medios y no se abren en una ventana emergente, se abren en toda la página, puedes verlo en la galería o imagen de: https://new.sanandresdearroyo.es/quienes-somos/historia (web 1), haciendo pruebas he creado en otro subdominio una web (web 2) instalando wordpress desde cero con WP5.6 y si me funciona muy bien el abrir las imágenes y galerías, puedes verlo en: https://prueba.sanandresdearroyo.es/san-andres-de-arroyo.
la web 1 está ya actualizada a WP 5.6 y le cambié de tema porque usaba un tema ya caduco con el nuevo wp. Agradeceré tu ayuda. Ya he descartado que sea el tema.
Nahuai dice
Hola Cecilia.
Veo que ya has solucionado el tema porque en la web principal ya se muestran las fotografías en ventanas emergentes.
El encargado de este efecto es el plugin de lightbox.
Un saludo.
Alejandra dice
Hola
Hice unos cambios en los widgets para agregar los metodos de pago de la web y ahora me salen varios errores:
– El bloque «mc4wp_form_widget» ha sido afectado por errores y puede que no funcione correctamente. Compruébalo con las herramientas para desarrolladores para más detalles.
– El bloque «media_image» ha sido afectado por errores y puede que no funcione correctamente. Compruébalo con las herramientas para desarrolladores para más detalles.
-El bloque «text» ha sido afectado por errores y puede que no funcione correctamente. Compruébalo con las herramientas para desarrolladores para más detalles.
Y así un montón (como 20 advertencias).
Sin embargo veo la web y se ve bien… Debería borrar el widget con las imagenes que puse? ¿sabes por que ocurre esto?
Gracias
Nahuai dice
Hola, Alejandra.
No puedo saber exactamente a que se deben tus errores, pero prueba a borrar el widget (ver si desaparecen) y volver a crearlo.
Veo que uno de los errores está relacionado con el plugin Mailchimp for WordPress, puedes probar a desactivar el plugin.
De hecho, una de las estrategias más efectivas para saber de dónde viene un error es desactivar todos los plugin e ir activándolos uno a uno, hasta que das con el «culpable» de los errores.
Un saludo y suerte.
Andrea dice
Hola! Gracias por este post tan instructivo. Mi duda es sencilla, siempre aparecía la imagen del primer párrafo del blog en la página de inicio y ahora no es más así, y no sé cómo se hace.
Gracias!
Nahuai dice
Buenas, Andrea.
Creo que lo mejor es que te pongas en contacto con el creador del tema y se lo comentes, a ver si te da una solución.
Un saludo.
Gonzalo Galeano dice
Hola yo agrego la imagen y se publica bien, pero cuando entro a la página no se ven sale un sticker de una foto rota no se como solucionarlo espero me ayudes
Nahuai dice
Hola Gonzalo.
Revisa que el nombre de la imagen no tiene tildes ni caracteres especiales.
Un saludo.
Nazaret dice
Hola, primero gracias por este post.
Aunque pongo el numero de fotos 4 por ejemplo, cuando me meto en la página después de actualizar me salen por lo menos 20 fotos alineadas de 4 en 4. No sé cómo puedo dejar visible las 4 primeras en una fila.
Muchas gracias y un saludo
Nazaret
Nahuai dice
Buenas, Nazaret.
Si solo añades 4 imágenes a una galería no deberían de mostrarse más.
¿Estás usando el bloque de galería nativa de WordPress? ¿Hay otro contenido en la misma página que pueda estar añadiendo imágenes?
Un saludo.
Fernando dice
Buenos días, y gracias por tu contenido, tengo un problema selecciono en galería 15 fotos, pero en la página WEB, en visualización o en definitiva solo me aparece solo 3, verifico, tamaño, nombres, cambie los tamaños de las fotos y no me aparece en la WEB, ni en modo prueba, soy nuevo y tal vez estoy haciendo algo distinto, tal vez me guías en esto o que debo hacer para que me aparezcan las fotos que selecciono o hasta cuantas fotos puedo colocar.
saludos
Fernando
Nahuai dice
Buenas, Fernando.
¿Has probado a cambiar el tema a ver si sigue sucediendo?
O si tienes algún plugin de caché prueba se limpiar y/o desactivar.
Lo normal es que si ves las 15 imágenes cuando estás editando deberían de mostrarse en la parte frontal de la web también.
Un saludo.
Juan dice
¡Hola!
¿Existe modo de configurar las galerías nativas de wordpress de tal manera que en desktop muestren 2 columnas y en móvil 1?
No veo la manera jeje.
¡Muchas gracias!
Nahuai dice
Buenas, Juan.
Ahora mismo ese ajuste solo lo puedes hacer usando CSS adicional. Puedes añadir este código al fichero style.css o el personalizador de WordPress:
/* Mostrar en una columna las imágenes del bloque de galería en móviles */
@media only screen and (max-width: 600px) {
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
width: 100%;
}
}
Espero que te resulte de ayuda.
Un saludo.
Juan dice
¡Genial! Mil gracias, muy amable 🙂
Nahuai dice
Encantado de ayudar. 🙂