Wie füge ich Miniaturansichten automatisch abgerundete Ecken hinzu?

10

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

Dan Gayle
quelle
Entschuldigung für die +25 Prämie. Ich war heute Morgen zu spät zur Arbeit.
Dan Gayle

Antworten:

5

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.

Chip Bennett
quelle
Aha! Es ist an einem anderen Ort. Süße. Lassen Sie mich das überprüfen, aber es sieht so aus, als hätten Sie vielleicht gefunden, was ich brauche.
Dan Gayle
3
Ich würde gerne einen funktionierenden Code mit diesem Filter sehen, ich habe damit herumgespielt und bin nirgendwo hingekommen, habe ziemlich schnell aufgegeben.
Milo
1
@milo meine Antwort hat ein bisschen Code, den Sie ausprobieren können
Paul Sheldrake
3

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.

Wyck
quelle
3
" 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 " - absolut nicht wahr. border-radiuskann ohne Probleme direkt auf ein IMG-Tag angewendet werden.
Chip Bennett
Dieser jQuery-Trick ist cool. Ich würde es NOCH lieber auf der Serverseite tun, um die Menge an js-Verarbeitung auf der Client-Seite auf ein Minimum zu beschränken
Dan Gayle
3

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.

Paul Sheldrake
quelle
Nett. Dies entspricht eher dem, worüber ich gesprochen habe!
Dan Gayle
Hat das bei dir funktioniert?
Paul Sheldrake
Ich hatte noch keine Gelegenheit, es zu testen. Trotzdem danke!
Dan Gayle
2

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:

Geben Sie hier die Bildbeschreibung ein

Nach:

Geben Sie hier die Bildbeschreibung ein

CSS in Firebug eingegeben:

Geben Sie hier die Bildbeschreibung ein

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

Chris_O
quelle
Gute Idee, dies mit Modernizr zu tun. Brauche es aber immer noch serverseitig.
Dan Gayle
Natürlich hat eine der fraglichen Sites immer noch 80% IE <9 Verkehr
Dan Gayle
1

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.

Chip Bennett
quelle
1
Der Randradius gilt nicht für Bilder. Das ist wirklich schwierig.
Fuxia
Rand Radius auf Mozilla wird die quadratischen Ecken zeigen, wenn Sie es auf ein img-Tag anwenden
Dan Gayle
Es muss als Hintergrundbild für Div Wrapper angewendet werden, was ziemlich unpraktisch ist.
Wyck
Der Randradius funktioniert direkt mit IMG-Tags in der aktuellen Mozilla.
Milo
Was Milo gesagt hat. border-radiusfunktioniert gut auf Bildern. Ich benutze es für Kommentar Gravatars in meinem eigenen Thema.
Chip Bennett
1

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

Chrisjlee
quelle
0

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.

MartinJJ
quelle
Das wäre ideal, aber ich habe es nie dazu gebracht, konsequent zu arbeiten. Ich habe meine Haare über diesen gezogen.
Dan Gayle
0

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.

Daveaspinall
quelle
0

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

two7s_clash
quelle