Jak automatycznie dodawać zaokrąglone rogi do miniatur?

Chcę utworzyć automatycznie zaokrąglone miniatury narożne dla konkretnego projektu, nad którym pracuję, używając czegoś takiego: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

Idealnie chciałbym znaleźć sposób na zaczepienie czegoś takiego w samym procesie tworzenia miniaturek i buforowanie go na serwerze. /wp-includes/media.phpwydaje się, że nie ma żadnych odpowiednich haczyków, więc może będę musiał rzucić własne.

Jakieś wskazówki, od czego zacząć?

EDYCJA: Nie w CSS. Było kilka dobrych sugestii na ten temat, ale używam promienia obramowania w całej witrynie, a obrazy muszą zostać zaokrąglone po stronie serwera. Dzięki

Wygląda na to, że możesz podłączyć wp_create_thumbnailfiltr :

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

Więc po prostu wykonaj manipulację i zwróć wynik do wp_create_thumbnail.

Nawet jeśli możesz przetwarzać zaokrąglone rogi za pomocą Php i obrazu GD (nadal będziesz musiał wybrać kolor tła), jest to okropnie dużo pracy / kodu / przetwarzania dla tego, co można łatwo osiągnąć za pomocą JavaScript lub CSS3.

W przypadku zaokrąglonych obrazów w CSS3 musisz zawinąć obraz w div i sprawić, że będzie to obraz tła tego div, co nie jest zbyt praktyczne.

Myślę więc, że powinieneś po prostu użyć jquery, po prostu kolejkować skrypt w razie potrzeby i dołączyć klasę jquery do miniatury za pomocą haka lub bezpośrednio.

Sztuczka javascript / jquery zasadniczo stosuje 4 narożne gify do obrazu, aby wyglądał na zaokrąglony. Na interwebach leżą różne jquery, takie jak http://maestric.com/doc/css/rounded_corners_images .

Tylko nie mów nikomu, że tak naprawdę nie są okrągłe.

Oto moje zdanie na temat użycia jednego z filtrów obrazu WordPressa. Próbowałem użyć jednego z sugerowanych przez Chipa Bennetta, ale nie odniosłem żadnego sukcesu.

To, co zrobiłem, to utworzenie niestandardowego rozmiaru, a następnie sprawdzenie każdego obrazu, ponieważ jest on utworzony, jeśli ma określony rozmiar, a jeśli to, to zastosuj filtry phpthumb. Idealnie chciałbym móc po prostu sprawdzić nazwę niestandardowego rozmiaru obrazu, ale jeszcze nie wymyśliłem, jak to zrobić.

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

Jeśli dodasz ten kod do pliku functions.php swojego motywu, pobierz phpthumb i ustaw ścieżkę, którą powinieneś iść. Mam go działającego na mojej lokalnej instalacji xampp, więc mam nadzieję, że powinien on działać również dla innych ludzi. Komentarze phpThumb pochodzą z prostego przykładu demonstracyjnego.

Nie ma powodu, aby nie robić tego z CSS, który działa i będzie obsługiwany we wszystkich głównych przeglądarkach oprócz IE 8 i niższych:

Jeśli naprawdę chcesz wesprzeć IE, możesz użyć Modernizra, który doda klasę zaokrąglonych rogów do docelowego elementu img w niezdolnych przeglądarkach.

Dodaj klasę = „zaokrąglone rogi” do miniatur i do swojego css:

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

Zrobiłem szybki test losowego obrazu na pierwszej stronie WPCandy.com, dodając rogi do klasy obrazu za pomocą Firebug. Oto wyniki.

Przed:

Po:

CSS wszedł do Firebug:

Dla swoich .nie zaokrąglonych narożników użyj jednej z awaryjnych metod, jeśli uważasz, że potrzebujesz.

Jakie miniatury chcesz stylizować, ogólnie rozmiar obrazu „miniatury”, czy publikować miniatury?

Oba można łatwo osiągnąć za pomocą CSS - w szczególności border-radiuswłaściwość; konkretna odpowiedź będzie zależeć od twoich dokładnych potrzeb. Z przyjemnością zaktualizuję.

PS IMHO przejście na TimThumb / trasa z obrazem w pamięci podręcznej nie jest optymalna. Wystarczy użyć wygenerowanych przez WordPress kwadratowych obrazów (które są już częścią pamięci podręcznej obiektów) i użyć CSS do zaokrąglania rogów.

Podczas wyszukiwania w Google można zaokrąglać za pomocą GD, ale wyniki nie są najlepsze; są nieco postrzępione; ale to subiektywne wezwanie z mojej strony: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Jeśli musisz to zrobić; zalecam użycie skryptu timthumb jako punktu wyjścia:

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

Stackoverflow ma również post na ten temat: /programming/609109/rounded-corners-on-images-using-php

Czy rzuciłeś okiem na hacki ccs3pie Rounded Corners i CSS3, ponieważ to powinno zrobić to, co chcesz, a także zmusić starą dobrą, tj. Poddanie się, do przestrzegania.

OK, to proste !!

Po pierwsze, ludzie powiedzieli, że najlepszym, najczystszym i najprostszym sposobem jest użycie css3 border-radius. Działa to w większości nowoczesnych przeglądarek, z wyjątkiem typowego IE6-8, który nie ma wsparcia ... chociaż IE9 to zrobi.

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

Więc jeśli jesteś podobny do mnie, a Twoi klienci używają IE, polecam CSS3 Pie jak wyżej http://css3pie.com/ . Jedyną wadą jest to, że bałagan z indeksem Z obrazów, więc jeśli używasz suwaka, który zanika, możesz mieć problemy.

Jeśli nie masz ochoty używać CSS3 Pie, polecam http://jquery.malsup.com/corner/ . Po prostu połącz go w nagłówku wraz z jQuery i użyj następujących poleceń:

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

Pobiera deklarację CSS3 i dla każdej przeglądarki, która jej nie obsługuje, renderuje zaokrąglone rogi za pomocą jquery.

Niedawno wykorzystaliśmy oba te elementy na stronie klienta tutaj: http://www.theathenaprogramme.co.uk/

Zadanie wykonane :-) Mam nadzieję, że to pomoże.

Edycja: Właśnie zauważyłem, że musisz to zrobić, zanim obraz zostanie zapisany przez media.php. Myślę, że moje rozwiązanie nie ma zastosowania w tym przypadku.

Użyłem wtyczki Get Post Image, aby to zrobić tutaj: http://surfhatteras.com/

Get Post Image to opakowanie dla wtyczki Get The Image WordPress i biblioteki phpThumb.

Za jego pomocą możesz zrobić coś takiego, jak <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> zaokrąglić rogi opublikowanego obrazu. Lub możesz samodzielnie owinąć swoje zdjęcia: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Nie zapomnij o buforowaniu! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite