Cliccando su un’immagine, questa si aprirà con il visualizzatore lightbox predefinito.
Puoi aggiungere la galleria cliccando sull’icona a griglia e poi inserendo le tue immagini. Funziona anche selezionando prima le immagini caricate e poi cliccando sull’icona.
→ Cosa intendi esattamente con ordinamento personalizzabile?
Le immagini possono essere ordinate orizzontalmente (da sinistra a destra) o verticalmente. L’ordinamento orizzontale è ideale per immagini tratte da riviste, fumetti o simili. Inoltre, quando premi “avanti” nella vista lightbox, verrà mostrata l’immagine corretta.
Le immagini sottostanti illustrano la differenza. Quella a destra ha un ordinamento orizzontale.
L’ordinamento predefinito è orizzontale, ma può essere modificato nelle impostazioni. È anche possibile cambiare l’ordine di una galleria specifica aggiungendo vertical/horizontal (funziona anche v/h) all’attributo nell’editor come in questo esempio: <div data-masonry-gallery="vertical">.
→ Questo componente sembra molto simile alla galleria di immagini Tiles di Joe. È un clone o cosa?
Ho usato Tiles per un po’ di tempo e mi piace molto. Quindi sì, potresti sicuramente dire che ne è fortemente influenzato . Tuttavia, molte cose sono diverse, per cui ho deciso di condividerlo. Di seguito trovi un elenco di alcune delle differenze.
Nessuna dipendenza.
Nessun jQuery.
Ordinamento orizzontale.
Le immagini piccole non rompono il layout.
Anteprima corretta durante la modifica.
Possibilità di selezionare più righe con a capo quando si aggiunge una galleria.
Utilizzo della funzione API decorateCookedElement invece di decorateCooked.
Suggerimenti e miglioramenti sono benvenuti!
Le immagini piccole appariranno nella galleria, ma non verrà creata una vista lightbox. Questo è il comportamento predefinito di Discourse. Tuttavia, è possibile modificare ciò che viene considerato un’immagine piccola modificando le impostazioni max image width e max image height. I valori predefiniti sono rispettivamente 690 px e 500 px.
Questo componente utilizza la versione API 0.8.42. Se non hai aggiornato da maggio 2020, devi effettuare un aggiornamento per poterlo utilizzare.
Componente fantastico. Stavo cercando da un po’ una sostituzione per la galleria immagini a riquadri!
Cosa ne pensi di aggiungere un’opzione per generare automaticamente una galleria da applicare a tutte le immagini? In pratica, ogni volta che ci sono 3 o più immagini senza altri elementi tra loro, la visualizzazione a galleria masonry viene attivata automaticamente. (Tiles Image Gallery ha provato qualcosa del genere nel loro ramo auto-tiles)
Sì, ho visto quel ramo. È una funzionalità davvero interessante. Non so se il modo in cui è implementata in Tiles funzioni per questo componente o se sia necessario del codice aggiuntivo. Ma ci darò sicuramente un’occhiata!
Se hai installato Tiles sul tuo sito e vuoi passare a Masonry, devi modificare l’attributo dei div delle gallerie in data-masonry-gallery in tutti i tuoi vecchi post con galleria. Questo è necessario se vuoi che i tuoi vecchi post con galleria continuino a essere visualizzati correttamente, ma non desideri avere entrambi i componenti installati.
Ho pensato di condividere come farlo, dato che ho effettuato il passaggio sul mio stesso sito. Forse può essere d’aiuto a qualcuno.
Il metodo più ovvio sarebbe modificare i post manualmente. Funziona finché non hai troppi post da modificare, anche se potrebbe comunque essere noioso trovare ogni singolo post. Ma non preoccuparti, Data Explorer è qui per salvare! Esegui il seguente SQL e otterrai esattamente ciò di cui hai bisogno.
SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'
Se ce ne sono troppi da modificare manualmente, puoi usare rake per sostituire ogni stringa. Per farlo, devi accedere al tuo server tramite SSH ed eseguire:
cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]
Puoi leggere di più su questa soluzione in questo post. Tieni presente l’avvertenza presente in quel post riguardo al comando rake posts:remap:
Esistono molto probabilmente anche altri modi per farlo. Ad esempio, se preferisci, potresti modificare il codice dei componenti in modo che cerchi entrambi gli attributi.
Quella funzione è praticamente finita. Ho modificato il codice da Tiles, devo solo eseguire alcuni test aggiuntivi (con diversi scenari/modifiche al sito). Cercherò di trovare il tempo per farlo presto, ma dovrebbe essere aggiunto entro una settimana. Se solo avessi più tempo .
Ora posso sostituire completamente il problematico “Tiles Image Gallery”.
@Heddson
Sono solo curioso: hai intenzione di creare un TC simile per sostituire anche “Slick Image Gallery”?
Il “Slick Image Gallery” presenta tutti gli stessi problemi del “Tiles Image Gallery”, come le immagini piccole che rompono il layout e l’anteprima che non gestisce correttamente la galleria, ecc.
Ho appena aggiornato il componente con la funzione galleria automatica. Dopo l’aggiornamento, puoi attivarla nelle impostazioni.
È possibile specificare le categorie e impostare anche il numero minimo di immagini necessarie (senza alcun altro elemento o riga vuota tra di esse) affinché venga creata automaticamente una galleria.
Ho anche aggiunto l’attributo div grid (o g) per uno stile a griglia (nonostante il nome del componente ) che imposta ogni riga a un’altezza fissa (basata sull’immagine più alta della riga). Potrebbe essere utile se hai immagini con quasi la stessa altezza.
Stiamo testando la versione stabile 2.8. La funzionalità categorie abilitate automaticamente non si attiva quando viene definita una categoria specifica. Abbiamo provato ad aggiungere lo slug della categoria e l’ID della categoria. Quando categorie abilitate automaticamente viene lasciato vuoto, funziona.
Hmm, è strano. Funziona sulla mia 2.9.0.beta1 ed è praticamente la stessa della 2.8 stabile. Dovrebbe essere aggiunto il nome della categoria. Ma vedrò se riesco a trovare qualcosa.
Questa funzionalità è ora integrata nel core di Discourse, consulta l’annuncio relativo alle griglie di immagini in Discourse.
→ Cosa intendi esattamente con ordinamento personalizzabile?
→ Questo componente sembra molto simile alla galleria di immagini Tiles di Joe. È un clone o cosa?
. Tuttavia, molte cose sono diverse, per cui ho deciso di condividerlo. Di seguito trovi un elenco di alcune delle differenze.Le immagini piccole appariranno nella galleria, ma non verrà creata una vista lightbox. Questo è il comportamento predefinito di Discourse. Tuttavia, è possibile modificare ciò che viene considerato un’immagine piccola modificando le impostazioni
.
) che imposta ogni riga a un’altezza fissa (basata sull’immagine più alta della riga). Potrebbe essere utile se hai immagini con quasi la stessa altezza.