Saring untuk menghapus atribut dimensi gambar?


35

Saya sedang mengerjakan sebuah situs berdasarkan pada template cairan lebar CSS yang menetapkan lebar-maksimum pada gambar dengan lebar kolom yang memuatnya, dan saya perlu menghapus atribut dimensi lebar dan tinggi sebaris yang ditambahkan WordPress ke gambar.

Saya melakukannya dengan gambar unggulan saya dengan filter ini:

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

Aku tahu aku bisa menerapkan filter yang sama untuk the_content , jika perlu. Tetapi apakah ada cara yang lebih baik untuk melakukan ini?


Pertama, terima kasih untuk kode yang sangat membantu. Ini berfungsi dengan baik untuk menghapus atribut lebar dan tinggi dari tag img, tetapi untuk beberapa alasan tampaknya juga menghapus kode pendek teks jika ada. Adakah yang tahu mengapa ini dan bagaimana cara memperbaikinya?
Dominic P

1
Mungkin Anda harus memposting ini sebagai pertanyaannya sendiri? Tampaknya cukup berbeda dari milik saya sehingga layak untuk ditanggapi sendiri. Namun demikian, saya akan mencoba dan menjawab ... untuk orang lain yang menemukan jawaban ini dan memiliki masalah yang sama: Masalah Anda adalah fungsinya img_caption_shortcode, yang memproses kode pendek teks, mengharuskan lebar ditentukan dalam atribut kode pendek teks. Jika tidak, itu akan melewatkan teks sama sekali dan hanya mengembalikan konten yang dibungkus dalam [caption]tag kode pendek.
goldapples

Jika Anda ingin dapat menggunakan kode pendek teks tanpa lebar yang ditentukan, Anda harus menentukan markup teks dalam fungsi yang terhubung pada filter img_caption_shortcode. Menulis kode untuk fungsi seperti itu lebih dari yang bisa saya masukkan ke dalam komentar di sini.
Goldenappples

@goldenapples, terima kasih atas balasan bermanfaat Anda. Saya telah melakukan seperti yang Anda sarankan dan mengajukan pertanyaan baru di sini: wordpress.stackexchange.com/questions/32931/… . Masukan apa pun tentang itu akan sangat dihargai. Seperti yang saya jelaskan dalam pertanyaan, saya tidak yakin filter pada img_caption_shortcodeakan cukup menyelesaikan masalah.
Dominic P

1
Mungkin saya kehilangan gambaran yang lebih besar tentang apa yang Anda coba lakukan tanpa melihat konten Anda yang sebenarnya, tetapi tidak dapatkah ini diperbaiki menggunakan CSS saja? Jika Anda menggunakan lebar maksimum pada gambar Anda, Anda harus dapat mengatasi masalah ketinggian dengan menambahkan ketinggian: otomatis; ke gambar konten Anda.
binaryorganic

Jawaban:


36

Terima kasih semuanya!

The image_send_to_editor Filter adalah salah satu yang saya cari ... thanks @ t31os untuk menunjuk keluar.

Inilah fungsi saya sekarang.

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

Ini menghapus atribut dimensi sebaris dari gambar yang diambil dengan the_post_thumbnail(), dan mencegah atribut tersebut ditambahkan ke gambar baru yang ditambahkan ke editor. Tidak menghapusnya dari gambar yang diambil melalui wp_get_attachment_imageatau fungsi terkait lainnya (tidak ada kait di sana), tetapi kasing tersebut dapat diproses dalam file templat bila perlu.


1
Saya harus menghapus \ 's dari regex. Setelah itu, itu bekerja dengan baik. Saya pikir itu karena saya tidak memiliki ruang tambahan setelah doublequote terakhir pada pengaturan ketinggian.
MattSlay

1
@MattSlay Apakah hanya saya yang memiliki masalah dengan memodifikasi konten situs secara permanen? Tema responsif seharusnya tidak perlu mengubah konten situs web untuk memformatnya dengan benar. Saya memilih untuk menghapus filter image_send_to_editordan bukannya menambahkannya the_content- seperti posting blog ini . Ini memisahkan logika presentasi dari konten.
BFTrick

1
@ BFTrick - Sepertinya masalah konteks bagi saya. Untuk tema yang responsif, saya setuju dengan Anda karena Anda tidak dapat bergantung pada konten yang ada yang telah diproses dengan cara ini, dan Anda tidak tahu apakah tema berikutnya yang dipasang akan memerlukan atribut dimensi tersebut. Dalam kasus saya, saya sedang membangun sebuah aplikasi di mana tema merupakan bagian integral dari konten, jadi saya memilih metode yang kurang intensif dalam memproses gambar ketika mereka pertama kali ditambahkan. Tetapi Anda membuat poin yang bagus.
Goldenappples

2
Peringatan: Jawaban ini memecah keterangan gambar di WordPress 3.5.1.
kabel

5

Dimodifikasi skrip ini sedikit. Terima kasih untuk bantuannya!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

5
Tapi hati-hati. Memfilter konten_ juga akan memfilter video youtube dan atribut lebar / tinggi lainnya.
MikeNGarrett

1
Benar, tapi itu mungkin hal yang baik di situs yang responsif. Jika seseorang perlu melakukannya untuk gambar maka orang mungkin juga perlu melakukannya untuk media lain.
BFTrick

1

jika Anda mengatur ukuran gambar di function.php sebagai "galeri"

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

Anda dapat menghapus lebar dan tinggi ukuran gambar tertentu seperti "galeri":

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

0

Menerapkan filter itu untuk the_contentmengaktifkannya untuk semua konten. Ini akan efektif, tetapi dapat memengaruhi kinerja dan waktu buka situs Anda. Akan lebih baik jika Anda memberi tahu WordPress untuk tidak memasukkan inline width dan tag tinggi ketika Anda memasukkan gambar di tempat pertama.

Sayangnya, skrip yang benar-benar menyisipkan gambar dibangun dalam JavaScript dan berinteraksi dengan editor TinyMCE wysiwyg. Mungkin ada cara untuk menghubungkannya secara langsung, tetapi tidak menggunakan add_filter()panggilan standar .


1
Tidakkah filter image_send_to_editorberfungsi di sini?
t31os

@ t31os - Saya pikir itulah yang saya cari! Tidak tahu mengapa saya tidak melihat kait itu sebelumnya.
goldapples

Yah saya tentu berharap ini membantu, sepertinya itu bisa melakukan trik ... melaporkan kembali dan beri tahu kami. :)
t31os

@ t31os Yup, itu berhasil! Terima kasih! Saya akan mempostingnya sebagai jawaban, kecuali Anda mendapatkannya terlebih dahulu.
goldenapples

2
Anda pergi untuk itu sobat, saya tidak terlalu sibuk, senang Anda dapat menemukan solusi ...;)
t31os
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.