Bagaimana cara menambahkan sudut bulat ke thumbnail secara otomatis?

10

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

Dan Gayle
sumber
Maaf tentang hadiah +25. Saya terlambat bekerja pagi ini.
Dan Gayle

Jawaban:

5

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.

Chip Bennett
sumber
Aha! Itu di lokasi yang berbeda. Rasa manis. Biar saya periksa ini, tetapi sepertinya Anda mungkin telah menemukan apa yang saya butuhkan.
Dan Gayle
3
Saya ingin melihat beberapa kode yang berfungsi dengan filter ini, saya bermain-main dengannya dan tidak berhasil, menyerah dengan cepat.
Milo
1
@ Moilo jawaban saya memiliki sedikit kode yang dapat Anda coba
Paul Sheldrake
3

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.

Wyck
sumber
3
" Untuk gambar bulat di CSS3 Anda harus membungkus gambar dalam div dan menjadikan gambar sebagai latar-gambar dari div itu " - sama sekali tidak benar. border-radiusdapat diterapkan langsung ke tag IMG, tanpa masalah apa pun.
Chip Bennett
Trik jQuery itu keren. Saya MASIH lebih suka melakukannya di sisi server agar jumlah pemrosesan js di sisi klien tetap minimum
Dan Gayle
3

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.

Paul Sheldrake
sumber
Bagus. Ini lebih sesuai dengan apa yang saya bicarakan!
Dan Gayle
Apakah itu berhasil untuk Anda?
Paul Sheldrake
Belum punya kesempatan untuk mengujinya. Terimakasih Meskipun!
Dan Gayle
2

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:

masukkan deskripsi gambar di sini

Setelah:

masukkan deskripsi gambar di sini

CSS masuk ke Firebug:

masukkan deskripsi gambar di sini

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

Chris_O
sumber
Ide bagus untuk melakukan ini menggunakan Modernizr. Masih membutuhkannya sisi server.
Dan Gayle
Tentu saja, salah satu situs yang dipermasalahkan masih memiliki 80% lalu lintas IE <9
Dan Gayle
1

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.

Chip Bennett
sumber
1
radius batas tidak berlaku untuk gambar. Itu sangat rumit.
fuxia
Jari-jari perbatasan di Mozilla akan memiliki sudut persegi yang menunjukkan jika Anda menerapkannya pada tag img
Dan Gayle
Ini harus diterapkan sebagai gambar latar belakang untuk pembungkus div, yang sangat tidak praktis.
Wyck
border-radius bekerja langsung pada tag img di mozilla saat ini.
Milo
Apa yang dikatakan Milo. border-radiusberfungsi dengan baik pada gambar. Saya menggunakannya untuk komentar Gravatar di Tema saya sendiri.
Chip Bennett
1

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

chrisjlee
sumber
0

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.

MartinJJ
sumber
Ini akan ideal, tetapi saya tidak pernah membuatnya bekerja secara konsisten. Saya sudah mencabut rambut saya lebih dari ini.
Dan Gayle
0

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.

daveaspinall
sumber
0

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

two7s_clash
sumber