Grid gallery dinamica in Webflow (senza codice)

Puoi costruire una grid gallery dinamica e guidata dal CMS in Webflow dove ogni immagine mantiene il suo rapporto d’aspetto esatto — niente ritagli, niente object-fit: cover, niente tagliato ai bordi. Puntala su una collection del CMS (o anche solo su una manciata di immagini statiche), dille quante colonne vuoi a ogni breakpoint, e al resto pensa il layout.

Il trucco a cui ricorrono quasi tutti i tutorial — object-fit: cover — taglia le immagini per farle entrare nella griglia. Va benissimo per le thumbnail, ma è la mossa sbagliata per una gallery vera, dove ogni dettaglio del lavoro è tutto il punto. Questa soluzione dimensiona invece ogni immagine in base alle sue proporzioni, così uno scatto largo in orizzontale e uno alto in verticale possono condividere la stessa riga restando entrambi perfettamente intatti.

È un componente solo-attributi: il codice è già scritto e arriva con il cloneable, quindi tutto ciò che fai è mettere qualche attributo sugli elementi giusti. Funziona con CMS o immagini statiche, con immagini semplici o lightbox, e puoi far girare quante gallery vuoi in una sola pagina.

Come funziona

La matematica dietro. Prendi una riga di, diciamo, tre immagini. Per ognuna lo script misura il rapporto d’aspetto (larghezza ÷ altezza), poi li somma tutti e tre. Ogni immagine riceve una porzione della riga pari al proprio rapporto diviso per quella somma — un numero minore di uno. Moltiplica quella porzione per lo spazio effettivamente disponibile (il 100% della riga meno i gap tra le immagini) e ottieni una larghezza che mantiene intatte le proporzioni dell’immagine mentre la riga resta perfettamente riempita. Le immagini più larghe ottengono colonne più larghe, quelle più alte colonne più strette, in automatico.

Cosa stili davvero. Le larghezze delle immagini non le imposti tu. Nel Designer dai all’elemento della gallery una larghezza intorno al 40–45% — solo perché gli elementi non si accavallino mentre lavori — e lo script la sovrascrive con il valore calcolato una volta che la pagina è live. Non scendere troppo sotto il 40%, però: Webflow sceglie quale misura di immagine responsive generare in base alla larghezza che vede nel Designer, quindi una larghezza minuscola gli fa servire un file piccolo e pixelato.

Colonne per breakpoint. Dichiari il numero di colonne con columns-desktop, columns-tablet, columns-landscape e columns-portrait sul wrapper della gallery. Fanno cascade esattamente come gli stili di Webflow: qualsiasi cosa imposti per un breakpoint più grande scende a quelli più piccoli finché uno di loro non fissa il proprio numero. Non impostare nulla e ogni breakpoint prende due colonne.

I due casi limite che gestisce per te. Primo, l’ultima riga. Quando le immagini non si dividono in modo esatto per il numero di colonne, un’unica immagine avanzata non ha nulla con cui essere dimensionata — così il codice inventa immagini fantasma con lo stesso rapporto d’aspetto (o, per due avanzi, la media dei due) e dimensiona quelle reali come se la riga fosse piena. Secondo, il flicker: le larghezze si possono calcolare solo una volta che ogni immagine è caricata, quindi c’è un breve lampo al primo paint. Coprilo con un semplice fade al caricamento della pagina sul wrapper della gallery, e volendo un’animazione allo scroll-into-view su ogni elemento per dare un po’ di vita.

Come si usa

1. Clona il progetto. Lo script, gli attributi e una gallery di esempio funzionante arrivano tutti nel cloneable di Webflow linkato qui sotto. Parti da lì, così i nomi degli attributi combaciano con il codice fin da subito.

2. Prepara i contenuti. Per una gallery da CMS, usa una collection con un campo multi-immagine e collega una collection list. Per le immagini statiche, va benissimo un semplice wrapper di immagini — non deve per forza venire dal CMS.

3. Marca il wrapper della gallery. Sulla collection list (o sul wrapper statico) imposta display: flex, direzione row e un gap a piacere, poi aggiungi fc-gallery="list".

4. Marca ogni elemento. Sull’elemento della gallery — la collection item, o ogni wrapper d’immagine statico — aggiungi fc-gallery="item", e dagli nel Designer una larghezza intorno al 40–45% così gli elementi non si impilano mentre progetti. Sul sito live lo script sostituisce quella larghezza.

5. Gestisci lightbox e immagini. Se usi un lightbox, imposta il suo display su block (di default è inline-block) così riempie l’elemento, collega ognuno alla sua immagine e dai loro un nome di gruppo condiviso così si sfogliano insieme. Imposta l’immagine stessa su display: block e width: 100%.

6. Scegli le colonne. Sul wrapper della gallery aggiungi columns-desktop, columns-tablet, columns-landscape e/o columns-portrait con i valori che vuoi. Ricorda che fanno cascade verso il basso, e lasciarli tutti via ti dà due colonne ovunque.

7. Ammorbidisci il caricamento (opzionale). Aggiungi un’interazione al caricamento della pagina che fa il fade del wrapper della gallery da opacity 0 a 100% per nascondere il flicker del calcolo iniziale, e uno slide/fade allo scroll-into-view su ogni elemento per far sentire viva la griglia.

8. Riusala liberamente. Duplica la gallery per un secondo layout con un diverso setup di colonne, o metti altre gallery su altre pagine — ognuna legge i propri attributi in modo indipendente.