Galleria immagini Masonry

Sono d’accordo con quello che stai dicendo. Non sono uno sviluppatore di Discourse, quindi non so cosa sia possibile o meno.

2 Mi Piace

Il bug di GitLab è stato risolto. Grazie per averlo segnalato @Jagster! :star:

2 Mi Piace

Solo per curiosità, come funziona questa parte:

    &::before,
    &::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }

Vedo che sposta le cose ma non lo capisco appieno :thinking: 2 pseudoelementi, senza larghezza, entrambi posizionati in seconda posizione…?

Ciao @chapoi!

Questi due pseudo-elementi servono a impedire che le colonne si uniscano. Non hanno larghezza poiché non sono destinati ad essere visti, ma nell’immagine sottostante sono rappresentati con linee blu.

Senza di essi, le colonne potrebbero iniziare a unirsi se le altezze delle colonne differissero troppo.

Gli elementi 3, 6 e 9 nell’immagine sopra sono impostati per essere nella colonna 3 (con la proprietà order impostata su 3). Ma se rimuovessimo gli pseudo-elementi, la colonna 3 inizierebbe direttamente sotto la colonna 2 (anche con order 3). Vedi immagine sotto. La “Colonna 3” è evidenziata in verde.

Questo perché flexbox controlla se c’è spazio rimasto nella colonna precedente (rispetto alla colonna più alta). Se c’è abbastanza spazio per adattare il primo elemento, lo inserirà lì.

Tuttavia, gli pseudo-elementi agiscono come colonne, quindi flexbox controllerà lo pseudo-elemento (invece della colonna reale) per lo spazio vuoto. E poiché gli pseudo-elementi hanno un’altezza del 100%, flexbox non troverà alcuno spazio vuoto e quindi la colonna 3 inizierà dove vogliamo che inizi.

Spero sia stato chiaro e comprensibile. :sweat_smile:

2 Mi Piace

Soluzione molto intelligente!

Purtroppo non mi è venuto in mente da solo. :grin:

Uno degli utenti nel forum che ospito ha sollevato il fatto che quando si ruota lo schermo di un dispositivo mobile (tablet, telefono), le immagini non vengono adattate correttamente alla nuova risoluzione. Ciò accade quando le immagini hanno un rapporto d’aspetto diverso (troppo alto) rispetto allo schermo. Quindi manca qualcosa sopra e sotto l’immagine. È possibile ottimizzare questo? Non ho idea se sia possibile o facilmente possibile.

Grazie per il feedback! Sì, non si aggiorna quando si gira il dispositivo. Non ho trovato una soluzione in quel momento, ma ci guarderò di nuovo.

1 Mi Piace

Purtroppo non ho trovato un modo abbastanza valido per gestire un dispositivo capovolto.

Un’altra cosa, se non avete visto l’annuncio, le griglie di immagini sono appena state aggiunte al core. Non funziona esattamente come questo componente del tema, ma ha un aspetto fantastico ed è fantastico averlo nel core. Dai un’occhiata a questo argomento:

6 Mi Piace

Ho creato un post con sei foto, utilizzando i tag della galleria di immagini masonry. Fin qui tutto bene. Poi ho aggiunto un link per ciascuna in modo che quando un utente clicca sull’immagine lo porti a un altro post. Quando l’ho fatto, è ancora apparso ok nel Onebox, ma il post effettivo ha perso il suo formato masonry e ha semplicemente visualizzato le immagini in sequenza.

È un bug o semplicemente qualcosa che non funzionerà a causa dei link?

1 Mi Piace

Ciao @Octoberon! Non è stato progettato per funzionare con link/onebox, quindi questo è probabilmente il problema. È stato progettato per aprire una lightbox quando fai clic sull’immagine. Anche se ho avuto una richiesta simile tempo fa… :thinking:

A proposito, come hai aggiunto il link all’immagine?

2 Mi Piace

Sì, mi chiedevo se fosse così. Per creare i collegamenti ho semplicemente evidenziato il testo dell’immagine e utilizzato il normale pulsante del collegamento ipertestuale nell’editor per incollare un link a un post diverso sullo stesso forum.

1 Mi Piace

Nella discussione sulla griglia di immagini qualcuno ha menzionato la possibilità di nascondere il pulsante del composer. Forse è già stato risolto con CSS o altro, ma ho pensato che potesse interessare anche ad altre persone. Forse non hai bisogno di un pulsante se hai l’auto create abilitato… :slight_smile: . Comunque, ora è stata aggiunta l’opzione per nascondere il pulsante.

1 Mi Piace

Qualcun altro ha problemi con la funzione automatica? L’abbiamo testata con la versione stabile 3.1 e 3.2 e in entrambi i casi non funziona e non vengono generate gallerie masonry nonostante le categorie siano impostate correttamente.

1 Mi Piace

Ciao @jrgong! Strano, a me sembra funzionare. Hai un link a un post che non funziona?

1 Mi Piace

Non sono riuscito a vedere quel post perché devi accedere. Mi dispiace.

Penso che forse a un certo punto avessi un accesso a quel sito di staging (giusto?), ma comunque non riesco più a trovarlo.

1 Mi Piace

Ciao

mi dispiace, questo link funziona: 350ml Challenge Just4Fun 🚀 Auf geht's 🚀 [Finale] - #91 von Hoppsi - Contests - Forum | Cannabisanbauen.net

2 Mi Piace

Suppongo che tu abbia abilitato automaticamente quella specifica categoria e impostato il numero minimo di immagini richieste a 3 (dato che hai tre immagini nel post).

Ho notato che c’era una riga vuota tra le immagini. Hai abilitato l’impostazione consenti automaticamente riga vuota?

1 Mi Piace

Sì, entrambe le impostazioni sono state abilitate per tutto il tempo

1 Mi Piace

Non sono riuscito a riprodurre questo problema. L’unica cosa che mi viene in mente è se forse c’è un altro componente del tema (o plugin) installato che non funziona bene con Masonry Image Gallery.

1 Mi Piace