 |
Riepilogo | Aggiunge un carosello di immagini (o più) a un post |
 |
Repository | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts |
 |
Guida all’installazione | Come installare un tema o un componente del tema |
 |
Nuovo ai temi di Discourse? | Guida per principianti all’uso dei temi di Discourse |
Installa questo componente del tema
Questo componente aggiunge un carosello di immagini basato su Splide/Swiper nei post. I caroselli Swiper hanno più funzionalità come miniature e diverse animazioni.
Swiper:
Swiper con miniature abilitate:
Splide:
Viene aggiunto un pulsante alla barra degli strumenti dell’editor per aggiungere caroselli, con un’immagine segnaposto:
Il markup per i caroselli è il seguente:
[wrap="Carousel" autoplay=true/false interval=<durata in ms>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
Per facilitare un processo più semplice di creazione di caroselli, facendo clic sul pulsante nella barra degli strumenti dell’editor si aprirà una modale (grazie a Discourse GIFs TC!), dove è possibile scegliere la configurazione del carosello:
È quindi possibile aggiungere altre immagini nel [wrap].
Le impostazioni (per carosello) sono le seguenti:
enable_thumbnails: Mostra le miniature delle immagini sotto il carosello.
enable_loop: Fa sì che il carosello torni all’inizio quando raggiunge la fine.
enable_thumbnail_loop: Fa sì che le miniature del carosello si ripetano quando raggiungono la fine.
Se hai troppo poche immagini, l’abilitazione di questa impostazione può causare un movimento glitchato e scattoso del carosello. Si consiglia di avere più immagini prima di abilitarla.
enable_autoplay: Lascia che il carosello si riproduca da solo.
autoplay_interval: Il numero di millisecondi da attendere prima di riprodurre la diapositiva successiva. Utilizzato in combinazione con enable_autoplay. Se si lascia vuoto, il valore predefinito sarà 5000.
Impostazioni
Le impostazioni (globali) sono le seguenti:
carousel_software: Quale software utilizzeranno i caroselli (Swiper/Splide); Swiper è preferito ed è l’impostazione predefinita.
image_carousel_placeholder: L’immagine predefinita per il carosello quando viene creato. Per impostazione predefinita, viene utilizzata un’immagine segnaposto regolare inclusa:
show_pagination_buttons: Mostra i punti di paginazione sotto il carosello per facilitare la navigazione tra le immagini.
image_transition_animation: [Solo per Swiper] Animazione delle immagini che passano alla successiva; l’impostazione predefinita è ‘slide’, le opzioni sono:
- cube
- fade
- cards
- flip
- slide (predefinito)
pagination_button_color: Il colore dei punti di paginazione; lasciando vuoto si utilizzano le impostazioni predefinite di Swiper/Splide.
active_pagination_button_color: Il colore del punto di paginazione quando si trova sulla diapositiva corrente; lasciando vuoto si utilizzano le impostazioni predefinite di Swiper/Splide.
Note
Il supporto attuale per Splide in questo TC non consente miniature e animazioni di transizione. Sarò lieto di accettare PR per le miniature Splide (che sono più complicate).
Se qualcuno volesse implementare miniature verticali, ho del codice nel repository per questo (commentato) che non funziona molto bene. Sono felice di accettare PR per aggiungere questo (o costruire sull’implementazione attuale).
Ancora una cosa, sto esplorando un modo per aggiungere le immagini del carosello all’interno della modale di creazione, ma sto riscontrando un problema descritto qui. Sarei felice se qualcuno potesse rispondere lì!
Ringraziamenti
Grazie a @Arkshine per l’ispirazione qui. Capisco che abbia creato il repository qui (tuttavia, ho scelto di non fare riferimento a quel repository per questo TC).
Spero che questo sia utile a qualcuno!
Non ho ancora pubblicato perché sto lavorando alla visualizzazione dell’editor rich text (prosemirror) e ci vuole tempo per capire tutte queste novità.