Personalizzare la schermata di avvio di Discourse con immagini SVG personalizzate

[awesomerobot (Kris)]

Questa funzionalità è stata molto richiesta qui su Meta Personal branding for the splash screen .

Abbiamo ora aggiunto l’opzione per aggiungere un SVG, statico o animato, come immagine della schermata di avvio per sostituire questo indicatore predefinito di puntini di caricamento:

Se viene utilizzato un SVG statico, questo appare sopra l’animazione dei puntini di caricamento:

altrimenti, se viene utilizzato un SVG animato, questo sostituisce completamente i puntini:

Nota che per motivi di prestazioni, gli SVG animati dovrebbero utilizzare solo animazioni di trasformazione CSS o di opacità. ^[1]
È possibile abilitare questa funzionalità tramite il nostro sistema Upcoming Changes ( /admin/config/upcoming-changes):

Per questo viene utilizzata l’impostazione del sito splash screen image. È possibile utilizzare le variabili CSS var(--primary), var(--secondary) e var(--tertiary) all’interno del proprio SVG per fare riferimento ai colori del tema e adattarsi alla modalità scura.

È importante notare che l’abilitazione di questa funzionalità potrebbe avere un impatto sul punteggio LCP, quindi la cosa migliore per provare è apportare la modifica, attendere un po’ e verificare se ha un impatto su LCP o sull’indicizzazione nella Google Search Console.

---

1. Inizialmente abbiamo tentato di consentire elementi di animazione SMIL (\u003canimate\u003e, \u003canimateTransform\u003e, ecc.), ma queste animazioni vengono messe in pausa dal browser quando viene eseguito javascript, causando scatti. Le animazioni CSS di trasformazione e opacità non sono bloccate da JS ed evitano questo problema. ↩︎

[philh]

hmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

Come sostituisco questi puntini? Per me appare solo per mettere il mio logo svg

[Don]

Ciao

@awesomerobot

Se viene utilizzato un SVG statico, appare sopra l’animazione del punto di caricamento, altrimenti se se ne utilizza uno animato li sostituisce:

Quindi verrà sostituito se si utilizza un SVG animato.

[ばこん (べーこん(bac0n))]

Ho applicato un’animazione SVG, ma appare molto piccola.

C’è un modo per ingrandirla?

[awesomerobot (Kris)]

Al momento non abbiamo un modo per aggiungere CSS personalizzato perché questa schermata viene caricata prima di gran parte dell’app e ci sono molti più vincoli. Puoi condividere qui l’immagine SVG che stai utilizzando (o inviarmela in privato)? Potrei fare dei test e vedere se le nostre impostazioni predefinite potrebbero essere più adatte.

[ばこん (べーこん(bac0n))]

Eccolo qui

[awesomerobot (Kris)]

Grazie per il riferimento!

Sto aggiungendo una modifica che consentirà dimensioni leggermente maggiori e centrerà meglio gli schermi con loghi statici: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

Ho anche notato che la tua SVG ha molto spazio in alto che influisce sulla centratura, non so se è intenzionale, ma questa versione lo rimuove

[ばこん (べーこん(bac0n))]

Grazie mille!

[awesomerobot (Kris)]

Si noti che c’è una leggera modifica in ciò che stiamo consentendo per l’animazione SVG (e ho aggiornato l’OP per rifletterlo). Inizialmente stavamo consentendo le animazioni SMIL negli SVG, ma si scopre che queste hanno dei singhiozzi perché il browser mette in pausa questo tipo di animazione mentre viene eseguito javascript.

Quindi, invece, la raccomandazione è di utilizzare solo animazioni di trasformazione CSS e opacità nei tuoi SVG, poiché queste non sono bloccate da JS.

Se dai un’occhiata all’SVG di @ばこん sopra… fornisce un buon esempio di un’animazione consentita:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Fai anche attenzione a dare alle tue animazioni nomi univoci in modo che non entrino in conflitto con altre animazioni in Discourse (nomi come “blink”, “rotate”, “fade” ecc. potrebbero essere troppo generici). Usare un prefisso come unique- è un ottimo modo per evitarlo.

[Falco]

Google ha appena lanciato Gemini Pro 3.1 e il primo punto saliente del modello sono state le SVG animate. Naturalmente ho provato a creare un loader per https://discourse-on-a-pi5.falco.dev/ e ho ottenuto questo dopo solo 2 prompt

Si abbina davvero bene con questa nuova funzionalità!

[Bas (Bas van Leeuwen)]

È fantastico Falco

Devo vedere cosa può fare Gemini con il logo di Discourse

[Falco]

Sì, ero piuttosto soddisfatto del risultato! Ci stavo provando da molto tempo con i modelli, questo è il primo modello che lo gestisce bene.

Ecco il prompt

Genera un SVG animato che verrà utilizzato come animazione di caricamento su un forum riguardante il mini computer raspberry pi. L’animazione deve essere realizzata utilizzando CSS inline SVG.

che ha prodotto

poi ho proseguito con

Questo è fantastico! Puoi cambiare il raspberry stesso, gli esagoni rossi, l’animazione? Si muovono diagonalmente dall’alto a sinistra in basso a destra, ma sono decentrati e sembra strano. Forse li manteniamo statici e centralizzati con un’animazione più discreta?

che ha poi prodotto la versione che ho condiviso

L’unico punto di contesa è che il codice SVG contiene molti commenti CSS come

/* Base Animation & Board Styles */

che non sono validi quando li salvi come file SVG, quindi ho rimosso manualmente le 7 righe con quei commenti.

[Bas (Bas van Leeuwen)]

Stai ottenendo risultati molto migliori dei miei.

Dopo una manciata di iterazioni, questo è il meglio che ho ottenuto

[Modifica], aggiungo altri due stati intermedi:
Questo era abbastanza buono… tranne che il logo era rotto:

Pensavo che questo fosse il più interessante, ma non ha funzionato davvero come animazione del logo (e senza un motivo apparente è stato renderizzato come video con audio invece che come SVG):

---

Scusate tutti per aver portato la discussione fuori tema Torniamo ad ammirare il lavoro di Falco e a discutere la schermata di avvio!

[Falco]

[quote=“Bas, post:17, topic:395100”]Stai ottenendo risultati molto migliori dei miei.

Rinunciare dopo una manciata di iterazioni[/quote]

Temo che il vincolo del logo di Discourse possa essere troppo severo per questo.

Ho provato

Genera un SVG animato che verrà utilizzato come animazione di caricamento su un forum di discussione. Il forum funziona su Discourse, quindi potrebbe utilizzare alcuni dei suoi motivi sull’svg, come bolle di dialogo colorate a forma di arcobaleno? L’animazione deve essere eseguita utilizzando il CSS inline SVG.

E ho ottenuto

[Falco]

Dovremmo fare un concorso per la schermata iniziale animata di Discourse!

[Canapin (Coin-coin le Canapin)]

@Bas

Stai ottenendo risultati molto migliori dei miei.

Hai pensato di impostare Gemini in modalità “pro”? Potrebbe non essere l’impostazione predefinita.

[keegan (Keegan George)]

@Falco

Dovremmo fare un concorso per una splash animata di Discourse!

Ho fatto un tentativo per crearne una in linea con il nuovo stile del marchio

[noahl (Noah Lovell)]

@Falco

Dovremmo fare un concorso per una splash screen animata di Discourse!

Beh… immagino di unirmi anch’io a questa tendenza

Richiesta

Converti questo in un SVG animato.

Regole:

• Deve essere un SVG animato
• Agirà come icona di caricamento tra le pagine, quindi deve essere discreto e minimale.

Idea:

• Voglio mantenere la forma generale senza distorsioni
• Penso che potremmo fare qualcosa con le 3 forme interne - una sorta di rotazione, simile a ciò che si otterrebbe facendo roteare una racchetta da ping pong tra le mani tenendola per il manico.

DEVI preservare l’identità del marchio e non romperne il design generale - questo è imperativo per il marchio.

Output (Dopo 3 revisioni):