¿Cómo agregar automáticamente esquinas redondeadas a las miniaturas?

Quiero crear miniaturas de esquinas redondeadas automáticamente para un proyecto en particular en el que estoy trabajando, usando algo como esto: http://webdeveloperplus.com/php/create-thumbnail-images-with-itated-corners/

Lo que idealmente me gustaría hacer es encontrar una manera de conectar algo como esto al proceso de creación de miniaturas en sí y almacenarlo en caché en el servidor. /wp-includes/media.phpno parece tener ningún gancho aplicable, por lo que podría tener que tirar el mío.

¿Alguna pista sobre por dónde empezar?

EDITAR: no en CSS. Ha habido algunas buenas sugerencias sobre esto, pero estoy usando un radio de borde en todo el sitio, y las imágenes específicamente deben redondearse en el lado del servidor. Gracias

Parece que puedes conectarlo al wp_create_thumbnailfiltro :

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

Así que solo haz tu manipulación y devuelve el resultado wp_create_thumbnail.

Aunque podría procesar esquinas redondeadas con Php e imagen GD (aún tendrá que elegir un color de fondo), es una gran cantidad de trabajo / código / procesamiento para lo que se puede lograr fácilmente con JavaScript o CSS3.

Para las imágenes redondeadas en CSS3, debe envolver la imagen en un div y hacer que la imagen sea una imagen de fondo de ese div, no es realmente práctico.

Así que creo que debería usar jquery, simplemente poner en cola el script cuando sea necesario y agregar la clase jquery a su miniatura a través de un gancho o directamente.

El truco javascript / jquery básicamente aplica 4 gifs de esquina a la imagen para que parezca redondeada. Hay varios jquery que mienten en las interwebs, como http://maestric.com/doc/css/itated_corners_images .

Simplemente no le digas a nadie que no son realmente redondos.

Aquí está mi opinión sobre el uso de uno de los filtros de imagen de WordPress, intenté usar el sugerido por Chip Bennett pero no tuve éxito.

Lo que he hecho es crear un tamaño personalizado y luego verificar cada imagen como se creó si es ese tamaño específico y si es así, aplicar filtros phpthumb. Idealmente, me gustaría poder verificar el nombre del tamaño de imagen personalizado, pero aún no he descubierto cómo hacerlo.

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 agrega ese código al archivo functions.php de su tema, descargue phpthumb y configure el camino que debería seguir. Lo tengo funcionando en mi instalación local de xampp, así que espero que también funcione para otras personas. Los comentarios de phpThumb son del ejemplo de demostración simple.

No hay ninguna razón para no hacer esto con CSS, funciona y será compatible con todos los principales navegadores, excepto IE 8 y versiones posteriores:

Si realmente desea admitir IE, puede usar Modernizr, que agregará una clase de esquinas no redondeadas en el elemento img de destino en navegadores incapaces.

Agregue class = "rounded-corners" a sus miniaturas y en su css:

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

Hice una prueba rápida en una imagen aleatoria en la portada de WPCandy.com agregando las esquinas a la clase de imagen usando Firebug. Aquí están los resultados.

Antes de:

Después:

CSS ingresó en Firebug:

Para sus esquinas redondeadas .no, use uno de los métodos alternativos si cree que lo necesita.

¿Qué miniaturas desea diseñar, el tamaño de la imagen en "miniatura" en general, o publicar miniaturas?

Ambos se pueden lograr fácilmente a través de CSS, específicamente, la border-radiuspropiedad; La respuesta específica dependerá de sus necesidades exactas. Estaré encantado de actualizar.

PS IMHO ir a TimThumb / ruta de imagen en caché es subóptimo. Simplemente use las imágenes de esquina cuadrada generadas por WordPress (que ya son parte de la caché de objetos) y use CSS para redondear las esquinas.

En una búsqueda en Google, es posible redondear esquinas con GD, pero los resultados no son los mejores; son un poco irregulares; pero esa es una llamada subjetiva de mi parte: http://www.assemblysys.com/dataServices/php_itatedCorners.php

Si debes hacer esto; Recomiendo usar el script timthumb como punto de partida:

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

Stackoverflow también tiene una publicación sobre esto: /programming/609109/itated-corners-on-images-using-php

¿Has echado un vistazo a las esquinas redondeadas ccs3pie y los hacks CSS3 para, por ejemplo, esto debería hacer lo que quieres, así como forzar a los viejos, es decir, a someterse para cumplir?

OK, esto es fácil !!

Primero, como la gente ha dicho, la forma mejor, más limpia y más fácil es usar css3 border-radius. Esto funciona en la mayoría de los navegadores modernos, excepto el típico IE6-8 que no tiene soporte ... aunque IE9 lo hará.

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

Entonces, si usted es como yo y sus clientes usan IE, entonces recomendaría CSS3 Pie como http://css3pie.com/ . El único inconveniente es que se mete con el índice z de las imágenes, por lo que si usa un control deslizante que se desvanece, puede tener problemas.

Si no te gusta usar CSS3 Pie, te recomiendo http://jquery.malsup.com/corner/ . Simplemente vincúlelo en su encabezado, junto con jQuery y use lo siguiente:

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

Recoge la declaración CSS3 y para cualquier navegador que no lo admita, representa las esquinas redondeadas a través de jquery.

Recientemente utilizamos ambos en el sitio web de un cliente aquí: http://www.theathenaprogramme.co.uk/

Trabajo realizado :-) Espero que esto ayude.

Editar: Acabo de notar que necesita hacer esto antes de que la imagen se guarde a través de media.php. Creo que mi solución no es aplicable en este caso.

He usado el complemento Obtener imagen de publicación para hacer esto aquí: http://surfhatteras.com/

Get Post Image es un contenedor para el plugin Get The Image WordPress Plugin y la biblioteca phpThumb.

Al usarlo, puede hacer algo como <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> redondear las esquinas de una imagen publicada. O puede envolver sus imágenes usted mismo: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

¡No te olvides de guardar en caché! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite