Come si può disporre in una griglia delle immagini in WordPress senza lasciare “buchi” tra esse? Per una delle soluzioni possibili si può pensare ad utilizzare jQuery. Vediamo un esempio di risoluzione di questa problematica, applicabile, anche, con poche sostituzioni in altri casi.
Il Problema
La richiesta è di riempire eventuali spazi vuoti in una galleria di immagini disposta a griglia disposta su 3 colonne.
Ad esempio se ho una galleria con 10 foto, ci sono 3 righe piene, e una con due spazi vuoti (nel senso che non ho le immagini corrispondenti e quindi debbo sostituirle con altro). Questi spazi vuoti si vuole che vengano riempiti con il logo dell’azienda.
jQuery è la risposta
Il ragionamento che ho fatto è questo:
- Conto quante immagini ci sono;
- Divido la quantità di immagini per tre e recupero il resto della divisione: ad esempio se divido 10 per 3, ho un resto di 1 e gli spazi da riempire sono due, se divido 11 per 3 ho il resto di 2 e ho uno spazio da riempire.
Ora supponiamo che le immagini sono inserite attraverso una lista non ordinata; andremo a contare tutti gli elementi di una lista.
Vediamo il codice e poi lo commento sotto:
var tot = jQuery('#gallery li').length;
var resto = tot%3;
if (resto==1) {
jQuery("#gallery li").last().after('<li class="gallery-item placeholder"></li><img src="logo.jpg" /><li class="gallery-item placeholder"><img src="logo.jpg" /></li>');
} else if (resto==2) {
jQuery("#gallery li").last().after('<li class="gallery-item placeholder"><img src="logo.jpg" /></li>');
}Nella variabile tot, viene assegnato il numero di <li> presenti nella pagina, grazie alla proprietà length.
Poi viene fatto il modulo del risultato per 3 (%), dove il modulo è l’operazione che restituisce il resto della divisione.
Infine viene fatto un controllo: se il modulo è uguale a uno, vuol dire che ci sono due spazi da riempire e quindi vengono inserite due immagini dopo (after()) l’ultimo elemento della lista (last()), se invece è uguale a due, viene inserita un’immagine.
