Jak automatycznie dodawać zaokrąglone rogi do miniatur?


10

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


Przepraszam za nagrodę +25. Spóźniłem się dziś rano do pracy.
Dan Gayle,

Odpowiedzi:


5

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.


Aha! Jest w innej lokalizacji. Słodycz. Pozwól mi to sprawdzić, ale wygląda na to, że znalazłeś to, czego potrzebuję.
Dan Gayle

3
Chciałbym zobaczyć jakiś działający kod z tym filtrem, bawiłem się nim i nigdzie nie byłem, dość szybko się poddałem.
Milo

1
@milo moja odpowiedź zawiera trochę kodu, który możesz wypróbować
Paul Sheldrake

3

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.


3
W przypadku zaokrąglonych obrazów w CSS3 musisz zawinąć obraz w div i uczynić z niego obraz tła tego div ” - absolutnie nieprawda. border-radiusmożna zastosować bezpośrednio do tagu IMG, bez żadnych problemów.
Chip Bennett

Ta sztuczka jQuery jest fajna. Wolałbym raczej zrobić to po stronie serwera, aby ograniczyć do minimum ilość przetwarzania js po stronie klienta
Dan Gayle

3

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.


Miły. Jest to bardziej zgodne z tym, o czym mówiłem!
Dan Gayle

Czy to zadziałało dla ciebie?
Paul Sheldrake

Nie miałem jeszcze okazji tego przetestować. W każdym razie dzięki!
Dan Gayle

2

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:

wprowadź opis zdjęcia tutaj

Po:

wprowadź opis zdjęcia tutaj

CSS wszedł do Firebug:

wprowadź opis zdjęcia tutaj

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


Dobry pomysł, aby to zrobić za pomocą Modernizr. Nadal jednak potrzebuję go po stronie serwera.
Dan Gayle

Oczywiście, jedna z tych stron nadal ma 80% ruchu IE <9
Dan Gayle

1

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.


1
promień obramowania nie dotyczy obrazów. To jest naprawdę trudne.
fuxia

Promień obramowania w Mozilli będzie miał kwadratowe rogi wskazujące, jeśli zastosujesz go do tagu img
Dan Gayle

Musi być zastosowany jako obraz tła dla otoki div, co jest dość niepraktyczne.
Wyck

border-radius działa bezpośrednio na znaczniki img w bieżącej mozilli.
Milo

Co powiedział Milo. border-radiusdziała dobrze na obrazach. Używam go do komentowania Gravatars we własnym temacie.
Chip Bennett

1

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


0

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.


Byłoby to idealne, ale nigdy nie udało mi się konsekwentnie pracować. Wyciągnęłam włosy z tego.
Dan Gayle

0

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.


0

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.