Filtro per rimuovere gli attributi dimensionali delle immagini?

Question

Filtro per rimuovere gli attributi dimensionali delle immagini?

18 dic 2010, 06:54:51

Visualizzazioni: 28.7K

Voti: 36

Sto lavorando su un sito basato su un template CSS a larghezza fluida che imposta una larghezza massima sulle immagini in base alla larghezza della colonna che le contiene, e ho bisogno di rimuovere gli attributi dimensionali inline width e height che WordPress aggiunge alle immagini.

Lo sto facendo con le mie immagini in evidenza usando questo filtro:

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

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

So che posso applicare lo stesso filtro a the_content, se necessario. Ma c'è un modo migliore per farlo?

goldenapples

9.26K

immagini filtri immagini in evidenza

Commenti

Forse non vedo il quadro completo di quello che stai cercando di fare senza vedere il tuo contenuto effettivo, ma non si può risolvere questo problema usando solo CSS? Se stai utilizzando una max-width sulle tue immagini, dovresti essere in grado di risolvere il problema dell'altezza aggiungendo un height: auto; alle immagini del contenuto.

binaryorganic

1 mag 2012 20:11:32

@binaryorganic - Sì, ora mi rendo conto che si può... almeno in qualsiasi browser di cui mi preoccuperei, le proprietà CSS width e height dovrebbero sovrascrivere gli attributi inline width. Quando lavoravo originariamente a questo, c'erano problemi nelle versioni più vecchie di IE con questa funzionalità, anche se non ricordo esattamente quali fossero. E in ogni caso, sembrava meglio non produrre un sacco di proprietà dimensionali aggiuntive e doverle sovrascrivere.

goldenapples

2 mag 2012 00:51:04

Innanzitutto, grazie per il codice molto utile. Funziona perfettamente per rimuovere gli attributi width e height dal tag img, ma per qualche motivo sembra anche rimuovere lo shortcode della didascalia se presente. Qualcuno sa perché succede questo e come correggerlo?

Dominic P

2 nov 2011 00:46:03

Forse dovresti pubblicare questo come una domanda a sé stante? Sembra sufficientemente distinto dalla mia da meritare una risposta propria. Tuttavia, cercherò di rispondere... per chiunque altro trovi questa risposta e abbia lo stesso problema:

Il tuo problema è che la funzione img_caption_shortcode, che elabora lo shortcode della didascalia, richiede che venga specificata una larghezza negli attributi dello shortcode della didascalia. Altrimenti, salta completamente la didascalia e restituisce solo il contenuto racchiuso all'interno dei tag dello shortcode [caption].

goldenapples

3 nov 2011 14:43:38

Se vuoi essere in grado di utilizzare gli shortcode delle didascalie senza una larghezza definita, dovrai definire il markup della didascalia in una funzione collegata al filtro img_caption_shortcode. Scrivere il codice per una funzione del genere è più di quanto possa rientrare nei commenti qui, però.

goldenapples

3 nov 2011 14:50:56

Mostra i restanti 1 commenti

Tutte le risposte alla domanda

Commenti

Ho dovuto rimuovere \s dalla regex. Dopo di che, ha funzionato bene. Penso che fosse perché non avevo uno spazio finale dopo l'ultimo doppio apice nell'impostazione dell'altezza.

MattSlay

10 ott 2012 17:55:02

@MattSlay Sono solo io ad avere problemi con la modifica permanente del contenuto del sito? Un tema responsive non dovrebbe dover modificare il contenuto del sito web per farlo formattare correttamente. Voto per rimuovere il filtro da image_send_to_editor e invece aggiungerlo a the_content - come in questo post del blog. Questo separa la logica di presentazione dal contenuto.

BFTrick

1 nov 2012 15:53:50

@BFTrick - Mi sembra una questione di contesto. Per un tema responsive, sarei d'accordo con te perché non puoi dipendere dal fatto che il contenuto esistente sia stato processato in questo modo, e non sai se il prossimo tema installato avrà bisogno di quegli attributi di dimensione.

Nel mio caso, stavo costruendo un'applicazione in cui il tema era integrale al contenuto, quindi ho scelto il metodo meno intensivo in termini di processore di elaborare le immagini quando venivano aggiunte per la prima volta. Ma fai un buon punto.

goldenapples

2 nov 2012 01:43:44

Attenzione: questa risposta interrompe le didascalie delle immagini in WordPress 3.5.1.

wired

25 apr 2013 02:41:26

Ho modificato un po' questo script. Grazie per l'aiuto!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Solo per il framework Genesis
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Rimuove anche le dimensioni delle immagini allegate
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 gen 2011 20:57:00

Commenti

Attenzione però. Filtrare the_content filtrerà anche i video di YouTube e qualsiasi altro attributo width/height.

MikeNGarrett

5 gen 2011 23:59:35

Vero, ma potrebbe essere una buona cosa in un sito responsive. Se è necessario farlo per le immagini, probabilmente è necessario farlo anche per altri media.

BFTrick

1 nov 2012 15:50:00

Se hai impostato la dimensione dell'immagine in function.php come "gallery"

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

puoi rimuovere la larghezza e l'altezza per una specifica dimensione dell'immagine come "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 gen 2013 08:40:42

Applicare quel filtro a the_content lo attiverà per tutti i contenuti. Questo sarà efficace, ma potrebbe influenzare le prestazioni e il tempo di caricamento del tuo sito. Sarebbe meglio se dicessi a WordPress di non inserire i tag inline per larghezza e altezza quando inserisci le immagini in primo luogo.

Sfortunatamente, gli script che effettivamente inseriscono l'immagine sono costruiti in JavaScript e interagiscono con l'editor wysiwyg TinyMCE. Potrebbe esserci un modo per agganciarsi direttamente, ma non utilizzando le chiamate standard add_filter().

EAMann

32.2K

18 dic 2010 07:57:47

Commenti

Non sarebbe più adatto un filtro su image_send_to_editor in questo caso?

t31os

18 dic 2010 17:50:13

@t31os - Penso sia proprio quello che cercavo! Non so come abbia fatto a non vedere quell'hook prima.

goldenapples

18 dic 2010 18:17:09

Spero davvero ti sia utile, sembra possa fare al caso tuo...facci sapere come va. :)

t31os

18 dic 2010 18:43:23

@t31os Sì, ha funzionato! Grazie! Lo posterò come risposta, a meno che tu non ci arrivi prima.

goldenapples

19 dic 2010 00:01:27

Fai pure amico, non sono troppo preoccupato, felice che tu abbia trovato una soluzione... ;)

t31os

19 dic 2010 00:04:49

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

Grazie a tutti!

Il filtro image_send_to_editor era quello che stavo cercando... grazie @t31os per averlo segnalato.

Ecco le mie funzioni ora.

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;
}

Questo rimuove gli attributi di dimensione inline dalle immagini recuperate con the_post_thumbnail() e impedisce che questi attributi vengano aggiunti alle nuove immagini inserite nell'editor. Non li rimuove dalle immagini recuperate tramite wp_get_attachment_image o altre funzioni correlate (non ci sono hook lì dentro), ma quei casi possono essere gestiti nei file dei template quando necessario.

goldenapples

9.26K

19 dic 2010 00:15:56