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.
Awesome component. I have been looking for a tiles image gallery replacement for a while!
What are your thoughts on adding an auto-gallery option to apply it to all images? Basically, whenever there are 3 or more without any other elements between each other, the masonry gallery view is enabled automatically. (Tiles Image Gallery tried something there in their auto-tiles branch)
Yeah, I saw that branch. That’s a really interesting feature. Don’t know if the way it’s implemented in Tiles works on this component, or if some other code is needed. But will definitely look into it!
If you have Tiles installed on your site and want to switch to Masonry, you need to change the attribute of the gallery divs to data-masonry-gallery on all of your old gallery posts. That’s if you want your old gallery posts to still render correctly, but don’t want to have both components installed.
Thought I share how you could do that, since I made the switch on my own site. Maybe it can be of some help to someone.
The most obvious way would be to edit the posts manually. That works as long as you don’t have too many posts you need to change, though it could still be a pain to find every posts. But don’t worry, data explorer to the rescue! Run the following SQL and you’ll get exactly what you need.
SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'
If there’s too many to edit manually, you could use rake to replace every string. To do that, you need to SSH into your sever and run:
cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]
You can read more about that solution on this post. Please note the warning from that post about the rake posts:remap command:
There are most likely also other ways to do it. For example, if you like to you could modify the components code so that it looks for both attributes.
That feature is kind of finished. Have modified the code from Tiles, just need to do some more tests (with different scenarios/site modifications). Will try to find the time to do it soon, but should be added within a week. If I only had more time .
The “Slick Image Gallery” have all the problems similar to “Tiles Image Gallery”, such as small image break the layout and preview can’t slow gallery correctly, etc.
I just updated the component with the auto gallery feature. After you update, you can enable it in the settings.
It’s possible to specify categories and also set the minimum number of images required (without any other element or empty line between them) for a gallery to be automatically created.
I also added the div attribute grid (or g) for a grid type of style (despite the name of the component ) that sets every row to a fixed height (as the rows highest image). Could be nice if you have images with almost the same height.
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
.
) that sets every row to a fixed height (as the rows highest image). Could be nice if you have images with almost the same height.