Comment ajouter automatiquement des coins arrondis aux vignettes?


10

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


Désolé pour la prime de +25. J'étais en retard au travail ce matin.
Dan Gayle

Réponses:


5

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.


Ah! C'est dans un endroit différent. Douceur. Laissez-moi le vérifier, mais il semble que vous ayez trouvé ce dont j'ai besoin.
Dan Gayle

3
J'adorerais voir du code de travail avec ce filtre, j'ai joué avec et je suis arrivé nulle part, j'ai abandonné assez rapidement.
Milo

1
@milo ma réponse contient un peu de code que vous pouvez essayer
Paul Sheldrake

3

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.


3
" Pour les images arrondies dans CSS3, vous devez envelopper l'image dans un div et faire de l'image une image d'arrière-plan de ce div " - absolument pas vrai. border-radiuspeut être appliqué directement à une balise IMG, sans aucun problème.
Chip Bennett

Ce truc jQuery est cool. Je préfère quand même le faire côté serveur pour limiter au minimum le nombre de traitements js côté client
Dan Gayle

3

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.


Agréable. C'est plus dans le sens de ce dont je parlais!
Dan Gayle

Cela a-t-il fonctionné pour vous?
Paul Sheldrake

Je n'ai pas encore eu l'occasion de le tester. Merci quand même!
Dan Gayle

2

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:

entrez la description de l'image ici

Après:

entrez la description de l'image ici

CSS est entré dans Firebug:

entrez la description de l'image ici

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


Bonne idée de le faire en utilisant Modernizr. Mais j'en ai toujours besoin côté serveur.
Dan Gayle

Bien sûr, l'un des sites en question a encore 80% de trafic IE <9
Dan Gayle

1

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.


1
border-radius ne s'applique pas aux images. C'est vraiment délicat.
fuxia

Le rayon de la bordure sur Mozilla aura les coins carrés pointant si vous l'appliquez à un tag img
Dan Gayle

Il doit être appliqué comme image d'arrière-plan pour le wrapper div, ce qui est assez peu pratique.
Wyck

border-radius fonctionne directement sur les balises img dans le mozilla actuel.
Milo

Ce que Milo a dit. border-radiusfonctionne très bien sur les images. Je l'utilise pour commenter Gravatars dans mon propre thème.
Chip Bennett

1

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


0

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.


Ce serait idéal, mais je ne l'ai jamais fait fonctionner de manière cohérente. J'ai arraché mes cheveux sur celui-ci.
Dan Gayle

0

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.


0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.