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

Parece que puedes conectarte a 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 );
}

Tan solo haz tu manipulación y devuelve el resultado a wp_create_thumbnail .

Aunque puede 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 puede lograrse fácilmente con JavaScript o CSS3.

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

Así que creo que deberías usar jquery, simplemente poner en cola el script cuando sea necesario y añadir la clase jquery a tu miniatura con un gancho o directamente.

El truco javascript / jquery básicamente aplica 4 gifs de esquina a la imagen para que aparezca redondeada. Hay varios jquery que se encuentran en las redes, como enlace .

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

Esta es 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 ningún éxito.

Lo que he hecho es crear un tamaño personalizado y luego verificar cada imagen a medida que se crea, si es ese tamaño específico y si luego se aplican filtros phpthumb. Idealmente, me gustaría poder simplemente 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 establezca la ruta a la que debe ir. 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 razón para no hacer esto con CSS, funciona y será compatible con todos los navegadores principales, excepto IE 8 y versiones anteriores:

Si realmente desea admitir IE, puede usar Modernizr, que agregará una clase de esquinas no redondeadas en el elemento de imagen objetivo 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 al azar en la página principal de WPCandy.com agregando las esquinas a la clase de imagen usando Firebug. Aquí están los resultados.

Antes:

Después:

CSS ingresado en Firebug:

Para tus esquinas redondeadas, utiliza uno de los métodos de respaldo si sientes que necesitas hacerlo.

¿Qué miniaturas quieres personalizar, el tamaño de imagen de la "miniatura" en general, o Publicar miniaturas?

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

P.S. En mi humilde opinión ir a TimThumb / ruta de imagen en caché es sub-óptimo. Solo 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 las esquinas con GD, pero los resultados no son los mejores; son un poco jaggy; pero esa es una llamada subjetiva de mi parte: enlace

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

Proyecto Timthumb: enlace enlace

Stackoverflow también tiene una publicación al respecto: enlace

¿Has echado un vistazo a ccs3pie esquinas redondeadas y hacks de CSS3 para ie esto debería hacer lo que quieras así como obligar a los buenos viejos, es decir, a someterse para cumplir.

OK, esto es fácil !!

Primero, como la gente ha dicho, la mejor manera, la más limpia y la más sencilla es utilizar css3 radio de borde. Esto funciona en la mayoría de los navegadores modernos, excepto el IE6-8 típico que no tiene soporte ... aunque IE9 sí.

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

Entonces, si eres como yo y tus clientes usan IE, recomendaría CSS3 Pie como se indica anteriormente enlace . 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 recomendaría enlace . Simplemente lo vincula en su encabezado, junto con jQuery y usa lo siguiente:

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

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

Recientemente usamos ambos en el sitio web de un cliente aquí: enlace

Trabajo hecho :-) Espero que esto ayude.

Editar: Notaste que necesitas 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 utilizado el complemento Get Post Image para hacer esto aquí: enlace

Get Post Image es un contenedor para Get The Image WordPress Plugin y phpThumb library.

Usándolo, puedes hacer algo como <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> para redondear las esquinas de una imagen publicada. O puede envolver sus imágenes usted mismo: enlace

No te olvides de caché! enlace