WP 4.4. browser gambar responsif memilih yang "salah"

9

Saya senang bahwa WP 4.4. dikirimkan dengan fitur gambar responsif bawaan. Tapi aku tidak senang dengan itu.

Saya telah menyiapkan beberapa ukuran gambar khusus di functions.php:

add_image_size ('post-thumbnails', 600, 600, true);
add_image_size ('news-large', 1024, false);
add_image_size ('news-small', 500, false);
add_image_size ('3-col', 500, 375, true);
add_image_size ('presscutting', 600, 850, true);
add_image_size ('sedang-besar', 768, salah); // baru ditambahkan hari ini untuk dukungan perangkat
add_image_size ('gambar-fitur lengkap', 2000, false);
add_image_size ('galeri-gambar', 800, 600, true);

Seperti yang saya sangka, gambar yang tidak dipotong (cropping set to false) ditambahkan ke srcset. Sebuah gambar dihasilkan di frontend like (penghentian baris ditambahkan untuk keterbacaan yang lebih baik):

<img width = "2000" height = "1335"
src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
class = "attachment-full-feature-image ukuran-full-feature-image"
alt = "asdf"
srcset = "
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-300x200.jpg 300w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-768x513.jpg 768w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-1024x683.jpg 1024w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-500x334.jpg 500w " 
ukuran = "(max-width: 2000px) 100vw, 2000px">

Tapi sekarang masalah saya: Di layar saya, hanya gambar yang ditentukan dengan lebar 1024px yang ditampilkan, meskipun memiliki resolusi layar 1600px. Jadi semua gambar terlihat buram.

Bagaimana saya bisa membuat WP dan / atau browser saya menggunakan gambar 2kpx? Apakah saya harus menambahkan ukuran gambar baru, katakanlah 1280px, 1440px, 1600px, 1968px? Atau adakah cara yang lebih sederhana untuk memberi tahu WP / browser untuk menggunakan gambar yang lebih besar daripada menunjukkan versi yang buram dan terlalu kecil?

images responsive features rob_st
sumber
Bisakah Anda mencoba ini dengan cara yang benar untuk digunakan add_image_size? Anda selalu mengatur widthargumen ke false - ini harus berupa bilangan bulat (argumen ketiga).
fischi
Oke, lakukan itu dan tambahkan nilai tinggi pada 9999. Thumbnail yang diubah ukurannya. Tidak berhasil
rob_st
Default max_srcset_image_widthfilternya adalah 1600.
birgire
Senang mengetahui @birgire - tetapi itu tidak banyak membantu. Bagaimana cara mengubahnya (sepertinya belum ada dokumentasi) - dan apakah perubahan akan menyelesaikan masalah saya?
rob_st

Jawaban:

9

Mengenai dokumentasi ada posting blog ini di Make Blog:

Gambar Responsif di WordPress 4.4

Untuk meningkatkan batas 1600px yang disebutkan dalam komentar coba ini:

add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
    return 2000;
}, 10, 2);

Akhirnya sebagaimana telah disebutkan, Anda harus memperbaiki panggilan Anda ke add_image_size

add_image_size ('news-large', 1024, false);

perlu

add_image_size('news-large', 1024, 0, false);
pembuat kraftner
sumber
Terima kasih. Saya telah mengatur ketinggian ke 9999 - apakah ada bedanya? Saya akan mencobanya.
rob_st
Terima kasih, itu berhasil. Meskipun pada dasarnya jawaban yang sama dengan yang ini dan sebenarnya saya lebih suka fungsi bernama - saya menerima Anda karena Anda pertama kali :-)
rob_st
Saya pikir ini mungkin jawaban yang saya butuhkan, tetapi saya tidak tahu nilai apa yang $size_arrayseharusnya dimiliki.
Telarian
1

Saya memecahkan masalah yang sama dengan menambahkan ukuran ekstra ke srcsetdengan fungsi filter yang dapat Anda tambahkan di functions.php:

function filter_max_srcset( $max_width, $size_array ) {
    if ( $size_array[0] === 1800 ) {
        $max_width = 1800;
    }
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'filter_max_srcset', 10, 2 );
pengguna1895954
sumber