Comment ajouter automatiquement des coins arrondis aux vignettes?

10

Je souhaite créer automatiquement des vignettes de coins arrondis pour un projet particulier sur lequel je travaille, en utilisant quelque chose comme ceci: enlace

Ce que j'aimerais idéalement, c’est trouver un moyen d’intégrer quelque chose comme cela au processus de création de vignettes lui-même et de le mettre en 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. Nous avons formulé de bonnes suggestions à ce sujet, mais j'utilise border-radius sur tout le site. Les images doivent en particulier être arrondies côté serveur. Merci

    
posée Dan Gayle 30.04.2011 - 01:08

9 réponses

5

On dirait que vous pouvez vous accrocher à la wp_create_thumbnail filter :

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 votre manipulation et renvoyez le résultat à wp_create_thumbnail .

    
réponse donnée Chip Bennett 02.05.2011 - 18:20
3

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 beaucoup 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 un div et en faire une image d'arrière-plan de ce div, ce qui n'est pas vraiment pratique.

Je pense donc que vous devriez simplement utiliser jquery, simplement mettre en file d'attente le script si nécessaire et ajouter la classe jquery à votre vignette via un crochet 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 sites Web, tels que enlace .

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

    
réponse donnée Wyck 30.04.2011 - 02:02
3

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 s’il s’agit d’une taille spécifique, puis d’appliquer des filtres phpthumb. Idéalement, j'aimerais pouvoir vérifier le nom de la taille de l'image personnalisée, mais je n'ai pas encore trouvé comment 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 d'accès, vous devriez être prêt à partir. 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.

    
réponse donnée Paul Sheldrake 06.05.2011 - 10:34
2

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 les versions antérieures:

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 non capables.

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 angles à la classe d'images à l'aide de Firebug. Voici les résultats.

Avant:

Après:

CSS est entré dans Firebug:

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

    
réponse donnée Chris_O 02.05.2011 - 19:35
1

Quelles miniatures souhaitez-vous styliser, la taille d'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.

    
réponse donnée Chip Bennett 30.04.2011 - 01:58
1

Lors d’une recherche google, il est possible de contourner GD, mais les résultats ne sont pas optimaux. ils sont un peu en désordre; mais c’est un appel subjectif de ma part: enlace

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

Projet Timthumb: enlace enlace

Stackoverflow a également publié un article à ce sujet: enlace

    
réponse donnée chrisjlee 05.05.2011 - 19:41
0

Avez-vous examiné ccs3pie Coins arrondis et hacks CSS3, par exemple , cela devrait faire ce que vous voulez ainsi que forcer le bon vieux c.-à-d. à se soumettre pour se conformer.

    
réponse donnée MartinJJ 03.05.2011 - 08:31
0

OK c'est facile !!

Tout d’abord, comme l’ont dit les gens, le meilleur moyen, le plus propre et le plus simple, consiste à utiliser CSS3 border-radius. Cela fonctionne dans la plupart des navigateurs modernes, à l'exception de la version typique d'IE6-8, qui ne prend pas en charge ... bien que IE9 le fera.

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

ALORS, si vous êtes comme moi et que vos clients utilisent tous IE, je recommanderais CSS3 Pie comme ci-dessus enlace . Le seul inconvénient est que cela perturbe 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 recommanderais enlace . 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, affiche les coins arrondis via jquery.

Nous avons récemment utilisé ces deux éléments sur un site Web client à l'adresse suivante: enlace

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

Modifier: 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.

    
réponse donnée daveaspinall 06.05.2011 - 08:24
0

J'ai utilisé le plug-in Get Post Image pour le faire ici: enlace

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 arrondir les coins d'une image publiée. Vous pouvez également emballer vous-même vos images: enlace

N'oubliez pas de mettre en cache! enlace

    
réponse donnée two7s_clash 09.05.2011 - 02:42

Lire d'autres questions sur les étiquettes