Imágenes circulares en WordPress

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:

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.

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:

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.