Ukuran gambar kecil / gambar kecil - Pangkas rasio aspek meskipun sumber gambar lebih kecil dari dimensi yang ditetapkan

11

Biasanya ketika Anda menetapkan ukuran gambar khusus menggunakan hard crop - misalnya add_image_size( 'custom-size', 400, 400, true );- Anda mendapatkan hasil berikut:

  • # 1 Gambar yang diunggah: 600x500> Thumbnail: 400x400.
  • # 2 Gambar yang diunggah: 500x300> Thumbnail: 400x300.
  • # 3 Gambar yang diunggah: 300x200> Thumbnail: 300x200.

Namun yang ingin saya lakukan adalah ketika gambar yang diunggah lebih kecil dari lebar yang ditetapkan, atau tinggi, atau keduanya, dari ukuran gambar khusus, misalnya contoh # 2 & # 3 di atas - alih-alih gambar yang hanya dipotong agar sesuai dalam dimensi tersebut - itu juga dipotong agar sesuai dengan rasio aspek mereka (yang dalam hal ini adalah 1: 1) seperti:

  • # 1 Gambar yang diunggah: 600x500> Thumbnail: 400x400.
  • # 2 Gambar yang diunggah: 500x300> Thumbnail: 300x300 .
  • # 3 Gambar yang diunggah: 300x200> Thumbnail: 200x200 .

Saya tidak percaya ini mungkin menggunakan opsi add_image_size standar, tetapi apakah mungkin menggunakan fungsi yang berbeda, atau pengait yang memodifikasi fungsi add_image_size?

Atau ada plugin yang menambahkan fungsi ini?

Setiap informasi yang dapat diberikan siapa pun akan sangat dihargai.

images cropping Joey Joe Joe Junior Shabadoo
sumber
Untuk lebih memperjelas pertanyaan saya. Saya ingin dapat mengkonfigurasi add_image_sizeuntuk melakukan apa yang saya jelaskan di atas. Saya cukup yakin ini tidak mungkin menggunakan parameter standar, tapi saya berharap itu mungkin menggunakan hook, action, atau filter.
Joey Joe Joe Junior Shabadoo

Jawaban:

2

Anda benar bahwa itu tidak berfungsi seperti itu.

Jika OK jika memikirkan pertanyaan Anda sebaliknya, Anda bisa mendapatkan hasil yang tepat di peramban modern menggunakan pilihan ukuran gambar dan gambar responsif.

Jika Anda menggunakan kode seperti ini:

add_image_size( 'custom-size-small', 200, 200, true );
add_image_size( 'custom-size-medium', 300, 300, true );
add_image_size( 'custom-size-large', 400, 400, true );

... dan di templat Anda, sesuatu seperti:

wp_get_attachment_image( $image_ID, 'custom-size-small' )

... lalu secara default (WP 4.4 dan yang lebih baru) Anda akan mendapatkan tag gambar dengan versi terkecil dari set Anda sebagai srcdan ukuran yang lebih besar dalam srcsetatribut, yang akan diambil oleh browser yang lebih baru dan menampilkan versi yang sesuai terbesar.

Jadi, jika gambar tertentu tidak memiliki versi yang lebih besar, itu tidak masalah. Gambar yang 300x200akan memiliki 200x200versi dibuat, versi itu akan menjadi satu-satunya di HTML dan semua browser akan menunjukkannya.

Saya mengerjakan ini sambil mengubah gambar yang responsif sehingga saya mendapatkan kinerja yang baik pada browser yang hanya mendukung srcdan tidak srcset.

Andy Macaulay-Brook
sumber
Terima kasih balasannya. Ini adalah solusi yang menarik, tetapi sayangnya saya tidak berpikir itu akan berhasil untuk situasi saya. Gambar akan diunggah oleh pengguna akhir - dan bisa dalam ukuran berapa pun. Solusi ini, kecuali saya salah paham, hanya berfungsi jika gambar yang diunggah adalah ukuran yang tetap. Misalnya, kode di atas akan berfungsi untuk gambar yang berukuran 500x200, tetapi tidak untuk gambar yang berukuran 500x199.
Joey Joe Joe Junior Shabadoo
2

Ini bukan solusi yang sangat baik karena ini adalah solusi CSS yang lebih baru dan hanya bekerja di 78,9% dari browser pengguna , tetapi ada beberapa polyfill yang dapat mengatasi objek-fit-gambar dan fitie

img {
    display: block;
    overflow: hidden;
    width: 400px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

Idealnya akan lebih baik jika gambar yang lebih kecil ditingkatkan secara proporsional saat diunggah, tapi saya belum bisa menemukan solusi untuk itu.

Bryan Willis
sumber
Terima kasih balasannya. Saya bahkan tidak mengetahui properti ini, tapi ya seperti yang Anda katakan kurangnya dukungan browser membuatnya tidak jalan. Mungkin dalam beberapa tahun dari sekarang mungkin.
Joey Joe Joe Junior Shabadoo
Saya sebenarnya baru saja mulai menggunakan polyfill "objek-fit-gambar" dan sementara tampaknya berfungsi Joey, saya belum benar-benar diuji pada IE karena saya hanya punya Mac. Ini dia sedang beraksi meskipun jika Anda ingin melihatnya . Ini digunakan pada thumbnail kotak pada halaman itu. Saya tahu harus ada plugin di luar sana yang menyelesaikan masalah ini. Namun, sejauh ini YoImages adalah tambahan yang bagus untuk objek karena memungkinkan Anda mengubah posisi pemotongan ke posisi apa pun untuk setiap gambar.
Bryan Willis