Eliminarea Atributelor de Dimensiune pentru Imagini și Caption

4 nov. 2011, 22:18:13
Vizualizări: 16.4K
Voturi: 9

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

Hmmm... este o cerință să poți folosi editorul vizual? Dacă folosești doar editorul HTML, un filtru pe img_caption_shortcode funcționează bine...

goldenapples goldenapples
6 nov. 2011 16:10:01

@goldenapples, da, nu vreau să renunț la editorul vizual, deoarece voi avea persoane ne-tehnice care vor edita site-ul. Totuși, mulțumesc pentru sugestie. Mai ai alte idei?

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

Dominic, poți să furnizezi codul pentru "un filtru pe img_caption_shortcode pentru a preveni utilizarea unui stil de lățime acolo"? Exact acest lucru am nevoie, dar nu știu cum să scriu acel filtru.

User User
16 dec. 2011 17:15:03

@Wendy, hmm, nu pot să lipesc totul într-un comentariu. Dacă vrei să pui o altă întrebare și să-mi dai un link către ea, o să postez ca răspuns.

Dominic P Dominic P
19 dec. 2011 00:51:47

În caz că nu ai vrut să treci prin toate astea, practic doar am modificat exemplul din Codex.

Dominic P Dominic P
19 dec. 2011 00:58:45
Toate răspunsurile la întrebare 1
6
18

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

3 ian. 2012 12:33:44
Comentarii

Î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.

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

cu plăcere :-)

Talbatz Talbatz
22 feb. 2012 13:19:08

Am testat în IE9, nu pare să funcționeze cum trebuie!

Kuldeep Daftary Kuldeep Daftary
24 iun. 2013 14:16:03

Acest lucru intră în conflict cu vechile browsere IE

Tosh Tosh
23 iun. 2014 13:29:05

soluție foarte bună! mulțumesc

emjay emjay
26 oct. 2015 13:53:45

Asta m-a ajutat să ajung unde aveam nevoie, deși am folosit doar width: auto și height: auto.

Kalnode Kalnode
7 aug. 2018 19:38:40
Arată celelalte 1 comentarii