Imágenes circulares en WordPress

Tiempo estimado de lectura: 4 minutos

 

Cómo hacer que las imágenes sean circulares

Si alguna vez has necesitado hacer circulares alguna de tus imágenes, por ejemplo para tus testimonios, el perfil de tus usuarios… y no sabías cómo hacerlo, en este artículo vamos a ver el método más sencillo que conozco: con un poco de código CSS.

¿Necesitamos preparar previamente las imágenes?

Esta pregunta es un tanto innecesaria, puesto que el título del artículo ya nos dice que vamos a crear imágenes circulares. Por lo tanto, si tuviéramos que preparar previamente las imágenes con algún programa de tratamiento de imágenes, directamente haríamos esas imágenes circulares con el propio programa, ¿no crees?.

Como he dicho al principio, vamos a hacerlo del modo más sencillo y con un poco de código CSS.

¡Vamos allá!.

Código que vamos a utilizar para crear las imágenes circulares

El código que vamos a utilizar es muy sencillo, es el siguiente:

img.circular {
border-radius: 50%;
}

Como puedes ver, este código es tan sencillo que apenas necesita explicación, aún así, vamos a ver qué  es lo que hace.

Lo primero de todo, le aplicamos a la imagen un radio en el borde del 50%. Con esto, la imagen ya se hace circular, porque obviamente, si suavizamos al 50% los radios de esquina de un objeto (en este caso una imagen), conseguimos que ese objeto se vea circular.

Entonces ya lo tenemos, ¿verdad?. Nada más lejos de la realidad. Este código solo sirve si la imagen es completamente cuadrada, es decir, mide lo mismo de ancho que de alto. Pero… ¿qué ocurre si una imagen no es cuadrada, sino que es rectangular?, en ese caso la imagen aparecerá como estirada por el lado más grande, y no tendremos ese efecto que estamos buscando.

¿Cómo conseguimos entonces que la imagen se muestre circular, independientemente del tamaño que tenga?

Para ello necesitamos añadirle alguna cosa más a este código.

img.circular {
border-radius: 50%;
width: 50vmin;
height: 50vmin;
object-fit: cover;
margin: auto;
}

Qué hace este código

Como puedes ver, creamos una clase llamada circular, que nos servirá para aplicársela a aquellas imágenes que queremos convertirlas en imágenes circulares. Si no creáramos esta clase, los estilos se aplicarían a todas las imágenes, con lo que convertiríamos en circulares todas las imágenes de nuestra web.

Para evitar esto, utilizamos dos valores  de width y height de 50vmin. Este valor hace que tome el valor del 50% de anchura y altura, del área que se vea de esta imagen. Al tomar el valor de 50% tanto de ancho como de alto, lo que hacemos es encuadrar dicha imagen, con lo que el resto de ancho o alto que exceda de la otra medida, no lo tendrá en cuenta.

Y como siempre, ¿dónde ponemos este código?

Al ser un código CSS, puedes pegarlo directamente en el personalizador de tu Theme, ya sabes donde: Apariencia, Personalizar, CSS adicional.

Un ejemplo de cómo quedaría este efecto:

Imagen rectangular
Imagen rectangular original de 534 x 350 px
Imagen cuadrada
Imagen cuadrada original de 350 x 350 px

Nota.
Si trabajas con Gutenberg como editor por defecto, seguramente tu Theme ya tenga una opción para hacer este efecto. Lo que has visto en este artículo te servirá si tu tema no tiene esa opción, o si trabajas con el editor clásico.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *