Problema di allineamento delle immagini delle caselle di categoria

Ciao, sto usando il tema Air, che sembra fantastico!

Ho impostato le mie categorie come caselle. Quando carico un’immagine di 200 x 200 pixel, non si adatta bene. Non sono sicuro di quale CSS avrei bisogno per farla assomigliare alla casella a destra, ma con la mia immagine. In modo che il colore vada fino ai bordi allo stesso modo di quello a destra.

Solo un aggiornamento. Questo è ciò che dice nella schermata di caricamento: rapporto di aspetto 1:1 consigliato con dimensione minima di 200px. Se lasciato vuoto non verrà mostrata alcuna immagine. - L’ho anche impostato su 1000 x 1000 e non c’è alcun cambiamento, quindi penso che questo possa essere un problema con il modo in cui funziona il tema. Oltre al fatto che non visualizza l’immagine fino ai bordi della casella, mostra anche una parte dello sfondo blu precedente dietro la mia immagine.

Qualche pensiero o idea?

Ciao, questa è la tua versione di prova ospitata? Se è così, temo che non sarai in grado di modificare il CSS sul nostro piano Starter.

1 Mi Piace

Ciao Hawk,

Grazie per la tua risposta.

No, sono su una nuova installazione self-hosted con il tema Air. Penso che ci sia un problema con il tema nell’allineare correttamente le immagini. Tutto quello che ho fatto è stato caricare il mio file nel rapporto consigliato e il risultato visualizzato è quello che vedi sopra.

Sarebbe bello se l’immagine fosse visualizzata fino ai bordi, come fa nel segnaposto prima di caricare le immagini. Se non altro, almeno non avere i resti blu del segnaposto visibili dietro la mia immagine.

Sarei felice di inserire del codice CSS da qualche parte per risolvere il problema, anche se non sono sicuro di dove e quale codice inserire. Anche se, come ho detto, penso che possa essere qualcosa che riguarda il tema che non visualizza correttamente il file caricato.

C’è un margin-top: .5em nel div padre, che sposta verso il basso sia il padre che l’immagine figlia.

Puoi provare a sovrascrivere questo comportamento:

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

Penso comunque che questo problema dovrebbe avere una soluzione ufficiale.

2 Mi Piace

Ciao Coin-coin le Canapin,

Grazie per il codice CSS. Non sono molto sicuro di dove aggiungerlo. Ho cercato online e penso di doverlo aggiungere come componente al tema “air”. Cosa che ho fatto e quando l’ho abilitato non ha apportato alcuna modifica. Probabilmente lo sto facendo nel modo sbagliato.

Sono d’accordo, penso che questo debba essere esaminato sul tema. Potrei pubblicare sulla pagina del tema e vedere se può essere risolto.

Ciao Hawk,

C’è un modo per taggare qualcuno del team Air Theme in questo post per cercare di risolvere questo problema?

Ho provato il CSS menzionato da un altro utente in questo post, ma non sembrava funzionare.

Saluti
Bec

Ciao Bec, ho assegnato un designer per dare un’occhiata, ma mi dispiace non posso darti una tempistica, è il fine settimana.

1 Mi Piace

Non preoccuparti. Grazie mille.

1 Mi Piace

Ciao! Grazie per aver segnalato questo. Darò un’occhiata e ti fornirò una risposta presto, oppure aggiungerò la correzione al tema.

1 Mi Piace

Ho una soluzione qui → DEV: fix image size by jordanvidrine · Pull Request #49 · discourse/discourse-minimal-category-boxes · GitHub

Se aggiorni il componente del tema delle caselle di categoria moderne installato sul tema air, dovrebbe risolvere il tuo problema.

Grazie!

4 Mi Piace

Ciao Jordan,

Grazie mille. Sì, questo ha risolto il problema di vedere ancora il segnaposto sullo sfondo.

Mi chiedo se puoi dirmi come posso far sì che la mia immagine vada ai bordi della casella come fa il segnaposto. Ha un aspetto molto più gradevole e mi aspettavo che avesse lo stesso aspetto quando ho caricato la mia immagine.

Se c’è del CSS che devo usare, dove dovrebbe andare dato che il CSS che ho provato ad aggiungere prima non sembrava funzionare e non sono sicuro se ciò sia dovuto al fatto che le modifiche non sono consentite sul tema o se semplicemente non so cosa sto facendo dato che sono nuovo a discourse.

Saluti
Bec

Ciao Jordan,
Volevo solo aggiornarti.
È successa una cosa strana quando ho modificato la terza casella di categoria, improvvisamente tutte le immagini si sono allineate da sole. Quindi ora sembra tutto a posto.

Grazie ancora per tutto il tuo aiuto.

Ciao di nuovo Jordan,

In realtà sarà un problema se hai categorie con meno di 3 in una riga. Quando viene aggiunta la terza immagine di fila, tutto si sistema perfettamente come nel mio messaggio precedente. Ma se ne hai solo due in una riga, l’immagine non viene posizionata bene all’interno del riquadro, ma viene inserita come un quadrato. Quindi ora ho alcune immagini che hanno un bell’aspetto e alcune che hanno un’immagine quadrata.

1 Mi Piace

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