Rimozione degli attributi di dimensione da immagini e didascalie

4 nov 2011, 22:18:13
Visualizzazioni: 16.4K
Voti: 9

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');
5
Commenti

Hmmm... è un requisito poter utilizzare l'editor visuale? Se utilizzi solo l'editor HTML, un filtro su img_caption_shortcode funziona bene...

goldenapples goldenapples
6 nov 2011 16:10:01

@goldenapples, sì, non voglio perdere l'editor visuale perché avrò persone non tecniche che modificheranno il sito. Grazie comunque per il suggerimento. Hai altre idee?

Dominic P Dominic P
8 nov 2011 02:36:19

Dominic, puoi fornire il codice per "un filtro su img_caption_shortcode per evitare che venga utilizzato uno stile width"? Questo è esattamente ciò di cui ho bisogno, ma non so come scrivere quel filtro.

User User
16 dic 2011 17:15:03

@Wendy, hmm, non posso incollare tutto in un commento. Se vuoi fare un'altra domanda e darmi il link, la posterò come risposta.

Dominic P Dominic P
19 dic 2011 00:51:47

Nel caso non volessi passare attraverso tutto questo, ho sostanzialmente solo modificato l'esempio del Codex.

Dominic P Dominic P
19 dic 2011 00:58:45
Tutte le risposte alla domanda 1
6
18

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 :-)

3 gen 2012 12:33:44
Commenti

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

Dominic P Dominic P
21 feb 2012 08:45:04

è stato un piacere :-)

Talbatz Talbatz
22 feb 2012 13:19:08

Testato in IE9, non sembra funzionare come previsto!

Kuldeep Daftary Kuldeep Daftary
24 giu 2013 14:16:03

Questo è in conflitto con i vecchi browser IE

Tosh Tosh
23 giu 2014 13:29:05

soluzione davvero ottima! grazie

emjay emjay
26 ott 2015 13:53:45

Questo mi ha portato dove volevo, anche se ho semplicemente usato width: auto e height: auto.

Kalnode Kalnode
7 ago 2018 19:38:40
Mostra i restanti 1 commenti