Se hai molte immagini in un post di Discourse, ora puoi farle disporre automaticamente in una bella griglia. Tutto ciò che devi fare è racchiuderle tra i tag [grid] ... [/grid] e le immagini saranno disposte ordinatamente. Questa è una funzionalità principale a partire da questo commit, abilitata su tutte le istanze di Discourse.
Questa funzionalità è simile ad alcuni componenti del tema (Masonry Image Gallery, Tiles Image Gallery). La differenza principale è che la disposizione delle immagini nella griglia si allineerà sia in alto che in basso dell’elemento. Alcune note tecniche aggiuntive:
su mobile, la griglia è predefinita a 2 colonne, su desktop a 3
se ci sono esattamente 4 elementi nella griglia, le immagini saranno disposte in 2 colonne
è possibile utilizzare anche elementi non immagine (come i video), ma i risultati non saranno perfettamente allineati
gli elementi nella griglia sono disposti per garantire che le altezze delle colonne siano il più vicine possibile tra loro, pertanto l’ordine delle immagini non viene sempre mantenuto
Abilitare o disabilitare la griglia può anche essere fatto facendo clic su una piccola icona di attivazione accanto alla prima immagine in un gruppo di immagini nell’anteprima del compositore:
Ottima domanda. Questa nuova funzionalità principale non è incompatibile con il componente del tema Masonry Image Gallery, ovvero entrambi non possono funzionare contemporaneamente.
Se si desidera migrare i post dall’approccio della galleria Masonry al nuovo approccio principale, è necessario eseguire uno script che aggiorni i contenuti raw dei post da
Corretto, non dovrebbe influire. Credo che la prima immagine trovata nel post venga scelta come miniatura (esclusi avatar, emoji e simili). Inoltre, non riesco a immaginare uno scenario in cui la prima immagine caricata non sia la prima immagine nella griglia (il riordino può avvenire solo per le immagini successive nell’elenco).
Hmm, sì, nell’editor di composizione attualmente funziona solo con gli upload. (Ovvero, incollare un URL a un’immagine e racchiuderlo tra tag [grid] non funziona neanche nell’editor di composizione.)
Purtroppo, no, questo non funziona con le pagine pubblicate. Anche funzionalità simili basate su Javascript per i post non funzionano con le pagine pubblicate (lightbox, sondaggi, indice dei contenuti).
Con l’impostazione auto abilitata… Questo non contiene il <div> data-masonry-gallery</div> in raw, quindi penso che lo script non funzionerà. Ma in questo caso non sono in conflitto tra loro.
Ci sono piani per rendere le griglie automatiche? Se ciò accadesse, potrei semplicemente rifare il rebake dei post e mantenere il layout della griglia. Fino ad allora, penso di poter nascondere il pulsante della griglia e utilizzare il componente del tema in sicurezza.
Qualcuno in CDCK ha influenza sugli sviluppatori di Chrome? Supporto CSS Masonry per Grid?
Masonry dovrebbe già essere una cosa CSS. È uno dei pochi layout che ti permette di rispettare diversi rapporti d’aspetto di collezioni di immagini (o qualsiasi contenuto di elementi) in modo gradevole.
È uno spreco e inutile avere questo in esecuzione come javascript ovunque…
Sono entusiasta del supporto di Safari per masonry, hanno una migliore esperienza nel portare le funzionalità da bozza –> sperimentale –> completamente supportata. Il supporto di Firefox per masonry è dietro una flag da oltre 2 anni. Il supporto di Safari sarà probabilmente il principale motore affinché Chrome tenga il passo.
Sì, ma non senza tag [grid]. Convertire automaticamente le immagini in una griglia senza tag violerebbe le specifiche di CommonMark, preferiamo di gran lunga evitarlo. (Nella mia prima bozza interna di questa funzionalità, ho iniziato con una griglia automatica).
Invece, quello che ho pensato come prossimo passo qui è che potremmo aggiungere automaticamente i wrapper [grid] ai caricamenti di più immagini, probabilmente 3 o più caricamenti. Questo sarebbe particolarmente utile per i caricamenti da dispositivi mobili, aggiungere tag manualmente da dispositivi mobili è goffo e ci sono buone probabilità che se stai caricando 3 o più immagini contemporaneamente dal tuo telefono, si tratta di foto e candidati ragionevoli per un layout a griglia.
Non abbiamo ancora piani su quando lo aggiungeremo, ma è certamente qualcosa che vorremmo fare.
Dovrebbe comunque essere possibile generare l’HTML statico dal JavaScript e pubblicare il DOM “cotto” per abilitare una serie di funzionalità utili come questa griglia e il TOC
L’HTML renderizzato da solo non è sufficiente. La griglia, il TOC e funzionalità simili necessitano anche del JS che interagisce con l’HTML per creare tale funzionalità. E quel JS risiede nell’app Ember, non può essere facilmente estratto per le pagine non pubblicate da Ember.
Ho appena giocato con questo ieri e mi è stato consigliato di condividere qui i miei feedback e pensieri su questo thread…
Mi piace che sia “automatico” nel senso che imposta una griglia da solo.
Potrebbe essere una bella funzionalità aggiuntiva ordinare le immagini senza dover copiare/incollare le immagini nella lista, magari aggiungendo semplicemente dei numeri all’inizio di ogni immagine?
Mi piace che si possa facilmente disattivare la griglia nell’anteprima, ma per farla riapparire è necessario reinserire il codice, sembra un’area per un’esperienza migliorata avere l’icona della griglia che appare quando sono state aggiunte più di un’immagine per poterla attivare/disattivare secondo necessità.
Una possibile funzionalità futura finale sarebbe la possibilità di scegliere un’immagine particolare da “evidenziare” o mettere in risalto all’interno della griglia in modo che appaia più grande delle altre o si distingua in qualche modo.
Tutto sommato, comunque, un’ottima nuova opzione per aggiungere più immagini senza che le immagini prendano il sopravvento su un post
questo problema:
Supporto CSS Masonry ora per Chrome ed Edge!