Como adicionar automaticamente cantos arredondados às miniaturas?

Quero criar miniaturas de cantos arredondados automaticamente para um projeto específico em que estou trabalhando, usando algo como isto: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

O que eu idealmente gostaria de fazer é encontrar uma maneira de conectar algo assim no próprio processo de criação de miniaturas e armazená-lo em cache no servidor. /wp-includes/media.phpparece não ter nenhum gancho aplicável, então talvez eu precise rolar sozinho.

Alguma pista de onde começar?

EDIT: Não em CSS. Houve boas sugestões sobre isso, mas estou usando o raio da borda em todo o site e as imagens precisam ser arredondadas especificamente no lado do servidor. obrigado

Parece que você pode conectar-se ao 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 );
}

Então, faça sua manipulação e retorne o resultado para wp_create_thumbnail.

Mesmo que você possa processar cantos arredondados com Php e GD de imagem (você ainda terá que escolher uma cor de fundo), é uma enorme quantidade de trabalho / código / processamento para o que pode ser facilmente realizado com JavaScript ou CSS3.

Para imagens arredondadas no CSS3, é necessário agrupar a imagem em uma div e torná-la uma imagem de fundo dessa div, não muito prática.

Portanto, acho que você deve usar o jquery, simplesmente enfileirar o script quando necessário e anexar a classe jquery à sua miniatura através de um gancho ou diretamente.

O truque javascript / jquery basicamente aplica 4 gifs de canto à imagem para que ela pareça arredondada. Existem vários tipos de jquery nas interwebs, como http://maestric.com/doc/css/rounded_corners_images .

Só não diga a ninguém que eles não são realmente redondos.

Aqui está a minha opinião sobre o uso de um dos filtros de imagem wordpress, tentei usar o sugerido por Chip Bennett, mas não tive nenhum sucesso.

O que eu fiz foi criar um tamanho personalizado e, em seguida, verificar cada imagem criada se tiver esse tamanho específico e aplicar filtros phpthumb. Idealmente, gostaria de poder apenas verificar o nome do tamanho da imagem personalizada, mas ainda não descobri como fazer isso.

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

Se você adicionar esse código ao arquivo functions.php do seu tema, baixe o phpthumb e defina o caminho que você deve seguir. Eu o tenho trabalhando na minha instalação local do xampp, então espero que também funcione para outras pessoas. Os comentários do phpThumb são do exemplo simples de demonstração.

Não há razão para não fazer isso com o CSS, ele funciona e será suportado em todos os principais navegadores, exceto no IE 8 e abaixo:

Se você realmente deseja dar suporte ao IE, pode usar o Modernizr, que adicionará uma classe de cantos não arredondados no elemento img de destino em navegadores incapazes.

Adicione class = "cantos arredondados" às suas miniaturas e no seu css:

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

Fiz um teste rápido em uma imagem aleatória na primeira página do WPCandy.com adicionando os cantos à classe de imagem usando o Firebug. Aqui estão os resultados.

Antes:

Depois de:

CSS inserido no Firebug:

Para seus cantos não arredondados, use um dos métodos de fallback, se achar necessário.

Quais miniaturas você deseja estilizar, o tamanho da imagem "miniatura" em geral ou Publicar miniaturas?

Ambos podem ser facilmente realizados via CSS - especificamente, a border-radiuspropriedade; a resposta específica dependerá das suas necessidades exatas. Ficarei feliz em atualizar.

PS IMHO indo para TimThumb / rota de imagem em cache é sub-ideal. Basta usar as imagens de canto quadrado geradas pelo WordPress (que já fazem parte do cache do objeto) e use CSS para virar as esquinas.

Em uma pesquisa no Google, é possível contornar a GD, mas os resultados não são os melhores; eles são um pouco irregulares; mas é uma chamada subjetiva da minha parte: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Se você deve fazer isso; eu recomendo usar o script timthumb como ponto de partida:

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

Stackoverflow também tem um post sobre isso: /programming/609109/rounded-corners-on-images-using-php

Você deu uma olhada nos hacks ccs3pie Rounded Corners e CSS3 para, isto é, isso deve fazer o que você deseja, além de forçar os bons velhos, ou seja, a enviar para cumprir.

OK, isso é fácil !!

Primeiro, como as pessoas disseram, a maneira melhor, mais limpa e mais fácil é usar o raio de borda css3. Isso funciona na maioria dos navegadores modernos, exceto no IE6-8 típico, que não tem suporte ... embora o IE9 funcione.

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

Portanto, se você é como eu e todos os seus clientes usam o IE, recomendo o CSS3 Pie como acima http://css3pie.com/ . A única desvantagem é que ela mexe com o índice z de imagens; portanto, se você estiver usando um controle deslizante que desbota, poderá ter problemas.

Se você não gosta de usar a torta CSS3, recomendo http://jquery.malsup.com/corner/ . Você simplesmente o vincula no seu cabeçalho, junto com o jQuery e usa o seguinte:

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

Ele pega a declaração CSS3 e, para qualquer navegador que não a suporta, renderiza os cantos arredondados via jquery.

Recentemente, usamos os dois em um site de clientes aqui: http://www.theathenaprogramme.co.uk/

Trabalho feito :-) Espero que isso ajude.

Edit: Acabei de reparar que você precisa fazer isso antes que a imagem seja salva em media.php. Acho que minha solução não é aplicável neste caso.

Eu usei o plugin Get Post Image para fazer isso aqui: http://surfhatteras.com/

O Get Post Image é um invólucro para o plugin Get The Image WordPress e a biblioteca phpThumb.

Com ele, você pode fazer algo como <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> arredondar os cantos de uma imagem postada. Ou você pode embrulhar suas imagens: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Não se esqueça de armazenar em cache! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite