Problema de alineación de imágenes en cajas de categorías

Hola, estoy usando el tema Air, ¡se ve increíble!

He configurado mis categorías como cuadros. Cuando subo una imagen de 200 x 200px, no encaja bien. No estoy seguro de qué CSS necesitaría para que se vea como el cuadro de la derecha pero con mi imagen. De modo que el color llegue a los bordes de la misma manera que lo hace el de la derecha.

Solo una actualización. Esto es lo que dice en la pantalla de carga: relación de aspecto recomendada de 1:1 con un tamaño mínimo de 200px. Si se deja en blanco, no se mostrará ninguna imagen. - También la he hecho de 1000 x 1000 y no hay ningún cambio, así que creo que podría ser un problema con la forma en que funciona el tema. Aparte de que no muestra la imagen hasta los bordes del cuadro, también muestra una parte del fondo azul anterior detrás de mi imagen.

¿Algún pensamiento o idea?

Hola, ¿está esto en tu prueba alojada? Si es así, me temo que no podrás editar el CSS en nuestro plan Starter.

1 me gusta

Hola Hawk,

Gracias por tu respuesta.

No, estoy en una instalación autoalojada nueva con el tema Air. Creo que hay un problema con el tema al alinear las imágenes correctamente. Lo único que hice fue subir mi archivo en la proporción recomendada y el resultado mostrado es el que ves arriba.

Sería bueno que la imagen se mostrara hasta los bordes, como lo hace en el marcador de posición antes de subir imágenes. Si no, al menos que no se vean los restos azules del marcador de posición detrás de mi imagen.

Estaría dispuesto a poner código CSS en algún lugar para solucionarlo, aunque no estoy seguro de dónde y qué código necesito poner allí. Aunque, como dije, creo que podría ser algo relacionado con el tema que no muestra el archivo subido correctamente.

Hay un margin-top: .5em en el div padre, que desplaza hacia abajo tanto al padre como a la imagen hija.

Puedes intentar anular este comportamiento:

 categories-list .category .category-logo.aspect-image {
    margin-top: 0;
}

Creo que este problema debería tener una solución oficial.

2 Me gusta

Hola Coin-coin le Canapin,

Gracias por el código CSS. No estoy muy seguro de dónde añadirlo. Busqué en línea y creo que necesito añadirlo como un componente al tema “air”. Lo hice y, cuando lo activé, no hizo ningún cambio. Probablemente lo estoy haciendo mal.

Estoy de acuerdo, creo que esto necesita ser revisado en el tema. Quizás haga una publicación en la página del tema y vea si se puede solucionar.

Hola Hawk:

¿Hay alguna forma de etiquetar a alguien del equipo de Air Theme en esta publicación para intentar resolver este problema?

Intenté usar el CSS que mencionó otro usuario en esta publicación, pero no pareció funcionar.

Saludos,
Bec

Hola Bec, he asignado a un diseñador para que lo revise, pero lo siento, no puedo darte un plazo, es fin de semana.

1 me gusta

No te preocupes. Muchas gracias.

1 me gusta

¡Hola! Gracias por reportarlo. Lo revisaré y te daré una respuesta pronto, o agregaré la corrección al tema.

1 me gusta

Tengo una solución aquí → DEV: fix image size by jordanvidrine · Pull Request #49 · discourse/discourse-minimal-category-boxes · GitHub

Si actualiza el componente de tema de cuadros de categoría modernos instalado en el tema air, debería solucionar su problema.

¡Gracias!

4 Me gusta

Hola Jordan,

Muchas gracias. Sí, eso ha solucionado el problema de seguir viendo el marcador de posición en el fondo.

Me pregunto si puedes decirme cómo hacer que mi imagen llegue a los bordes de la caja como lo hace el marcador de posición. Se ve mucho mejor y esperaba que se viera igual cuando subiera mi imagen.

Si hay CSS que necesito usar, ¿dónde iría, ya que el CSS que intenté agregar antes no pareció funcionar y no estoy seguro si es porque no se permiten cambios en el tema o si simplemente no sé lo que estoy haciendo, ya que soy nuevo en discourse.

Saludos
Bec

Hola Jordan:
Quería ponerte al día.
Sucedió algo extraño cuando edité el tercer cuadro de categoría, de repente todas las imágenes encajaron en su lugar por sí solas. Así que todo parece estar bien ahora.

Gracias de nuevo por toda tu ayuda.

Hola de nuevo Jordan:

En realidad, será un problema si tienes categorías que tengan menos de 3 seguidas. Cuando se agrega la tercera imagen seguida, todo encaja perfectamente como en mi mensaje anterior. Pero si solo tienes dos seguidas, la imagen no se coloca bien dentro del cuadro, sino que la pone como un cuadrado. Así que ahora tengo algunas imágenes que se ven bien y otras que tienen una imagen cuadrada.

1 me gusta

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.