Anteprime della lista dei topic (TLP)

[merefield (Robert)]

Questo è un Componente Tema ma offre l’opzione di aggiungere un plugin complementare.

	Riepilogo	Il componente Topic Preview originale che ti consente di aggiungere immagini e anteprime (e altro ancora!) all’elenco degli argomenti, consentendoti di configurare quali aggiunte appaiono in quale elenco.
	Link al Repository	GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub
	Guida all’Installazione	Installing a theme or theme component
	Sponsorizzazione	Ti preghiamo di prendere in considerazione la possibilità di diventare un sponsor del mio lavoro open source a un livello che si adatti alle risorse e alle esigenze tue o della tua organizzazione, per garantire che questo componente riceva la manutenzione che merita e continui a funzionare per il tuo sito in futuro.

Ti piace questo Componente Tema? Per favore, metti una su GitHub

Installa questo componente tema

Funziona davvero bene con Discourse Bars 🍻 🍸 (a sidebar framework)!

Panoramica

Topic List Previews ti consente di:

• Aggiungere immagini, anteprime e statistiche degli argomenti agli elementi dell’elenco degli argomenti; e
• Modificare il layout e lo stile degli elementi dell’elenco degli argomenti
• Aggiungere argomenti “In Evidenza” sopra gli elenchi degli argomenti e gli argomenti.
• Aggiungere la User Wall alla pagina delle attività dell’utente (nota anche come funzionalità “Portfolio”).

Il Sidecar

Può essere integrato con il plugin ‘sidecar’: https://github.com/merefield/discourse-topic-previews-sidecar

Attualmente si tratta di un repository privato a cui hanno accesso i miei sponsor GitHub che contribuiscono con almeno 7 $.

per aggiungere le seguenti funzionalità:

• ‘azioni’ (segnalibro, collegamento e like dall’Elenco Argomenti)
• Selettore Miniature nell’Editor Meta Argomenti. (Scegli qualsiasi miniatura dall’intero Argomento utilizzando un’interfaccia semplice)
• Colorazione dello sfondo basata sul colore dominante della miniatura
• Elaborazione delle miniature di YouTube per rimuovere eventuali bordi neri (fondamentale per determinare il colore dominante migliore).
• Opzione per ricreare le miniature durante la ricostruzione del Post dell’Argomento, per consentirti di gestire rapidamente l’eliminazione dei bordi su base individuale per ogni Argomento.

Guida all’installazione del plugin: Install plugins on a self-hosted site

È necessario almeno il Componente Tema, il Plugin è opzionale.

Queste impostazioni possono essere applicate a tutti o a elenchi di argomenti selezionati su base globale o specifica per categoria.

Questo flessibile set di funzionalità ti consente di creare una varietà di diversi stili di elenco degli argomenti, tra cui

Stile Base

Impostazioni rilevanti

• miniatura elenco argomenti
• anteprima elenco argomenti
• azione elenco argomenti

Stile Pinterest (Masonry) noto anche come ‘tiles’

Impostazioni rilevanti

• tiles elenco argomenti
• miniatura elenco argomenti
• anteprima elenco argomenti
• azione elenco argomenti
• larghezza miniatura elenco argomenti
• altezza miniatura elenco argomenti

che ha un’opzione formato ampio (dietro l’impostazione topic_list_tiles_wide_format):

Questo funziona in modo responsivo, quindi si ridurrà al formato masonry se non viene fornita larghezza sufficiente (e viceversa).

Immagini in Evidenza

Impostazioni rilevanti

• tag immagini in evidenza elenco argomenti
• conteggio immagini in evidenza elenco argomenti
• larghezza immagini in evidenza elenco argomenti
• altezza immagini in evidenza elenco argomenti
• titolo immagini in evidenza elenco argomenti
• anteprima immagini in evidenza elenco argomenti
• ordine immagini in evidenza elenco argomenti

Attivazione/Disattivazione delle Anteprime:

L’ho introdotto un po’ di tempo fa per l’uso con il mio plugin AI Topic Summaries.

Puoi usarlo per TLP:

GitHub - merefield/discourse-tc-excerpts-toggle: A small Discourse theme component that adds a...

Esempi nel Mondo Reale

• StarZen - Un sito fan non ufficiale di Star Citizen
• https://www.artofsm.art/

Supporto

Non fornisco alcun supporto garantito gratuitamente. Posso fornire supporto alle aziende o alle istituzioni che si iscrivono a uno dei miei livelli di Sponsorizzazione mensile GOLD o PLATINUM.

C’è anche un’opzione bug hunt una tantum.

[raghukamath (Raghavendra Kamath)]

C’è un modo per ordinare le immagini in primo piano in base al momento in cui viene aggiunto il tag? Attualmente porta l’immagine in primo piano dell’argomento che ha attività recenti, spingendo verso il basso le immagini taggate più recenti.

Ad esempio, se ho 10 immagini, ne contrassegno 5 come in primo piano, ora quelle 5 vengono mostrate nella barra superiore. Se aggiungo altri 5 tag, questi sostituiranno i 5 esistenti. Ma se uno dei 5 argomenti precedenti ha commenti o post, quell’immagine viene portata in primo piano ora.

[merefield (Robert)]

Tag? No, ma c’è questa opzione per ordinare per data di creazione:

[merefield (Robert)]

Attenzione: Sto per apportare una modifica al layout delle Tiles (elementi) molto presto. Se hai apportato delle modifiche CSS, queste potrebbero dover essere… ehm… modificate:

Prometto che non lo farò molto spesso, ma questa volta è per riordinare le cose e facilitare alcune nuove funzionalità che potrebbero apparire in futuro…

Attualmente la modifica è sul branch beta.

[raghukamath (Raghavendra Kamath)]

Sì, quell’opzione aiuta un po’, ma se uno dei post precedenti ha un aggiornamento, viene visualizzato in primo piano.

[merefield (Robert)]

Sto usando solo le opzioni native disponibili all’interno dell’API di Discourse (è fondamentalmente un Componente Tematico, quindi non puoi cambiare l’API). Quando avrò tempo, darò un’occhiata di nuovo all’ordinamento. Tuttavia, questo è emerso un po’ di tempo fa e ho apportato una modifica per aiutare uno degli utenti. Topic List Previews (legacy) - #1154 by merefield. Sono sorpreso che questo non funzioni come previsto. Ci si aspetterebbe che la created_at di un argomento rimanga statica nonostante i nuovi post? Sei sicuro di aver modificato l’impostazione e aggiornato il browser?

[merefield (Robert)]

@raghukamath Ho appena testato questo e sembra funzionare come previsto? Non cambierà comunque l’ordine in risposta a nuovi post e rispetta la data created_at. Aggiorna il tuo browser e riprova.

[raghukamath (Raghavendra Kamath)]

Nessun problema. Farò altri test. Forse mi sono confuso a causa del comportamento quando l’opzione è abilitata. Mi scuso per averti disturbato così tanto.

Un altro problema che i miei membri hanno evidenziato riguarda la correzione CSS del colore degli argomenti non letti e letti che non viene applicata ai browser mobili.

[merefield (Robert)]

@raghukamath

Un altro problema che i miei membri hanno evidenziato riguarda la correzione CSS del colore degli argomenti non letti e letti che non viene applicata ai browser mobili.

Sì, quello era ancora in sospeso come affermato in precedenza. Cercherò di spedirlo con l’aggiornamento del layout descritto sopra, probabilmente entro pochi giorni.

[flash]

Ciao, stavo cercando di lavorare con il plugin Git deprecato quando non sono riuscito a sovrascrivere il CSS sulla miniatura mobile. Continuava a tornare a un’altezza di 80px. Ho iniziato a cercare e ho visto che era stato spostato nel componente. Avrò lo stesso problema e dovrò clonare il componente per modificarlo o c’è un’altra soluzione? Voglio che il mobile abbia la larghezza completa sul browser mobile.

[merefield (Robert)]

Il layout qui non soddisfa le tue esigenze: Topic List Previews (TLP) - #4 by merefield soddisfa le tue esigenze? Le nuove tessere hanno miniature a larghezza intera. Questo è attualmente sul ramo beta. Installalo se lo desideri come Componente Tema aggiuntivo e provalo. Ricorda di specificare il ramo durante l’installazione e di modificare il nome del Componente Tema per renderlo chiaro che si tratta della Beta.

[flash]

Questo sicuramente lo farebbe. Ora è a tutta larghezza come volevo. Grazie.

[merefield (Robert)]

Ho unito il branch beta:

• lo stile interno delle tessere è stato modernizzato e riordinato. Le miniature ora occupano l’intera larghezza della colonna.
• ci sono una serie di semplificazioni CSS
• il mobile ha avuto alcuni piccoli miglioramenti del layout per i non-tessere.
• i titoli delle tessere dovrebbero ora riflettere le visite precedenti anche su mobile.

Layout changes

[sofi.pocketful (Sofi)]

Ciao,

Grazie per questo fantastico componente! Adoro il design

Sono relativamente nuovo in Discourse e non conosco molti termini tecnici.

Ho avuto problemi con le immagini che non vengono visualizzate nel componente elenco. Per qualche motivo, le immagini vengono visualizzate nell’anteprima del componente, ma quando carico la cosa reale, le immagini non ci sono più.

^ Questa è l’anteprima del componente

[sofi.pocketful (Sofi)]

^ Questo è come appare quando carico la pagina reale

Ora, credo che abbia a che fare con le mie impostazioni di discourse??

C’è un’impostazione specifica che deve essere attivata affinché questo componente funzioni? Non so davvero perché non funzioni come dovrebbe…

[merefield (Robert)]

Ciao, grazie per il tuo interesse.

Un paio di cose:

• Se non hai mai installato un componente o plugin simile prima, potrebbe esserci un ritardo prima che tutte le miniature vengano generate. Questo è un processo batch e richiede tempo. Questo processo dovrebbe iniziare a funzionare in background automaticamente una volta installato il componente e aggiunto a un tema. Controlla la tua coda sidekiq. Potresti vedere molti lavori in coda.
• Non è necessariamente compatibile con qualsiasi tema, c’è sempre la possibilità di uno scontro: è sviluppato e progettato solo con il tema predefinito. Si prega di testarlo sul tuo sito inizialmente solo con il tema predefinito. Puoi adattare il suo aspetto, ma ciò richiederà la base sui manufatti speciali di questo componente.

[sofi.pocketful (Sofi)]

Ciao Robert,

Grazie per la tua risposta! Testerò quello che hai suggerito sul mio sito

[flash]

Ciao Robert. Sto inserendo una tabella con JavaScript di terze parti sotto l’intestazione e lo script interrompe le anteprime quando lo uso in un componente. Hai qualche idea per una soluzione alternativa?

[merefield (Robert)]

Se c’è un errore in quello script che impedisce l’esecuzione di javascript, questo potrebbe interrompere il codice di layout TLP che richiede che javascript funzioni al meglio. Cerca errori rossi nella console del tuo browser.

[raghukamath (Raghavendra Kamath)]

@merefield

Ho appena testato questo e sembra funzionare come previsto? Non cambierà comunque l’ordine in risposta a nuovi post e rispetta la data created_at. Per favore, aggiorna il tuo browser e riprova.

Ciao, ho abilitato l’opzione della data di creazione come hai suggerito. Risolve in parte i problemi. ma penso che nei plugin precedenti l’ordine fosse impostato in base alla data in cui il post è stato taggato. Inoltre, il problema dell’immagine più vecchia che appare in prima pagina ad ogni aggiornamento o risposta all’argomento rende difficile mantenere un’immagine recente in primo piano. Supponiamo che io renda un’immagine in primo piano e se un post più vecchio di un anno riceve una nuova risposta, la prima pagina avrà l’immagine in primo piano di quel post. Se molti post più vecchi ricevono risposte, l’immagine in primo piano appena taggata scompare.