Grazie per l’aggiornamento! 
Con alcuni trucchi CSS ho spostato l’avatar come sovrapposizione sulla miniatura in modalità scheda:
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
Come posso ridurre l’altezza del div (viola) dell’autore dell’argomento a 0 e rimuovere efficacemente lo spazio vuoto mostrando ancora l’avatar?
Se stai scrivendo CSS personalizzato, piuttosto che aggiungere codice che sovrascrive uno dei layout preimpostati, ti consiglio invece di scegliere l’opzione di layout Nessuno nelle impostazioni del tema e dichiarare i tuoi stili da zero.
Ad esempio, potresti copiare il foglio di stile Cards predefinito e dichiarare il contenitore featured-topics__topic-details come una griglia. Quindi puoi posizionare i suoi elementi esattamente come preferisci, piuttosto che spostarli con dichiarazioni assolute.
È un’ottima idea!
Per ora, siamo soddisfatti del modello e solo di alcune piccole modifiche CSS per testarlo inizialmente. Una volta che passeremo alla fase di ottimizzazione del CTR, probabilmente seguiremo il tuo consiglio. 
Non sono sicuro se questo sia il comportamento previsto o se possa essere considerato un bug:
Quando vengono impostati tre argomenti nelle impostazioni, ma ne vengono visualizzati solo due, appare uno spazio vuoto dove dovrebbe esserci il terzo argomento. Sarebbe ideale se le schede venissero ridimensionate per riempire l’intera larghezza in tali casi.
Se qualcuno è interessato a utilizzare lo scorrimento orizzontale su dispositivi mobili, ecco del CSS che ho ideato (con l’aiuto dell’IA). Include anche alcuni aggiustamenti di scroll snap e dimensioni che ho trovato più adatti al nostro caso d’uso.
PS: Ho anche provato a creare delle pillole di navigazione senza aggiungere HTML, ma è stato decisamente un azzardo.
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* Padding laterale per la visibilità delle schede adiacenti */
gap: 1rem; /* Spaziatura coerente tra le schede */
overscroll-behavior-x: contain; /* Impedisce interferenze con l'overscroll */
scroll-behavior: smooth; /* Scorrimento fluido */
scrollbar-width: none; /* Nasconde la barra di scorrimento */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* Nasconde la barra di scorrimento nei browser WebKit */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* Schede più strette per la visibilità laterale */
min-width: 280px; /* Larghezza minima per schermi piccoli */
scroll-snap-align: center; /* Centra ogni scheda durante lo scorrimento */
height: unset !important; /* Altezza coerente */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
Ciao, grazie mille per questo componente, lo adoro!
Qualcuno può per caso aiutarmi a regolare le dimensioni del titolo dato che è troppo grande in questo momento?
Ho ricevuto un messaggio di errore che dice che questo componente deve essere aggiornato per essere compatibile con le prossime modifiche al core di Discourse. Qualcuno sa se è previsto un aggiornamento?
Ho aggiornato il componente all’inizio di quest’anno. Devi reinstallarlo per utilizzare la nuova versione, vedi: 
Featured Topics - #38 by manuel
Oh, grazie mille, ha funzionato!
L’unica cosa che non riesco a sistemare (credo di aver stuzzicato Chat GPT per un’ora…) è l’altezza delle schede: qualche consiglio su come posso ridurla/rimuoverla?
Ciao Manuel, c’è un modo per far sì che il tuo fantastico componente tema ignori le immagini (in modo che mostri solo un estratto)?
Ho parecchi argomenti in primo piano senza immagini (che voglio mettere in evidenza), ma fanno una pessima figura accanto a quelli che contengono immagini. Inoltre, sono più interessato al testo che alle immagini.
Il modello del componente renderizza una varietà di contenuti disponibili su un argomento. L’aspetto finale viene quindi regolato con regole di stile. Ad esempio, quando selezioni “schede” come layout, le anteprime degli argomenti vengono nascoste quando è presente un’immagine in primo piano e mostrate ogni volta che non c’è:
Se desideri sempre mostrare l’anteprima e non mostrare mai un’immagine, puoi selezionare “nessuno” per Layout e aggiungere il tuo foglio di stile. Oppure sovrascrivi le regole sul layout delle schede che mostrano l’immagine e nascondono l’anteprima.
Penso che questo sia un ottimo componente!
Ammetto di aver passato due o tre giorni a cercare di imparare a creare un componente tema per fare esattamente quello che fa questo componente. Non penso che quel tempo sia stato sprecato perché ho imparato molto, ma vorrei aver seguito prima il consiglio di ask.discourse e aver dato un’occhiata a questo componente.
Una cosa che non riesco a capire
Mi piace il layout a schede (card layout) ma vorrei mostrare una miniatura (thumbnail) e un estratto (excerpt) nel layout a schede. Qualsiasi suggerimento sarebbe apprezzato.
Invece, sono finito sul layout a elenco (list layout) ma volevo cambiare alcune cose. Le ho aggiunte alla mia scheda common.css. Forse questo aiuterà qualcun altro
per rimuovere il tag dell’argomento
.featured-topics__topic-tag {
display: none;
}
per rimuovere l’avatar dell’autore
.featured-topics__wrapper .topic-author {
display: none;
}
per rimuovere il link della categoria
.featured-topics__wrapper .category-link {
display: none;
}
Modifica da aggiungere:
Lascerò intatto il post originale sopra, ma volevo aggiungere
come far apparire l’estratto nella vista a schede
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
Inoltre, ho imparato ad apprezzare di più il layout della vista elenco (list view) sul desktop rispetto al layout a schede, ma ha un aspetto terribile su dispositivi mobili. La miniatura è a sinistra e il titolo e l’estratto sono in una colonna stretta a destra. Non ho capito come far sì che il testo avvolga la miniatura o impili tutto in un’unica colonna.
Dato che ho capito come far apparire la miniatura e l’estratto nel layout a schede, che ha un aspetto decente su dispositivi mobili, sono passato a quel layout perché sospetto che la maggior parte degli utenti stia visualizzando il sito dal telefono.
Questo è un ottimo componente e plugin, grazie per il tuo lavoro!
Tuttavia, sembra esserci un problema con i contenuti che non si aggiornano, a meno che non esegua un aggiornamento completo della pagina, premendo F5.
Come esempio:
Creo un argomento con il tag “featured” (in primo piano).
Vado alla homepage cliccando sul banner del sito web.
L’argomento dovrebbe essere sotto “Featured Topics” (Argomenti in primo piano), ma non viene visualizzato.
Appare solo se eseguo un aggiornamento della pagina tramite il tasto F5. Anche se clicco di nuovo sul banner, non apparirà.
Stessa cosa se elimino un post in primo piano. Scomparirà solo se aggiorno la pagina tramite F5 o se chiudo la scheda e riapro la pagina.
Qualche idea sul perché succede questo?
Questo è intenzionale. Il contenuto non viene aggiornato dinamicamente, ma riflette lo stato al caricamento della pagina. Di solito non è un problema poiché il contenuto sarà aggiornato per qualsiasi nuovo visitatore del sito.