Pemotongan thumbnail posting yang mudah digunakan?


32

Apakah ada cara untuk memungkinkan pengguna saya menentukan area krop thumbnail thumbnail? Thumbnail selalu ada lampiran posting, saya lebih suka tidak membuat lampiran tambahan per thumbnail.

Thumbnail pos harus berukuran 200x100 piksel, dan berasal dari salah satu gambar yang digunakan dalam pos. Jadi di dunia ideal saya, ketika Anda mengklik tautan "Set Featured Image", Anda mendapatkan gambaran umum dari gambar yang sudah disertakan, dan ketika Anda mengklik salah satu dari ini, Anda dapat menentukan sendiri area krop (memindahkan atau mengubah ukurannya, tetapi mempertahankannya). rasio aspek 2x1). Ketika Anda mengklik "OK", thumbnail posting baru disimpan dengan lampiran asli (di _wp_attachment_metadata['sizes']['post-thumbnail']bidang metadata misalnya), bukan sebagai lampiran baru. Menggunakan gambar yang sudah digunakan sebagai thumbnail posting untuk posting lain tidak boleh diizinkan, atau setidaknya memberi peringatan.

Saya percaya editor gambar yang disertakan tidak akan sesuai dengan kebutuhan saya, karena Anda dapat memilih untuk mengedit semua versi gambar, atau thumbnail biasa, tetapi tidak hanya thumbnail posting. Saya juga merasa agak bingung untuk mengetahui versi apa yang saya edit, jadi saya pikir pengguna saya akan memiliki lebih banyak masalah dengan itu.

Apakah ada plugin yang melakukan apa yang saya inginkan, atau saya dapat dengan mudah memperluas kebutuhan saya?

Pembaruan: Contoh UI

Saya sangat suka antarmuka pemetik gambar Buku Alamat Mac OS X: Anda memilih gambar, dan mengubah ukuran pangkas thumbnail rasio tetap melalui slider. Anda juga dapat menyeret gambar dasar ke sekeliling. Anda dapat memperluas ide ini ke beberapa ukuran gambar (saya punya post-thumbnaildan post-thumbnail-1/2itu setengah dari ukuran itu, misalnya). Biarkan pengguna memilih ukuran yang sedang dieditnya sekarang dengan kotak centang, dan menggambar persegi pemangkasan yang sesuai di layar.

Pemotong gambar Buku Alamat sedang beraksi


1
@ Jan Fabry - Proyek WordPress pertama saya yang berbayar adalah sebuah plugin untuk memotong gambar, sebelum cropping datang di WordPress. Itu sangat berbeda dari yang Anda minta atau saya akan memasukkannya sebagai jawaban. Tetapi apa yang Anda inginkan seharusnya tidak terlalu sulit untuk ditulis jika Anda termotivasi ...
MikeSchinkel

1
@ Mike: Saya pernah melihatnya di situs web Anda, dan saya berharap itu akan tersedia di suatu tempat. Bahkan jika itu tidak menandai semua item dari wishlist saya (luas), itu bisa memberikan awal yang baik.
Jan Fabry

@ Mike - Saya juga akan sangat tertarik untuk meninjau kode apa pun yang mungkin Anda buat atau modifikasi yang terkait dengan pemangkasan gambar. Saya telah putus asa mencari untuk menambahkan jcrop ke kotak metabox kustom yang akan memungkinkan untuk menambahkan dan memotong gambar sambil tetap menggunakan galeri media wordpress bawaan.
NetConstructor.com

Hey @Jan Fabry dan @ NetConstructor.com - Saya baru saja meninjau kode dan karena itu adalah plugin pertama saya untuk WP, saya terlalu malu untuk merilisnya, itu sangat buruk. Saya ingin bekerja pada solusi yang lebih baru untuk rilis di sini tapi itu mungkin sementara ...
MikeSchinkel

Jangan malu Mike, kode lama selalu buruk di mata penulis sendiri. Itu hanya kemajuan :). @ Jan - dalam contoh UI Anda, tampak bagi saya bahwa ukuran thumbnail postingan entah bagaimana sudah ditentukan sebelumnya. Bisakah Anda mengatakan lebih banyak tentang itu?
hakre

Jawaban:


11

Kode masih berantakan, tetapi tampaknya berfungsi, bahkan pada IE 8. Saya berencana untuk merilisnya di repositori, tetapi sementara itu Anda dapat bermain dengan versi saya saat ini . Untuk mengaksesnya Anda mengklik "Edit Gambar" saat menambahkan atau mengedit gambar, itu menggantikan editor gambar biasa (mereka sangat sulit untuk digabungkan). Karena sebagian besar area admin menggunakan thumbnail biasa dan versi saya saat ini mengedit thumbnail posting, sepertinya kode tidak berpengaruh, tetapi cobalah dengan menunjukkan thumbnail posting dan Anda akan melihatnya berubah.

Plugin ini membutuhkan Pengubah Gambar Sesuai Permintaan saya , yang juga masih berantakan, untuk melakukan pengubahan ukuran yang sebenarnya.

Contoh gambar di cropper


kode siap untuk dirilis? mungkin github itu? Saya sangat ingin mengintegrasikan fungsionalitas seperti ini ke dalam boiler saya
Mild Fuzz

Saya juga sangat tertarik dengan apa / bagaimana Anda melakukan ini! Mohon bagikan kodenya. Apakah kode Anda bekerja menggunakan pustaka media wordpress default dan apakah itu memungkinkan Anda untuk membuat metabox sederhana pada layar edit posting di mana Anda dapat memanggil gambar tertentu DAN menyalinnya hanya untuk ukuran tertentu yang Anda buat seperti "new_thumb" sebagaimana didefinisikan melalui sesuatu seperti add_image_size ('new_thumb', 200, 100, true) ;? Situasi ideal adalah memiliki sesuatu seperti pembuat gambar header dengan kemampuan untuk mengubah setiap ukuran gambar yang ditentukan berdasarkan masing-masing metabox untuk setiap ukuran yang ditentukan.
NetConstructor.com

@ JanFabry sudahkah Anda merilis kode ini sebagai Plugin? Saya ingin merekomendasikan ini kepada seseorang yang membutuhkan fungsi ini!
Chip Bennett

@ jan-fabry Bagaimana fungsi ini? Adakah kesuksesan?
Steven

4

Taruhan terbaik Anda adalah dengan menggunakan pemotongan gambar berbasis javascript dan kemudian php dikombinasikan dengan ImageMagick atau Image GD.

Itu harus ditulis ke dalam fungsi Anda atau sebagai plug-in karena saya tidak tahu apa-apa dari rak wordpress plug-in, yang mengejutkan.

Ada pemotongan gambar YUI dengan opsi simpan berbasis php http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Berikut ini adalah tutorial berbeda tentang cara menggunakan jquery cropper dengan php
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Opsi ketiga sangat mirip dengan tautan di atas menggunakan kode jquery yang sama tetapi kode yang berbeda. http://www.leonkessler.com/blog/?p=132

Ini adalah jcrop jquery lainnya sebagai gantinya, http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Siapa yang siap untuk plug-in baru, ini pasti akan populer :)


Sudah ada kode pemangkasan gambar (HTML, JS dan PHP) di dalam inti wordpress. Saya pikir plugin yang bagus akan menggunakannya kembali. Bukan suatu keharusan, hanya mengatakan demikian. Anda benar tentang fakta bahwa contoh UI yang dibuat oleh Jan membutuhkan sesuatu seperti itu.
hakre

@ Hakre, yang terakhir dihubungkan dengan Wyck adalah jcrop yang diintegrasikan ke dalam inti wp di 2.8 . Saya ingat pernah membaca tentang itu pada waktu itu tetapi saya tidak dapat menemukan informasi tentang hal itu yang sebenarnya digunakan selain dari satu plugin di repositori yang oleh semua akun rusak.
matt

@ Matt: jika itu diintegrasikan ke dalam inti (saya tidak tahu semua spesifik tentang UI tanaman di inti sekarang yang ada) Saya berasumsi bahwa itu digunakan untuk fitur UI gambar inti. Fitur itu tidak tersedia sepanjang waktu tetapi hanya jika PHP atau pustaka gambar sistem tertentu tersedia. Maaf karena tidak spesifik tapi hanya saja saya tidak menjadi implementasi inti sejauh ini. Tapi saya tahu ada satu;)
hakre

1

Dengan anggapan Anda telah menambahkan dukungan untuk thumbnail mini, saat Anda berbicara tentang opsi "Gambar Unggulan".

Jika demikian, satu opsi yang Anda miliki untuk menambahkan ukuran gambar baru ke array unggahan. Jadi secara default, Anda memiliki thumbnail, sedang, besar. Dalam sedikit kode berikut, ini menambahkan gambar ke-4 untuk bermacam-macam itu, berdasarkan pada ukuran apa pun yang Anda inginkan. Sedikit kode ini akan ditambahkan ke file functions.php Anda.

add_image_size( 'new_thumb', 200, 100, true );

"new-thumb" = nama gambar khusus baru
"200" = lebar
"100" = tinggi
"true" = opsi krop yang keras. Ini akan memaksa gambar untuk dipotong ke lebar / tinggi yang ditentukan. Tanpa, itu hanya skala ke proporsi.

Sekarang, untuk menampilkan thumbnail baru pada halaman atau array posting, Anda akan memasukkan yang berikut ke dalam HTML Anda

<?php the_post_thumbnail('new_thumb'); ?>

@cnix: Terima kasih atas jawaban ini, tetapi bukan itu yang saya cari. Saya ingin cara bagi pengguna akhir untuk menentukan area yang harus dipotong, bukan saya sebagai perancang situs. Jadi area dapat bervariasi dari gambar ke gambar.
Jan Fabry

1

Anda mungkin ingin menggunakan CSS agar memiliki fleksibilitas besar, perbaiki thumbnail dalam tema Anda (jika ingin) dan menghindari kekacauan file:

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Ingat bahwa seluruh gambar akan dimuat, jadi jangan gunakan 3MB asli Anda untuk ini.

Perbarui sesuai permintaan Jan: Jika Anda ingin kliping dinamis, pertimbangkan:

  • Untuk pengguna = administrator, buat CSS melalui PHP; Anda bisa menautkan ke php yang membaca pengaturan yang sesuai dan menyesuaikan parameter kliping yang sesuai.
  • Untuk pengguna = pengunjung, gunakan JavaScript untuk mengubah parameter kliping dalam atribut gaya gambar.
  • Sebagai solusi yang kurang invasif, pertimbangkan membuat shortcode (melalui plugin Shortcode Exec PHP yang hebat) seperti [thumb w = ?? h = ??] url [/ jempol] yang dapat Anda terjemahkan ke tag HTML yang sesuai dengan inline CSS.

Memang, Anda dapat melakukan pemangkasan melalui CSS untuk menghindari memiliki beberapa ukuran, tetapi bagaimana Anda membiarkan pengguna (penulis posting) menentukan area pemangkasan yang harus ditampilkan?
Jan Fabry

Silakan lihat hasil edit di atas.
Raphael

Terima kasih atas klarifikasi Anda. Ini mengasumsikan pengguna tahu lokasi piksel dari area pemotongan yang diinginkan? Saya sebenarnya mencari cara yang lebih grafis (seperti editor gambar saat ini, tetapi ditargetkan untuk mengirim gambar mini dan bukan gambar mini biasa).
Jan Fabry

Saya harap Anda bermaksud ini menjadi plugin, bukan hack. Anda dapat memberikan beberapa opsi default yang cukup untuk sebagian besar kasus: sudut, tengah, terpusat di tepi dan sebagainya (semua mudah dihitung). Saya akan menahan diri untuk tidak menawarkan input gratis karena orang dapat mengacaukan aliran situs dengan buruk jika mereka memasukkan omong kosong. Menawarkan klip video definisi (lihat Zenphoto untuk implementasi) baik-baik saja, saya kira, tetapi prinsip-prinsip bagaimana menggunakan nilai-nilai, bagaimanapun diperoleh, tetap sama; Anda hanya perlu membangun GUI. Ini saya tidak dapat membantu Anda.
Raphael


1

Saya yakin Anda mencari ini: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

Saya belum mencoba ini, tetapi seharusnya menawarkan fungsionalitas yang Anda cari.

Halaman plugin asli di sini. http://wordpress.org/extend/plugins/scissors/

Saya membutuhkan ini untuk proyek yang sedang saya kerjakan juga.


Terima kasih untuk sarannya. Saya telah melihat Gunting (dan tahu bahwa seseorang memutakhirkannya ke 3.0), tapi saya pikir itu terlalu fleksibel untuk apa yang saya inginkan: harus seorang petani yang akan memotong ke ukuran yang telah ditentukan. Gunting dapat melakukan lebih banyak lagi, dan karenanya dapat membingungkan pengguna akhir saya.
Jan Fabry

1

Saya pikir solusi utama untuk masalah ini adalah memodifikasi plugin http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/

dan sesuaikan sehingga ukuran gambar khusus apa pun yang ditentukan dalam file functions.php Anda (menggunakan add_image_size( 'new_thumb', 200, 100, true ); ) secara otomatis digunakan dan kemudian dapatkan kode untuk mengganti (atau memperluas) tautan "edit" ketika Anda ingin mengubah gambar.

Memanfaatkan pendekatan ini wordpress dapat terus membuat ukuran gambar yang berlaku seperti biasanya tetapi jika Anda ingin secara khusus memodifikasi area yang dipotong dari gambar tertentu, Anda memiliki kemampuan untuk melakukannya sehingga pada gilirannya akan menggantikan gambar yang dihasilkan secara otomatis untuk ukuran itu. Hmmm ... walaupun kedengarannya membingungkan membaca lagi itu persis apa yang saya rasakan hilang.

Saat ini saya percaya plugin menyimpan ukuran gambar khusus ini ke bidang khusus dalam sebuah posting, bukan sebuah posting untuk gambar yang berlaku.


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.