Imágenes de WordPress una al lado de la otra: así es como se hace

¿Te has sentido frustrado con el formato de imágenes en WordPress? Obtener imágenes de WordPress una al lado de la otra no es la tarea más fácil en el editor clásico.

Cambie al editor de bloques y alinee las imágenes con unos pocos clics. No se requiere HTML.

Si prefiere el editor clásico, hay un poco más de implicación para alinear sus imágenes de WP una al lado de la otra. No es difícil. Solo algo de HTML.



Siga leyendo para descubrir cómo alinear sus imágenes de WP utilizando el editor Classic o Gutenberg.

Puede crear una galería en su biblioteca multimedia. El Editor de bloques tiene un bloque de galería que alinea automáticamente las imágenes. Agregarlas en el editor clásico fusiona las imágenes, pero ajustar el HTML para que floten las separa. Dos complementos de galería que funcionan son el complemento Ultimate Shortcodes y Robo Gallery.

 

Cambiar al editor de bloques

El editor de WP predeterminado es el editor de bloques. Se implementó en 2018 con el lanzamiento de WordPress 5.0.

Dado que el complemento Classic Editor tiene más de 5 millones de instalaciones activas, claramente, muchos usuarios no están interesados ​​​​en Gutenberg.

Si eres uno de ellos, este es uno de esos momentos en los que usar el editor de bloques ayudará.

Hay un bloque de 'galería' que le permite insertar dos columnas para alinear sus imágenes.

 

Desde aquí, puede insertar imágenes de su biblioteca de medios o cargarlas directamente desde su computadora.

Las imágenes se alinean automáticamente una al lado de la otra y la configuración predeterminada es para tres imágenes.

Si solo usa dos, esas imágenes se mostrarán una al lado de la otra.

La configuración predeterminada de la galería es mostrar hasta tres imágenes una al lado de la otra por fila.

Si desea cuatro imágenes en una fila una al lado de la otra, cambie la configuración de la Galería en la barra lateral derecha.

Si desea agregar más, siga agregando más imágenes. Lo que no encaja en una fila creará una segunda fila.

 

Uso de HTML en el Editor clásico para obtener imágenes una al lado de la otra en WordPress

En el Editor clásico, las cosas son diferentes. No se ha realizado ningún cambio de tamaño automático. Como tal, no obtendrá un formato atractivo a menos que las imágenes tengan el mismo tamaño.

Si sus tamaños son diferentes, inserte ambas imágenes, haga clic en el icono de edición (el pequeño símbolo de lápiz cuando pasa el cursor sobre una imagen en modo borrador) y cambie el tamaño a 'miniatura' o 'Medio'.

El tamaño grande es 1024px x 576px. Esos son demasiado grandes para mostrarlos uno al lado del otro en una página web. Se apilarán en su lugar.

Si desea que se muestren dos imágenes más pequeñas una al lado de la otra y centradas, no alinee las imágenes al centro. Eso también los apilará.

En su lugar, cambie del editor 'visual' al editor de 'texto' y envuelva todo el HTML de las imágenes dentro de una etiqueta

. Eso es antes de “

 

Obtener espacio entre imágenes insertadas en el Editor clásico

El siguiente problema al que te enfrentarás es el espaciado. De forma predeterminada, poner las imágenes una al lado de la otra directamente en el editor clásico las une. No hay espacio entre las imágenes.

Para obtener el espaciado, debe insertar un elemento flotante en el código HTML.

En lugar de centrar las imágenes, las imágenes flotan desde ambos lados de la página.

El código HTML para eso es

style="float: left; margin-left: 10px" …

Los 10px se pueden cambiar a cualquier número que desee. Cuanto mayor sea el número, mayor será el espaciado.

 

Creación de una galería desde su biblioteca de medios

La forma más sencilla de colocar imágenes de WordPress una al lado de la otra usando el editor clásico es crear una galería de medios.

Haga clic en el botón Agregar medios, luego seleccione la opción para 'crear galería'.

Desde allí, cargue sus imágenes o elija las de su biblioteca de medios.

 

Use el complemento Ultimate Shortcodes

Una de las formas más fáciles de insertar imágenes en WordPress que están alineadas una al lado de la otra es instalar el complemento Ultimate Shortcodes.

Tiene numerosos usos. Encontramos que es el método más simple para crear un cuadro de texto en WordPress .

Se hace clic simple. Hay tantos elementos que puedes agregar. El que alinea sus imágenes una al lado de la otra es (sin sorpresas) el elemento de la galería.

Una vez seleccionado, aparece un cuadro para completar los detalles.

Muestra hasta cuatro imágenes una al lado de la otra, dependiendo de la configuración máxima de ancho y alto. Estos diferirán según su tema de WP.

Para modificar el ancho, la forma más rápida es hacer clic en cada imagen, seleccionar la opción de edición y elegir el tamaño de 'miniatura', que es de 150 px por 150 px.

El tamaño medio es de 300 px x 300 px, que es demasiado grande para cuatro imágenes una al lado de la otra, pero funcionará para solo dos imágenes una al lado de la otra. El tamaño grande no funcionará ya que tiene un ancho de 1084px.

 

Obtenga imágenes alineadas más elegantes con el complemento Robo Gallery

Instalación

Vaya al menú de complementos en la barra lateral izquierda, seleccione para agregar uno nuevo y busque por palabra clave 'Robo Gallery'.

El título completo es 'Galería de imágenes de Robo - Galería de fotos receptiva'.

Se agrega un menú adicional a la barra lateral de WP. Seleccione la opción 'agregar galería/imágenes' y seleccione una de las seis opciones de diseño gratuitas, luego haga clic en el botón 'crear galería'.

 

Desde aquí, asigne un título a su galería, haga clic en 'administrar imágenes' y se cargará su biblioteca de medios de WP.

Agregue sus imágenes desde allí hacia arriba o cargue las que desea mostrar una al lado de la otra.

Desplácese hacia abajo a la siguiente sección para ver la configuración de la galería y puede configurar la alineación de la galería, el relleno (espaciado alrededor de cada imagen), dar a las imágenes miniaturas en las que se puede hacer clic y controlar otras configuraciones como sombras e incluso usar la carga diferida para las imágenes.

Una vez creada su galería, presione publicar. Para agregarlo a su publicación, use el código abreviado de la galería o haga clic en el botón Robo Gallery que se muestra arriba de su publicación o título de la página.

El complemento Robo Gallery funciona con el Editor clásico. También es compatible con el editor de bloques, pero no es necesario solo para alinear imágenes una al lado de la otra.

El editor de bloques puede encargarse de eso. Sin embargo, tiene algunas características adicionales, por lo que incluso si está utilizando el editor de bloques, es probable que sus imágenes se muestren mejor con este complemento.