Eliminarea Atributelor de Dimensiune pentru Imagini și Caption
Această întrebare este o ramificare a acestei discuții despre eliminarea atributelor de dimensiune din imagini. Codul soluției oferit în acel thread funcționează foarte bine, cu excepția faptului că are efectul secundar neplăcut că orice shortcode [caption]
este eliminat din imagine.
După câteva ore de analiză a codului de bază, am găsit cauza acestui lucru. Plugin-ul TinyMCE wpeditimage, care este responsabil pentru adăugarea shortcode-ului [caption]
, verifică prezența atributelor de lățime în shortcode și în tag-ul img
. Dacă nu le găsește, pur și simplu elimină caption-ul. Deoarece acest lucru se întâmplă 'în timp real' cu javascript în editorul TinyMCE, nu mă pot gândi la niciun filtru WordPress care să rezolve această problemă. Aș fi foarte fericit să fiu contrazis însă. :)
Ca o notă finală, soluția mea temporară a fost să folosesc următorul jQuery pentru a elimina toate tag-urile problematice pe partea de client. Acest lucru, împreună cu un filtru pe img_caption_shortcode
pentru a preveni utilizarea unui stil de lățime acolo, pare să facă treaba. Nu este elegant, dar este o soluție temporară pentru moment. Are cineva o idee mai bună?
// Elimină atributele width și height din img, video și object în articolul principal pentru imagini fluide
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');
poate nu este exact răspunsul pe care îl cauți, dar cred că am găsit o soluție destul de bună.
Am luat următorul cod din CSS-ul temei twenty-eleven (care este destul de responsive, după părerea mea):
/* Imagini */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Imagini fluide pentru articole, comentarii și widget-uri */
}
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Asigură-te că imaginile cu atribute de înălțime și lățime adăugate de WordPress sunt scalate corect */
}
img.size-full {
max-width: 97.5%;
width: auto; /* Previne întinderea imaginilor full-size cu atribute de înălțime și lățime în IE8 */
}
Aceasta a fost suficient pentru a face toate imaginile responsive (cel puțin cele încorporate în conținut...) Acum am imagini responsive, dar când este folosită o legendă (caption), încă am aceeași problemă, care apare pentru că tinyMCE adaugă un atribut de stil containerului de legendă cu lățimea imaginii. Pentru a rezolva asta, tot ce a trebuit să fac a fost să adaug acest lucru în CSS-ul meu:
.wp-caption { max-width: 100%; }
Gata! Funcționează bine pentru mine, deși s-ar putea să nu funcționeze pentru imaginile evidențiate (featured images).
Sper că acest lucru ajută pe cineva :-)

Încă nu am avut timp să testez asta pe deplin, dar s-a dovedit deja destul de util în alte zone. Mulțumesc pentru ajutor.
