web-dev-qa-db-fra.com

Comment ajouter automatiquement des coins arrondis aux vignettes?

Je veux créer automatiquement des vignettes de coins arrondis 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, c’est trouver un moyen d’intégrer quelque chose comme cela au processus même de création de vignettes et de le mettre en mémoire cache au niveau du serveur. /wp-includes/media.php ne semble pas avoir de hooks utilisables, alors je pourrais avoir à rouler le mien.

Des indices sur par où commencer?

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

imagespost-thumbnails
10
Dan Gayle

On dirait que vous pouvez vous connecter au filtre wp_create_thumbnail :

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

Alors, faites simplement votre manipulation et renvoyez le résultat à wp_create_thumbnail.

5
Chip Bennett

Même si vous pouvez traiter les angles arrondis avec Php et l’image Gd (vous devrez toujours choisir une couleur de fond), c’est une énorme quantité de travail/code/traitement pour ce qui peut être facilement accompli avec JavaScript ou CSS3.

Pour les images arrondies en CSS3, vous devez envelopper l'image dans une div et en faire une image d'arrière-plan de cette div, ce qui n'est pas vraiment pratique.

Donc, je pense que vous devriez simplement utiliser jquery, mettre en file d'attente le script si nécessaire et ajouter la classe jquery à votre vignette via un hook ou directement.

L’astuce javascript/jquery consiste à appliquer 4 gifs de coin à l’image pour la rendre arrondie. Il y en a plusieurs qui traînent sur les interwebs tels que http://maestric.com/doc/css/rounded_corners_images .

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

3
Wyck

Voici mon 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 est de créer une taille personnalisée, puis de vérifier chaque image telle qu'elle est créée, si elle a cette taille spécifique et ensuite, d'appliquer des filtres phththumb. Idéalement, j'aimerais pouvoir vérifier le nom de la taille d'image personnalisée, mais je n'ai pas encore trouvé 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 que vous devriez être prêt à parcourir. Je l'ai sur mon installation locale de xampp, donc j'espère que cela fonctionnera aussi pour d'autres personnes. Les commentaires phpThumb sont tirés de l'exemple de démonstration simple.

3
Paul Sheldrake

Il n'y a aucune raison de ne pas faire cela avec CSS. Cela fonctionne et sera supporté par tous les principaux navigateurs sauf IE 8 et inférieur:

Si vous voulez vraiment supporter IE, vous pouvez utiliser Modernizr qui ajoutera une classe de coins arrondis sur l'élément img cible dans les navigateurs inactifs.

Ajoutez class = "rounded-corners" à vos vignettes et à vos 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 de la première page de WPCandy.com en ajoutant les coins à la classe d'images à l'aide de Firebug. Voici les résultats.

Avant:

enter image description here

Après:

enter image description here

CSS est entré dans Firebug:

enter image description here

Pour vos coins sans arrondis, utilisez l’une des méthodes de repli si vous en sentez le besoin.

2
Chris_O

Sur une recherche google, il est possible d'arrondir les angles avec D.ieu, mais les résultats ne sont pas optimaux. ils sont un peu en désordre; 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.comhttp://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow a aussi un article à ce sujet: https://stackoverflow.com/questions/609109/rounded-corners-on-images-using-php

1
chrisjlee

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

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

P.S. IMHO aller à TimThumb/route de l'image en cache est sous-optimale. Utilisez simplement les images à coins carrés générées par WordPress (qui font déjà partie du cache d’objets) et utilisez CSS pour arrondir les angles.

1
Chip Bennett

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

Get Post Image est un wrapper pour le plugin Get The Image WordPress 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'); ?> pour contourner les coins d'une image publiée. Ou vous pouvez envelopper vos images vous-même: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

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

0
two7s_clash

Avez-vous jeté un œil à ccs3pie coins arrondis et hacks CSS3 pour ie cela devrait faire ce que vous voulez ainsi que forcer les bons vieux ie dans la soumission à se conformer.

0
MartinJJ

OK c'est facile !!

Tout d’abord, comme l’ont dit les gens, le meilleur, le plus propre et le plus simple est d’utiliser css3 border-radius. Cela fonctionne dans la plupart des navigateurs modernes, à l'exception du IE6-8 typique qui n'a pas de support ... bien que IE9 le fasse.

.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 que ça dérange avec le z-index des images, donc si vous utilisez un curseur qui s'estompe, vous risquez d'avoir des problèmes.

Si vous ne souhaitez pas utiliser CSS3 Pie, je vous recommande 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 le prend pas en charge, affiche les angles arrondis via jquery.

Nous avons récemment utilisé les deux sur un site Web de clients, ici: http://www.theathenaprogramme.co.uk/

Travail accompli :-) J'espère que ça aide.

Edit: Vous venez de remarquer que vous devez le faire avant que l'image ne soit enregistrée via le fichier media.php. Pense que ma solution n'est pas applicable dans ce cas.

0
daveaspinall