Filtru pentru a elimina atributele de dimensiune ale imaginilor?

Question

Filtru pentru a elimina atributele de dimensiune ale imaginilor?

18 dec. 2010, 06:54:51

Vizualizări: 28.7K

Voturi: 36

Lucrez la un site bazat pe un șablon CSS cu lățime fluidă care setează o lățime maximă pentru imagini la lățimea coloanei care le conține și trebuie să elimin atributele inline de dimensiune width și height pe care WordPress le adaugă imaginilor.

Fac acest lucru cu imaginile mele reprezentative folosind acest filtru:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Știu că pot aplica același filtru pentru the_content, dacă este necesar. Dar există o modalitate mai bună de a face acest lucru?

goldenapples

9.26K

imagini filtre post thumbnails

Comentarii

Poate nu înțeleg întregul context al ceea ce încerci să faci fără a vedea conținutul tău real, dar nu se poate remedia asta folosind doar CSS? Dacă folosești o lățime maximă pe imaginile tale, ar trebui să poți rezolva problema înălțimii prin adăugarea unei proprietăți height: auto; la imaginile din conținut.

binaryorganic

1 mai 2012 20:11:32

@binaryorganic - Da, acum realizez că se poate... cel puțin în orice browser de care aș fi preocupat, proprietățile CSS width și height ar trebui să suprascrie atributele inline width. Când lucram inițial la asta, existau probleme în versiunile mai vechi de IE cu această funcționalitate, deși nu-mi amintesc exact care erau. Și indiferent, părea mai bine să nu afișezi o mulțime de proprietăți dimensionale suplimentare și să le suprascrii.

goldenapples

2 mai 2012 00:51:04

În primul rând, mulțumesc pentru codul foarte util. Funcționează perfect pentru a elimina atributele de lățime și înălțime din tag-ul img, dar din anumite motive pare să elimine și shortcode-ul de caption dacă există unul. Știe cineva de ce se întâmplă asta și cum să corectez problema?

Dominic P

2 nov. 2011 00:46:03

Poate ar trebui să postați acest lucru ca o întrebare separată? Pare suficient de distinct de întrebarea mea încât merită un răspuns propriu. Totuși, voi încerca să răspund... pentru oricine altcineva care va găsi acest răspuns și va avea aceeași problemă:

Problema ta este că funcția img_caption_shortcode, care procesează shortcode-ul de caption, necesită ca o lățime să fie specificată în atributele shortcode-ului de caption. Altfel, sare peste caption și returnează doar conținutul încapsulat în tag-urile [caption].

goldenapples

3 nov. 2011 14:43:38

Dacă dorești să poți folosi shortcode-uri de caption fără o lățime definită, va trebui să definești markup-ul caption-ului într-o funcție care este conectată la filtrul img_caption_shortcode. Să scriu codul pentru o astfel de funcție depășește însă posibilitățile unui comentariu aici.

goldenapples

3 nov. 2011 14:50:56

Arată celelalte 1 comentarii

Toate răspunsurile la întrebare

Comentarii

A trebuit să elimin \s din regex. După aceea, a funcționat bine. Cred că a fost din cauză că nu aveam un spațiu după ultimele ghilimele de la setarea înălțimii.

MattSlay

10 oct. 2012 17:55:02

@MattSlay Sunt doar eu care am o problemă cu modificarea permanentă a conținutului site-ului? O temă responsive nu ar trebui să modifice conținutul site-ului pentru a-l formata corect. Votez să eliminăm filtrul din image_send_to_editor și să-l adăugăm în the_content - ca în acest articol de blog. Asta separă logica de prezentare de conținut.

BFTrick

1 nov. 2012 15:53:50

@BFTrick - Mi se pare o chestiune de context. Pentru o temă responsive, aș fi de acord cu tine pentru că nu poți conta pe faptul că conținutul existent a fost procesat în acest fel și nu știi dacă următoarea temă instalată va avea nevoie de acele atribute de dimensiuni.

În cazul meu, construiam o aplicație în care tema era parte integrantă din conținut, așa că am ales metoda mai puțin intensivă din punct de vedere al procesării, anume procesarea imaginilor când erau adăugate inițial. Dar ai dreptate în ceea ce spui.

goldenapples

2 nov. 2012 01:43:44

Atenție: Acest răspuns afectează subtitrarea imaginilor în WordPress 3.5.1.

wired

25 apr. 2013 02:41:26

Am modificat puțin acest script. Mulțumesc pentru ajutor!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Doar pentru framework-ul Genesis
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Elimină și dimensiunile atașate ale imaginilor
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

MikeNGarrett

2.67K

5 ian. 2011 20:57:00

Comentarii

Atenție, totuși. Filtrarea the_content va afecta și videoclipurile YouTube și orice alt atribut width/height.

MikeNGarrett

5 ian. 2011 23:59:35

Adevărat, dar acesta poate fi un lucru bun într-un site responsive. Dacă cineva are nevoie să facă asta pentru imagini, atunci probabil are nevoie să facă același lucru și pentru alte tipuri de media.

BFTrick

1 nov. 2012 15:50:00

dacă setezi dimensiunea imaginii în functions.php ca "gallery"

add_image_size( 'gallery', 200, 120, true );

poți elimina lățimea și înălțimea pentru o dimensiune specifică a imaginii, cum ar fi "gallery":

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

Tohid Golkar

61

29 ian. 2013 08:40:42

Aplicarea acelui filtru la the_content îl va declanșa pentru tot conținutul. Acest lucru va fi eficient, dar ar putea afecta performanța și timpul de încărcare al site-ului tău. Ar fi mai bine dacă ai spune WordPress să nu insereze etichetele inline pentru lățime și înălțime atunci când introduci imaginile în primul rând.

Din păcate, scripturile care inserează efectiv imaginea sunt construite în JavaScript și interacționează cu editorul wysiwyg TinyMCE. Ar putea exista o modalitate de a te conecta direct la el, dar nu folosind apelurile standard add_filter().

EAMann

32.2K

18 dec. 2010 07:57:47

Comentarii

Nu ar funcționa un filtru pe image_send_to_editor aici?

t31os

18 dec. 2010 17:50:13

@t31os - Cred că asta era ceea ce căutam! Nu știu de ce nu am văzut acel hook înainte.

goldenapples

18 dec. 2010 18:17:09

Ei bine, sper că te va ajuta, se pare că ar putea face treaba... anunță-ne și spune-ne dacă a funcționat. :)

t31os

18 dec. 2010 18:43:23

@t31os Da, asta a funcționat! Mulțumesc! O să postez ca răspuns, dacă nu ajungi tu mai întâi.

goldenapples

19 dec. 2010 00:01:27

Du-te tu, prietene, nu mă deranjează, sunt bucuros că ai găsit o soluție... ;)

t31os

19 dec. 2010 00:04:49

goldenapples 9.26K · Accepted Answer · 2010-12-19T00:15:56Z

Mulțumesc tuturor!

Filtrul image_send_to_editor a fost cel pe care îl căutam... mulțumesc @t31os pentru indicare.

Iată funcțiile mele acum.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Aceasta elimină atributele de dimensiune inline de la imaginile preluate cu the_post_thumbnail() și previne adăugarea acestor atribute la imaginile noi adăugate în editor. Nu le elimină de la imaginile preluate prin wp_get_attachment_image sau alte funcții similare (nu există hook-uri acolo), dar acele cazuri pot fi procesate în fișierele de template atunci când este necesar.

goldenapples

9.26K

19 dec. 2010 00:15:56