Stesso layout del mockup: banner grande con immagine di sfondo specifica per la categoria e titolo/descrizione sovrapposti.
Caricamento fluido (nessun sfarfallio/ridimensionamento), completamente reattivo.
Lo sfondo deve essere un’immagine unica per ogni categoria (non uno stile CSS globale).
Cosa ho provato
JavaScript personalizzato per iniettare l’immagine e il testo. Funziona, ma l’immagine viene caricata per prima e poi ridimensionata, causando transizioni scattose/spostamenti di layout.
Il componente Category Banner mi ha portato vicino, ma non sono riuscito a replicare questo layout esatto e i requisiti dell’immagine per categoria.
Domanda
Qual è l’approccio consigliato in Discourse per ottenere questo risultato?
Ci sono esempi o pattern CSS/HTML per riservare spazio (ad esempio, wrapper con aspect-ratio fisso/object-fit) ed evitare CLS?
Suggerimenti per utilizzare caricamenti per categoria o impostazioni del tema per impostare l’immagine di sfondo in modo pulito.
Demo molto scadente (e non sto usando le schede argomento) ma penso che tu possa farlo facilmente solo con l’immagine di sfondo della categoria integrata:
questo posiziona l’immagine sul tag del corpo. Forse poi regola il CSS a tuo piacimento (il mio esempio è di 400px):
`+ alcune modifiche all’allineamento del testo, dovresti ottenere un’approssimazione di ciò che desideri, credo? Lo svantaggio principale è che è davvero a tutta larghezza, quindi lo vedrai sporgere su schermi più larghi.
Penso che il componente del tema più vicino a quello che stai cercando sia questo:
Potresti dare un’occhiata a quello per farti qualche idea, ma sembra che potresti aver bisogno di creare un componente personalizzato. Potresti pubblicare in Marketplace se stai cercando di assumere sviluppatori che ti aiutino.
