Rimozione degli attributi di dimensione da immagini e didascalie
Questa domanda è un derivato della discussione precedente sulla rimozione degli attributi di dimensione dalle immagini. Il codice fornito in quel thread funziona molto bene, tranne per l'effetto collaterale che tutti gli shortcode [caption]
vengono rimossi dall'immagine.
Dopo diverse ore di analisi del codice core, ho trovato la causa. Il plugin TinyMCE wpeditimage, responsabile dell'aggiunta dello shortcode [caption]
, verifica la presenza degli attributi width nello shortcode e nel tag img
. Se non li trova, semplicemente rimuove la didascalia. Poiché questo avviene 'al volo' con javascript nell'editor TinyMCE, non riesco a pensare a nessun filtro WordPress che possa risolvere questo problema. Sarei comunque felice di essere smentito. :)
Come soluzione temporanea, ho utilizzato il seguente jQuery per rimuovere tutti gli attributi problematici lato client. Questo, insieme a un filtro su img_caption_shortcode
per evitare l'uso di uno stile width, sembra funzionare. Non è elegante, ma è una soluzione tampone per ora. Qualcuno ha un'idea migliore?
// Rimuove gli attributi width e height da img, video e object nell'articolo principale per avere immagini fluide
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');
Potrebbe non essere la risposta esatta che stai cercando, ma penso di aver trovato una soluzione alternativa piuttosto efficace.
Ho preso il seguente codice dal CSS del tema Twenty Eleven (che è perfettamente responsive secondo me):
/* Immagini */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Immagini fluide per articoli, commenti e widget */
}
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Assicura che le immagini con attributi height e width aggiunti da WordPress siano scalate correttamente */
}
img.size-full {
max-width: 97.5%;
width: auto; /* Previene lo stretching delle immagini full-size con attributi height e width in IE8 */
}
Questo è stato sufficiente per rendere responsive tutte le immagini (almeno quelle incorporate nel contenuto...).
Ora ho immagini responsive, ma quando uso le didascalie ho ancora lo stesso problema, che si verifica perché tinyMCE aggiunge un attributo style al contenitore della didascalia con la larghezza dell'immagine. Per risolvere, ho dovuto solo aggiungere questo al mio CSS:
.wp-caption { max-width: 100%; }
Fatto! Funziona bene per me, anche se potrebbe non funzionare per le immagini in evidenza.
Spero che questo possa aiutare qualcuno :-)

Non ho ancora avuto il tempo di testarlo completamente, ma si è già dimostrato molto utile in altre aree. Grazie per l'aiuto.
