Il mio sito in inglese è il risultato di un'operazione di import massivo da Blogger a WordPress. Come tale, la gestione delle immagini associate ai post risulta molto problematica. Circa il 90% degli articoli precedenti alla data del 23 marzo 2012 (giorno dell'importazione) presenta un'immagine inserita già nel contenuto del post. Per evitare duplicati, occorrerebbe operare sul filtro the_content e rimuovere la prima immagine di ciascun post. Un'altra soluzione è quella di un search and replace sul database. Alla fine ho trovato una soluzione interamente in jQuery. Vediamone i dettagli.
Ho salvato tutte le immagini usate in Blogger in una directory del mio sito. Poichè su questo sito utilizzo la mia utility
body_id(), posso fare direttamente riferimento all'ID dell'elemento body generato dalla funzione.
Questo ID mi serve per sapere se mi trovo su un post singolo. In questo caso, seleziono la categoria andando a rintracciare l'elemento HTML che ne contiene il nome. In base al nome della categoria, genero un'immagine il cui valore dell'attributo src cambia in base al tipo di categoria.
L'immagine sarà flottata e inserita prima del paragrafo che contiene il contenuto iniziale del post. Ecco il codice:
var setImagesOnPosts = function() {
var bodyID = $('body').attr('id');
if(bodyID.indexOf('post') != -1) {
var imagesURL = BASEURL + '/wp-content/uploads/' + imgDir;
var category = $('a:first', 'li.category').text();
var cat = category.toLowerCase();
var img = '';
switch(cat) {
case 'css':
img = 'css.png';
break;
case 'html5':
img = 'html5.png';
break;
case 'dom':
case 'javascript':
img = 'javascript.png';
break;
case 'php':
img = 'php.png';
break;
case 'xml':
img = 'xml.png';
break;
case 'wordpress':
img = 'wordpress.png';
break;
case 'jquery':
img = 'jquery.png';
break;
case 'accessibility':
img = 'accessibility.png';
break;
case 'usability':
img = 'usability.png';
break;
default:
break;
}
var fullURL = imagesURL + img;
var target = $('p', '#entry').eq(1);
if(target.is('p')) {
if(!$('img:first', target).length) {
$('<img/>').attr({src: fullURL, 'class': 'alignright'}).
insertBefore(target);
}
}
}
};
Sostituite le variabili BASEURL e imgDir con quelle del vostro sito e potrete vedere come questa soluzione risulti davvero comoda qualora il nostro sito presenti una situazione simile a quella descritta all'inizio di questo articolo.