Usare l’attributo ALT dell’immagine per personalizzare una classe

Utilizzando il CMS WordPress capita spesso di dover assegnare classi diverse ad immagini messe insieme ed utilizzate grazie a plugin o sistemi di aiuto alla compilazione alle pagine (Page Builder come Visual Composer).
Il limite di questi comodi, ed a volte irrinunciabili strumenti, è spesso l’impossibilità di scendere nel dettaglio nella personalizzazione del layout grafico.
Per capire meglio dove voglio arrivare guardiamo un attimo l’immagine sotto il titolo.

Personalizzazione delle immagini utilizzate da “Image Mansory” di Visual Composer.

Il mosaico dell’immagine in evidenza di questo articolo è stato realizzato utilizzando  “Image Mansory” di VC.
Il grosso limite di questo elemento è proprio il fatto di trattare tutte le immagini allo stesso modo senza consentirti di definire una classe singola per ogni immagine.

Possiamo tuttavia bypassare questo problema utilizzando una funzione in javascript che aggiungerà all’immagine una classe utilizzando l’attributo alt che potrete tranquillamente definire nella media gallery di WordPress.

$(‘img’).each(function () {
$(this).closest(‘.grid-item ‘).addClass(this.alt);
});

Definiamo una funzione che aggiungerà una classe ad ogni immagine prendendo il nome dall’attributo alt dell’immagine stessa.
Per diversificare l’aspetto delle immagini basterà aggiungere ogni classe utilizzata nel foglio di stile.
Per diversificare i colori del img-title dell’esempio ho utilizzato il seguente stile:

.grid-item.Itinerari.Medicei .img-title {
background: rgb(231,177, 93,0.6);
background: rgba(231,177, 93,0.6);
}

.grid-item.Passeggiate.alla.scoperta.di.Firenze .img-title {
background: rgb(165,188, 56,0.6);
background: rgba(165,188, 56,0.6);
}

.grid-item.Sulle.Orme.dei.Grandi.Artisti .img-title {
background: rgb(209,105, 160,0.6);
background: rgba(209,105, 160,0.6);
}

.grid-item.Itinerari.Tematici .img-title {
background: rgb(51,83, 79,0.6);
background: rgba(51,83, 79,0.6);
}
.grid-item.L\27 Oltrarno .img-title {
background: rgb(160,199, 155,0.6);
background: rgba(160,199, 155,0.6);
}

.grid-item.I.Grandi.Musei .img-title {
background: rgb(94,153, 146,0.6);
background: rgba(94,153, 146,0.6);
}