web-dev-qa-db-de.com

Wie füge ich automatisch abgerundete Ecken zu Thumbnails hinzu?

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

Was ich idealerweise tun möchte, ist eine Möglichkeit zu finden, so etwas in den Erstellungsprozess der Miniaturbilder selbst einzubinden und sie serverseitig zwischenzuspeichern. /wp-includes/media.php scheint keine passenden 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 Randradius auf der gesamten Website, und die Bilder müssen auf der Serverseite speziell abgerundet werden. Vielen Dank

10
Dan Gayle

Sieht so aus, als könnten Sie sich in den wp_create_thumbnail-Filter 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 einfach Ihre Manipulation vor und geben Sie das Ergebnis an wp_create_thumbnail zurück.

5
Chip Bennett

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

Für gerundete Bilder in CSS3 müssen Sie das Bild in ein Div einwickeln 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 Thumbnail anhängen.

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

Sag einfach niemandem, dass sie nicht wirklich rund sind.

3
Wyck

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 zu überprüfen, wenn es erstellt wurde, ob es diese bestimmte 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, auf den Sie gehen 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.

3
Paul Sheldrake

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

Wenn Sie IE wirklich unterstützen möchten, können Sie Modernizr verwenden, das dem Zielelement img in unfähigen Browsern eine Klasse ohne abgerundete Ecken hinzufügt.

Fügen Sie Ihren Thumbnails und in Ihrem CSS class = "round-corners" 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 mit einem zufälligen Bild auf der Titelseite von WPCandy.com durchgeführt, indem ich die Ecken mit Firebug zur Bildklasse hinzugefügt habe. Hier sind die Ergebnisse.

Vor:

enter image description here

Nach dem:

enter image description here

In Firebug eingegebenes CSS:

enter image description here

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

2
Chris_O

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 die Verwendung des Timthumb-Skripts als Ausgangspunkt:

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

Stackoverflow hat auch einen Beitrag dazu: https://stackoverflow.com/questions/609109/rounded-corners-on-images-using-php

1
chrisjlee

Welche Thumbnails möchten Sie stylen, die "Thumbnail" -Bildgröße im Allgemeinen oder Thumbnails veröffentlichen?

Beides kann einfach über CSS erreicht werden - speziell über die Eigenschaft border-radius; Die genaue Antwort hängt von Ihren genauen Anforderungen ab. Gerne aktualisiere ich.

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

1
Chip Bennett

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

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

Damit können Sie so etwas wie <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> tun, um die Ecken eines geposteten Bildes abzurunden. 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

0
two7s_clash

Haben Sie sich ccs3pie angesehen? Abgerundete Ecken und CSS3-Hacks für ie Dies sollte tun, was Sie wollen, und auch das gute alte ie zur Einhaltung der Vorgaben zwingen.

0
MartinJJ

OK das ist einfach !!

Zunächst einmal, wie die Leute gesagt haben, ist die Verwendung von css3 border-radius die beste, sauberste und einfachste Methode. Dies funktioniert in den meisten modernen Browsern, mit Ausnahme des typischen IE6-8, der keine Unterstützung bietet ... obwohl IE9 dies tut.

.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 beschrieben empfehlen http://css3pie.com/ . 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 haben, CSS3 Pie zu verwenden, empfehle ich http://jquery.malsup.com/corner/ . Sie verknüpfen es einfach in Ihrem Header zusammen mit jQuery und verwenden Folgendes:

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

Es greift die CSS3-Deklaration auf und rendert für jeden Browser, der sie nicht unterstützt, die abgerundeten Ecken per JQuery.

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

Arbeit geleistet :-) Hoffe das hilft.

Edit: Ich habe gerade bemerkt, dass Sie dies tun müssen, bevor das Bild über media.php gespeichert wird. Denke, meine Lösung ist in diesem Fall nicht anwendbar.

0
daveaspinall