Bagaimana cara menambahkan sudut bulat ke thumbnail secara otomatis?

Saya ingin membuat thumbnail sudut bulat otomatis untuk proyek tertentu yang sedang saya kerjakan, menggunakan sesuatu seperti ini: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

Idealnya saya ingin lakukan adalah menemukan cara untuk menghubungkan sesuatu seperti ini ke dalam proses pembuatan thumbnail itu sendiri dan cache itu serveride. /wp-includes/media.phpsepertinya tidak memiliki kait yang berlaku, jadi saya mungkin harus memutar sendiri.

Ada petunjuk di mana untuk memulai?

EDIT: Tidak dalam CSS. Ada beberapa saran bagus tentang ini, tetapi saya menggunakan radius perbatasan di seluruh situs, dan gambar-gambar khusus perlu dibulatkan di sisi server. Terima kasih

Sepertinya Anda dapat menghubungkan ke wp_create_thumbnailfilter :

function wp_create_thumbnail( $file, $max_side, $deprecated = '' ) {
if ( !empty( $deprecated ) )
     _deprecated_argument( __FUNCTION__, '1.2' );
     $thumbpath = image_resize( $file, $max_side, $max_side );
     return apply_filters( 'wp_create_thumbnail', $thumbpath );
}

Jadi lakukan saja manipulasi Anda, dan kembalikan hasilnya ke wp_create_thumbnail.

Meskipun Anda dapat memproses sudut bulat dengan Php dan gambar GD (Anda masih harus memilih warna latar belakang,) itu adalah banyak sekali pekerjaan / kode / pemrosesan untuk apa yang dapat dengan mudah dicapai dengan JavaScript atau CSS3.

Untuk gambar bulat di CSS3 Anda harus membungkus gambar dalam div dan menjadikan gambar itu sebagai gambar latar dari div itu, tidak terlalu praktis.

Jadi saya pikir Anda harus menggunakan jquery, cukup enqueue skrip saat diperlukan dan menambahkan kelas jquery ke thumbnail Anda melalui sebuah kail atau secara langsung.

Trik javascript / jquery pada dasarnya menerapkan 4 sudut gifs pada gambar untuk membuatnya tampak bulat. Ada berbagai jquery yang tergeletak di jalinan seperti http://maestric.com/doc/css/rounded_corners_images .

Hanya saja, jangan memberi tahu siapa pun mereka tidak benar-benar bulat.

Inilah pendapat saya tentang penggunaan salah satu filter gambar wordpress, saya mencoba menggunakan yang disarankan oleh Chip Bennett tetapi tidak berhasil.

Apa yang saya lakukan adalah membuat ukuran khusus dan kemudian memeriksa setiap gambar karena dibuat jika itu ukuran tertentu dan jika kemudian menerapkan filter phpthumb. Idealnya saya ingin dapat hanya memeriksa nama ukuran gambar kustom tapi saya belum tahu bagaimana melakukannya.

add_theme_support( 'post-thumbnails' );
add_image_size( 'rounded-saturated', 250, 100, true ); 
require_once('path_to\phpthumb.class.php');
add_filter('image_make_intermediate_size', 'paul_rounded_filter');

function paul_rounded_filter($file) {
    $info = getimagesize($file);

    // check for our image size and do stuff
    if($info[0] == 250 && $info[1] == 100)
    {
        // create phpThumb object
        $phpThumb = new phpThumb();
        $phpThumb->resetObject();

        // set data source -- do this first, any settings must be made AFTER this call      
        $phpThumb->setSourceData(file_get_contents($file));
        $output_filename = $file;


        // PLEASE NOTE:
        // You must set any relevant config settings here. The phpThumb
        // object mode does NOT pull any settings from phpThumb.config.php
        //$phpThumb->setParameter('config_document_root', '/home/groups/p/ph/phpthumb/htdocs/');
        //$phpThumb->setParameter('config_cache_directory', '/tmp/persistent/phpthumb/cache/');

        // set parameters (see "URL Parameters" in phpthumb.readme.txt)
        $phpThumb->setParameter('fltr', 'ric|30|30');
        $phpThumb->setParameter('fltr', 'sat|-100');

        // generate & output thumbnail
        if ($phpThumb->GenerateThumbnail()) { // this line is VERY important, do not remove it!
            if ($phpThumb->RenderToFile($output_filename)) {
                // do something on success
                echo 'Successfully rendered to "'.$output_filename.'"';
                //die;
            } else {
                // do something with debug/error messages
                echo 'Failed:<pre>'.implode("\n\n", $phpThumb->debugmessages).'</pre>';
                die;
            }
        } else {
            // do something with debug/error messages
            echo 'Failed:<pre>'.$phpThumb->fatalerror."\n\n".implode("\n\n", $phpThumb->debugmessages).'</pre>';
            die;
        }
    }

    if ( $width || $height ) {
        if ( !is_wp_error($resized_file) && $resized_file && $info = getimagesize($resized_file) ) {
            $resized_file = apply_filters('image_make_intermediate_size', $resized_file);
            return array(
                'file' => wp_basename( $resized_file ),
                'width' => $info[0],
                'height' => $info[1],
            );
        }
    }
    return false;
}

Jika Anda menambahkan kode itu ke file functions.php tema Anda, unduh phpthumb dan tetapkan jalur yang harus Anda tempuh. Saya sudah membuatnya bekerja pada instal lokal xampp saya jadi semoga itu bekerja untuk orang lain juga. Komentar phpThumb berasal dari contoh demo sederhana.

Tidak ada alasan untuk tidak melakukan ini dengan CSS berfungsi dan akan didukung di semua browser utama kecuali untuk IE 8 dan di bawah ini:

Jika Anda benar-benar ingin mendukung IE, Anda dapat menggunakan Modernizr yang akan menambahkan kelas no-rounded-corner pada elemen img target di browser yang tidak mampu.

Tambahkan class = "rounded-corner" ke thumbnail Anda dan di css Anda:

.rounded-corners {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px;
}

Saya melakukan tes cepat pada gambar acak di halaman depan WPCandy.com dengan menambahkan sudut ke kelas gambar menggunakan Firebug. Inilah hasilnya.

Sebelum:

Setelah:

CSS masuk ke Firebug:

Untuk .no-rounded-corner Anda gunakan salah satu metode mundur jika Anda merasa perlu.

Thumbnail apa yang ingin Anda gayakan, ukuran gambar "thumbnail" secara umum, atau Posting Thumbnail?

Keduanya dapat dengan mudah dicapai melalui CSS - khususnya, border-radiusproperti; jawaban spesifik akan tergantung pada kebutuhan Anda. Saya akan dengan senang hati memperbarui.

PS IMHO pergi ke TimThumb / rute gambar cache di-sub-optimal. Cukup gunakan gambar WordPress yang dihasilkan, sudut-sudut (yang sudah menjadi bagian dari cache objek), dan gunakan CSS untuk mengitari sudut.

Setelah pencarian Google dimungkinkan untuk berbelok dengan GD tetapi hasilnya bukan yang terbesar; mereka agak jaggy; tapi itu panggilan subjektif di pihak saya: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Jika Anda harus melakukan ini; saya sarankan menggunakan skrip timthumb sebagai titik awal:

Proyek Timthumb: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow juga memiliki pos tentang ini: /programming/609109/rounded-corners-on-images-using-php

Pernahkah Anda melihat ccs3pie Rounded Corners Dan CSS3 hacks yaitu ini harus melakukan apa yang Anda inginkan dan memaksa yang lama yaitu tunduk untuk tunduk.

OK ini mudah !!

Pertama seperti yang dikatakan orang, cara terbaik, terbersih, dan termudah adalah dengan menggunakan css3 border-radius. Ini berfungsi di sebagian besar browser modern, kecuali IE6-8 khas yang tidak memiliki dukungan ... meskipun IE9 akan melakukannya.

.round {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

JADI, jika Anda seperti saya dan klien Anda semuanya menggunakan IE maka saya akan merekomendasikan Pie CSS3 seperti di atas http://css3pie.com/ . Satu-satunya kelemahan adalah itu berantakan dengan z-indeks gambar jadi jika Anda menggunakan slider yang memudar Anda mungkin mendapatkan masalah.

Jika Anda tidak suka menggunakan Pie CSS3, saya akan merekomendasikan http://jquery.malsup.com/corner/ . Anda cukup menautkannya di header Anda, bersama dengan jQuery dan menggunakan yang berikut ini:

<script>
        $(function(){
        $('.round').corner();
    });
</script>

Itu mengambil deklarasi CSS3 dan untuk browser apa pun yang tidak mendukungnya, itu membuat sudut bulat melalui jquery.

Kami baru-baru ini menggunakan keduanya di situs web klien di sini: http://www.theathenaprogramme.co.uk/

Pekerjaan selesai :-) Semoga ini bisa membantu.

Sunting: Hanya memperhatikan bahwa Anda perlu melakukan ini sebelum gambar disimpan melalui media.php. Pikirkan solusi saya tidak berlaku dalam kasus ini.

Saya telah menggunakan plugin Get Post Image untuk melakukan ini di sini: http://surfhatteras.com/

Get Post Image adalah pembungkus untuk Get The Image WordPress Plugin dan pustaka phpThumb.

Dengan menggunakannya Anda dapat melakukan sesuatu seperti <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> membulatkan sudut-sudut gambar yang diposting. Atau Anda dapat membungkus gambar Anda sendiri: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Jangan lupa untuk cache! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite