Wie füge ich Miniaturansichten automatisch abgerundete Ecken hinzu?

Ich möchte für ein bestimmtes Projekt, an dem ich arbeite, automatisch Miniaturansichten mit abgerundeten Ecken erstellen. Dabei gilt Folgendes: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

Idealerweise möchte ich einen Weg finden, so etwas in den Erstellungsprozess von Miniaturansichten selbst einzubinden und auf dem Server zwischenzuspeichern. /wp-includes/media.phpscheint keine zutreffenden Haken zu haben, daher muss ich möglicherweise meine eigenen rollen.

Irgendwelche Hinweise, wo ich anfangen soll?

EDIT: Nicht in CSS. Es gab einige gute Vorschläge dazu, aber ich verwende den Rahmenradius auf der gesamten Site, und die Bilder müssen speziell auf der Serverseite gerundet werden. Vielen Dank

Sieht so aus, als könnten Sie sich in den wp_create_thumbnailFilter einhängen :

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

Nehmen Sie also einfach Ihre Manipulation vor und geben Sie das Ergebnis an zurück wp_create_thumbnail.

Obwohl Sie mit PHP und Bild-GD abgerundete Ecken verarbeiten können (Sie müssen immer noch eine Hintergrundfarbe auswählen), ist dies eine Menge Arbeit / Code / Verarbeitung für das, was mit JavaScript oder CSS3 leicht erreicht werden kann.

Für abgerundete Bilder in CSS3 müssen Sie das Bild in ein Div einschließen und das Bild zu einem Hintergrundbild dieses Div machen, was nicht wirklich praktisch ist.

Ich denke, Sie sollten einfach jquery verwenden, das Skript bei Bedarf einfach in die Warteschlange stellen und die jquery-Klasse über einen Hook oder direkt an Ihr Miniaturbild anhängen.

Der Javascript / JQuery-Trick wendet grundsätzlich 4 Eck-Gifs auf das Bild an, damit es abgerundet erscheint. In den Interwebs liegen verschiedene Abfragen wie http://maestric.com/doc/css/rounded_corners_images .

Sag einfach niemandem, dass sie nicht wirklich rund sind.

Hier ist meine Einstellung zu einem der WordPress-Bildfilter. Ich habe versucht, den von Chip Bennett vorgeschlagenen zu verwenden, hatte aber keinen Erfolg.

Was ich getan habe, ist eine benutzerdefinierte Größe zu erstellen und dann jedes Bild beim Erstellen zu überprüfen, ob es diese spezifische Größe hat und ob es dann Phpthumb-Filter anwendet. Idealerweise möchte ich nur nach dem Namen der benutzerdefinierten Bildgröße suchen können, aber ich habe noch nicht herausgefunden, wie das geht.

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

Wenn Sie diesen Code zur Datei functions.php Ihres Themas hinzufügen, laden Sie phpthumb herunter und legen Sie den Pfad fest, den Sie einschlagen sollten. Ich habe es auf meiner lokalen Installation von xampp zum Laufen gebracht, also sollte es hoffentlich auch für andere Leute funktionieren. Die phpThumb-Kommentare stammen aus dem einfachen Demo-Beispiel.

Es gibt keinen Grund, dies nicht mit CSS zu tun. Es funktioniert und wird in allen gängigen Browsern mit Ausnahme von IE 8 und niedriger unterstützt:

Wenn Sie IE wirklich unterstützen möchten, können Sie Modernizr verwenden, das in unfähigen Browsern eine Klasse von nicht abgerundeten Ecken zum Ziel-img-Element hinzufügt.

Fügen Sie class = "abgerundete Ecken" zu Ihren Miniaturansichten und in Ihrem CSS hinzu:

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

Ich habe einen kurzen Test für ein zufälliges Bild auf der Startseite von WPCandy.com durchgeführt, indem ich die Ecken mit Firebug zur Bildklasse hinzugefügt habe. Hier sind die Ergebnisse.

Vor:

Nach:

CSS in Firebug eingegeben:

Verwenden Sie für Ihre .no-abgerundeten Ecken eine der Fallback-Methoden, wenn Sie dies für erforderlich halten.

Welche Thumbnails möchten Sie stylen, die Bildgröße "Thumbnails" im Allgemeinen oder Post Thumbnails?

Beides kann leicht über CSS erreicht werden - speziell die border-radiusEigenschaft; Die genaue Antwort hängt von Ihren genauen Anforderungen ab. Ich werde gerne aktualisieren.

PS IMHO zur TimThumb / zwischengespeicherten Bildroute zu gehen ist nicht optimal. Verwenden Sie einfach die von WordPress generierten Bilder mit quadratischen Ecken (die bereits Teil des Objektcaches sind) und verwenden Sie CSS, um die Ecken abzurunden.

Bei einer Google-Suche ist es möglich, Ecken mit GD abzurunden, aber die Ergebnisse sind nicht die besten. sie sind ein bisschen zackig; Aber das ist ein subjektiver Aufruf von meiner Seite: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Wenn Sie dies tun müssen; Ich empfehle das Timthumb-Skript als Ausgangspunkt:

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

Stackoverflow hat auch einen Beitrag dazu: /programming/609109/rounded-corners-on-images-using-php

Haben Sie sich ccs3pie Rounded Corners und CSS3-Hacks angesehen, um herauszufinden, was Sie wollen, und um gute alte Leute zu zwingen, sich zu unterwerfen.

OK das ist einfach !!

Zunächst einmal, wie die Leute gesagt haben, ist der beste, sauberste und einfachste Weg die Verwendung des CSS3-Randradius. Dies funktioniert in den meisten modernen Browsern, mit Ausnahme des typischen IE6-8, der keine Unterstützung bietet ... obwohl IE9 dies tun wird.

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

Wenn Sie wie ich und Ihre Kunden alle IE verwenden, würde ich CSS3 Pie wie oben http://css3pie.com/ empfehlen . Der einzige Nachteil ist, dass der Z-Index der Bilder durcheinander gebracht wird. Wenn Sie also einen Schieberegler verwenden, der ausgeblendet wird, können Probleme auftreten.

Wenn Sie keine Lust auf CSS3 Pie haben, würde ich http://jquery.malsup.com/corner/ empfehlen . Sie verknüpfen es einfach zusammen mit jQuery in Ihrem Header und verwenden Folgendes:

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

Es nimmt die CSS3-Deklaration auf und rendert für jeden Browser, der sie nicht unterstützt, die abgerundeten Ecken über jquery.

Wir haben beide kürzlich auf einer Kundenwebsite hier verwendet: http://www.theathenaprogramme.co.uk/

Arbeit erledigt :-) Hoffe das hilft.

Bearbeiten: Ich habe gerade bemerkt, dass dies erforderlich ist, bevor das Bild über media.php gespeichert wird. Ich denke, meine Lösung ist in diesem Fall nicht anwendbar.

Ich habe das Get Post Image Plugin verwendet, um dies hier zu tun: http://surfhatteras.com/

Get Post Image ist ein Wrapper für Get The Image WordPress Plugin und die phpThumb-Bibliothek.

Mit ihm können Sie so etwas wie <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> die Ecken eines geposteten Bildes abrunden. Oder Sie können Ihre Bilder selbst verpacken: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Vergiss nicht zu cachen! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite