Küçük resimlere otomatik olarak köşeler nasıl eklenir?


10

Üzerinde çalıştığım belirli bir proje için otomatik olarak yuvarlatılmış köşe küçük resimler oluşturmak istiyorum: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

İdeal olarak yapmak istediğim şey, bunun gibi bir şeyi küçük resim oluşturma işleminin kendisine bağlamanın ve sunucu tarafında önbelleğe almanın bir yolunu bulmaktır. /wp-includes/media.phpuygulanabilir bir kancaya sahip görünmüyor, bu yüzden kendi kancalarımı yuvarlamam gerekebilir.

Nereden başlayacağınıza dair ipuçları var mı?

EDIT: CSS'de değil. Bu konuda bazı iyi öneriler vardı ama sitenin her yerinde sınır yarıçapı kullanıyorum ve görüntülerin özellikle sunucu tarafında yuvarlanması gerekiyor. Teşekkürler


+25 ödül için üzgünüm. Bu sabah işe geç kaldım.
Dan Gayle

Yanıtlar:


5

wp_create_thumbnailFiltreye takabileceğiniz anlaşılıyor :

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 );
}

Sadece manipülasyonunuzu yapın ve sonucu geri getirin wp_create_thumbnail.


Aha! Farklı bir konumda. Tatlılık. Lemme bunu kontrol et, ama ihtiyacım olanı bulmuş olabilirsin.
Dan Gayle

3
Bu filtre ile bazı çalışma kodlarını görmek isterim, onunla oynadım ve hiçbir yere gitmedim, oldukça çabuk vazgeçtim.
Milo

1
@milo cevabım deneyebileceğiniz biraz kod var
Paul Sheldrake

3

Php ve görüntü GD ile yuvarlatılmış köşeleri işleyebilseniz bile (yine de bir arka plan rengi seçmeniz gerekecek), JavaScript veya CSS3 ile kolayca yapılabilecekler için çok fazla iş / kod / işlem.

CSS3'teki yuvarlak görüntüler için görüntüyü bir div'e sarmanız ve görüntüyü gerçekten pratik olmayan bir divın arka plan görüntüsü yapmanız gerekir.

Bu yüzden sadece jquery kullanmanız gerektiğini düşünüyorum, gerektiğinde komut dosyasını enqueque edin ve bir kanca veya doğrudan küçük resminize jquery sınıfını ekleyin.

Javascript / jquery hile temelde görüntüye yuvarlak görünmesi için 4 köşe gif uygular. Http://maestric.com/doc/css/rounded_corners_images gibi internetlerde yatan çeşitli jquery'ler var .

Sadece kimseye gerçekten yuvarlak olmadıklarını söyleme.


3
" CSS3'teki yuvarlak görüntüler için görüntüyü bir div'e sarmanız ve görüntüyü o div'ın arka plan görüntüsü yapmanız gerekir - kesinlikle doğru değil. border-radiusherhangi bir sorun olmadan doğrudan IMG etiketine uygulanabilir.
Chip Bennett

Bu jQuery hilesi harika. Ben hala istemci tarafında js işleme miktarı minimum tutmak için sunucu tarafı yapmak istiyorum hala
Dan Gayle

3

İşte wordpress görüntü filtrelerinden birini kullanarak benim almak, Chip Bennett tarafından önerilen birini kullanmayı denedim ama başarılı olmadı.

Yaptığım şey, özel bir boyut oluşturmak ve daha sonra belirli bir boyutta olup olmadığını ve daha sonra phpthumb filtreleri uygulamak durumunda oluşturulduğu gibi her görüntüyü kontrol etmektir. İdeal olarak, sadece özel resim boyutunun adını kontrol etmek istiyorum, ancak bunu nasıl yapacağımı henüz çözemedim.

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;
}

Bu kodu temanızın function.php dosyasına eklerseniz, phpthumb'ı indirin ve gitmek için iyi olmanız gereken yolu ayarlayın. Yerel xampp kurulumum üzerinde çalıştım, umarım diğer insanlar için de çalışması gerekir. PhpThumb yorumları basit demo örneğidir.


Güzel. Bu daha çok bahsettiğim şeyin çizgisinde!
Dan Gayle

Bu senin için işe yaradı mı?
Paul Sheldrake

Henüz test etme fırsatı bulamadım. Yine de teşekkürler!
Dan Gayle

2

IE 8 ve altı dışındaki tüm önemli tarayıcılarda çalışacak ve desteklenecek CSS ile bunu yapmamak için hiçbir neden yoktur:

Eğer gerçekten IE desteklemek istiyorsanız aciz tarayıcılarda hedef img elemanına yuvarlatılmış köşeler sınıfı ekleyecek Modernizr kullanabilirsiniz.

Küçük resimlerinize ve css'nize class = "yuvarlatılmış köşeler" ekleyin:

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

Firebug kullanarak görüntü sınıfına köşeleri ekleyerek WPCandy.com'un ön sayfasında rastgele bir görüntü üzerinde hızlı bir test yaptım. Sonuçlar burada.

Önce:

resim açıklamasını buraya girin

Sonra:

resim açıklamasını buraya girin

Firebug'a CSS girildi:

resim açıklamasını buraya girin

.No-rounded-corner'larınız için ihtiyacınız olduğunu düşünüyorsanız yedek yöntemlerden birini kullanın.


Modernizr kullanarak bunu yapmak iyi fikir. Yine de sunucu tarafında gerekir.
Dan Gayle

Tabii ki, söz konusu sitelerden biri hala% 80 IE <9 trafiğe sahip
Dan Gayle

1

Hangi küçük resimleri, genel olarak "küçük resim" resim boyutunu veya Küçük Resimleri Yayınlamak istediğiniz küçük resimleri mi istiyorsunuz?

Her ikisi de CSS ile kolayca gerçekleştirilebilir - özellikle de border-radiusmülk; özel cevap kesin ihtiyaçlarınıza bağlıdır. Güncellemekten mutluluk duyacağım.

TimThumb / önbelleğe alınmış görüntü yoluna giden PS IMHO, alt-optimal. WordPress tarafından oluşturulan, köşeli köşeleri (zaten nesne önbelleğinin bir parçası olan) kullanın ve köşeleri yuvarlamak için CSS kullanın.


1
kenarlık yarıçapı görüntüler için geçerli değildir. Bu gerçekten zor.
fuxia

Mozilla'daki sınır yarıçapı, bir img etiketine uygularsanız kare köşeleri işaret edecektir
Dan Gayle

Oldukça pratik olmayan div sarıcı için arka plan görüntüsü olarak uygulanmalıdır.
Wyck

sınır yarıçapı, geçerli mozilla'daki img etiketlerinde doğrudan çalışır.
Milo

Milo ne dedi. border-radiusgörüntülerde iyi çalışıyor. Kendi Temamdaki Gravatars'ı yorumlamak için kullanıyorum.
Chip Bennett

1

Bir google araması ile GD ile köşeleri yuvarlamak mümkündür, ancak sonuçlar en iyisi değildir; biraz gerginler; ama bu benim açımdan öznel bir çağrı: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Bunu yapmanız gerekiyorsa; bir başlangıç ​​noktası olarak timthumb komut dosyası kullanmanızı öneririz:

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

Stackoverflow'un bununla ilgili bir de yayını var: /programming/609109/rounded-corners-on-images-using-php



0

Tamam bu kolay !!

Öncelikle insanların söyledikleri gibi en iyi, en temiz ve en kolay yol css3 sınır yarıçapını kullanmaktır. Bu, IE9'un yapmasına rağmen, desteği olmayan tipik IE6-8 dışında çoğu modern tarayıcıda çalışır.

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

Eğer benim gibi iseniz ve müşterileriniz IE kullanmak o zaman yukarıdaki gibi http://css3pie.com/ CSS3 Pie tavsiye ederim . Tek dezavantajı, görüntülerin z-endeksi ile uğraşmasıdır, bu yüzden solan bir kaydırıcı kullanıyorsanız sorunlar alabilirsiniz.

CSS3 Pie kullanarak hoşlanmıyorsanız, http://jquery.malsup.com/corner/ tavsiye ederim . JQuery ile birlikte başlığınıza bağlamanız ve aşağıdakileri kullanmanız yeterlidir:

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

CSS3 bildirimini alır ve desteklemeyen herhangi bir tarayıcı için yuvarlatılmış köşeleri jquery ile oluşturur.

Son zamanlarda her ikisini de burada bir müşteri web sitesinde kullandık: http://www.theathenaprogramme.co.uk/

Yapılan iş :-) Umarım bu yardımcı olur.

Düzenleme: Görüntü media.php yoluyla kaydedilmeden önce bunun yapılması gerektiğini fark ettim. Çözümümün bu durumda geçerli olmadığını düşünün.


0

Bunu yapmak için Post Image Get eklentisini kullandım: http://surfhatteras.com/

Post Image Get Get WordPress Eklentisi ve phpThumb kütüphanesi için bir sarıcıdır.

Bunu kullanarak <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> , yayınlanan bir görüntünün köşelerini yuvarlamak gibi bir şey yapabilirsiniz . Veya resimlerinizi kendiniz sarabilirsiniz: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Önbelleklemeyi unutmayın! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.