Comment ajouter automatiquement des coins arrondis aux vignettes?

Je veux créer des miniatures de coins arrondis automatiquement pour un projet particulier sur lequel je travaille, en utilisant quelque chose comme ceci: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

Ce que j'aimerais idéalement faire, c'est trouver un moyen de connecter quelque chose comme ça dans le processus de création de vignettes lui-même et de le mettre en cache côté serveur. /wp-includes/media.phpne semble pas avoir de crochets applicables, donc je vais peut-être devoir rouler le mien.

Des indices sur où commencer?

EDIT: Pas en CSS. Il y a eu de bonnes suggestions à ce sujet, mais j'utilise border-radius partout sur le site, et les images doivent spécifiquement être arrondies côté serveur. Merci

On dirait que vous pouvez vous connecter au wp_create_thumbnailfiltre :

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

Faites donc votre manipulation et retournez le résultat à wp_create_thumbnail.

Même si vous pouvez traiter des coins arrondis avec Php et l'image GD (vous devrez toujours choisir une couleur d'arrière-plan), c'est beaucoup de travail / code / traitement pour ce qui peut facilement être accompli avec JavaScript ou CSS3.

Pour les images arrondies dans CSS3, vous devez envelopper l'image dans un div et faire de l'image une image de fond de ce div, pas vraiment pratique.

Je pense donc que vous devez simplement utiliser jquery, simplement mettre le script en file d'attente lorsque cela est nécessaire et ajouter la classe jquery à votre miniature via un hook ou directement.

L'astuce javascript / jquery applique essentiellement 4 gifs de coin à l'image pour la faire apparaître arrondie. Il existe plusieurs jquery qui traînent sur les interwebs tels que http://maestric.com/doc/css/rounded_corners_images .

Ne dites à personne qu'ils ne sont pas vraiment ronds.

Voici mon point de vue sur l'utilisation d'un des filtres d'image wordpress, j'ai essayé d'utiliser celui suggéré par Chip Bennett mais sans succès.

Ce que j'ai fait, c'est créer une taille personnalisée, puis vérifier chaque image telle qu'elle est créée si c'est cette taille spécifique et si c'est le cas, appliquer des filtres phpthumb. Idéalement, j'aimerais pouvoir simplement vérifier le nom de la taille d'image personnalisée, mais je n'ai pas encore compris comment le faire.

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

Si vous ajoutez ce code au fichier functions.php de votre thème, téléchargez phpthumb et définissez le chemin à parcourir. Je l'ai fait fonctionner sur mon installation locale de xampp, donc j'espère que cela devrait fonctionner aussi pour d'autres personnes. Les commentaires de phpThumb proviennent de l'exemple de démonstration simple.

Il n'y a aucune raison de ne pas le faire avec CSS, cela fonctionne et sera pris en charge dans tous les principaux navigateurs, à l'exception d'IE 8 et des versions antérieures:

Si vous voulez vraiment prendre en charge IE, vous pouvez utiliser Modernizr qui ajoutera une classe de coins sans arrondis sur l'élément img cible dans les navigateurs incapables.

Ajoutez class = "coins arrondis" à vos miniatures et dans votre css:

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

J'ai fait un test rapide sur une image aléatoire sur la première page de WPCandy.com en ajoutant les coins à la classe d'images en utilisant Firebug. Voici les résultats.

Avant:

Après:

CSS est entré dans Firebug:

Pour vos coins non arrondis, utilisez l'une des méthodes de secours si vous en avez besoin.

Quelles miniatures souhaitez-vous styliser, la taille de l'image "miniature" en général ou publier des miniatures?

Les deux peuvent facilement être réalisés via CSS - en particulier, la border-radiuspropriété; la réponse spécifique dépendra de vos besoins exacts. Je serai heureux de mettre à jour.

PS IMHO va à TimThumb / route d'image mise en cache est sous-optimale. Utilisez simplement les images générées par WordPress, aux coins carrés (qui font déjà partie du cache d'objets), et utilisez CSS pour arrondir les coins.

Lors d'une recherche sur Google, il est possible d'arrondir les coins avec GD mais les résultats ne sont pas les meilleurs; ils sont un peu irréguliers; mais c'est un appel subjectif de ma part: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Si vous devez le faire; je recommande d'utiliser le script timthumb comme point de départ:

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

Stackoverflow a également un article à ce sujet: /programming/609109/rounded-corners-on-images-using-php

Avez-vous jeté un coup d'œil aux coins arrondis ccs3pie et aux hacks CSS3, c'est-à-dire que cela devrait faire ce que vous voulez tout en forçant le bon vieux ie à se soumettre pour se conformer.

OK c'est facile !!

Tout d'abord, comme les gens l'ont dit, la meilleure façon, la plus propre et la plus simple est d'utiliser le rayon de bordure CSS3. Cela fonctionne dans la plupart des navigateurs modernes, à l'exception du IE6-8 typique qui ne prend pas en charge ... bien que IE9 fera l'affaire.

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

Donc, si vous êtes comme moi et que vos clients utilisent tous IE, je recommanderais CSS3 Pie comme ci-dessus http://css3pie.com/ . Le seul inconvénient est qu'il gâche l'index z des images, donc si vous utilisez un curseur qui s'estompe, vous risquez d'avoir des problèmes.

Si vous n'avez pas envie d'utiliser CSS3 Pie, je recommanderais http://jquery.malsup.com/corner/ . Vous le liez simplement dans votre en-tête, avec jQuery et utilisez ce qui suit:

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

Il récupère la déclaration CSS3 et pour tout navigateur qui ne la prend pas en charge, il rend les coins arrondis via jquery.

Nous avons récemment utilisé ces deux éléments sur le site Web d'un client ici: http://www.theathenaprogramme.co.uk/

Travail fait :-) J'espère que cela vous aidera.

Modifier: je viens de remarquer que vous devez effectuer cette opération avant que l'image ne soit enregistrée via media.php. Je pense que ma solution n'est pas applicable dans ce cas.

J'ai utilisé le plugin Get Post Image pour le faire ici: http://surfhatteras.com/

Get Post Image est un wrapper pour Get The Image WordPress Plugin et la bibliothèque phpThumb.

En l'utilisant, vous pouvez faire quelque chose comme <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> arrondir les coins d'une image publiée. Ou vous pouvez vous-même emballer vos images: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

N'oubliez pas de mettre en cache! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite