Como adicionar automaticamente cantos arredondados às miniaturas?


10

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


Desculpe pela recompensa +25. Eu estava atrasado para o trabalho esta manhã.
Dan Gayle #

Respostas:


5

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.


Aha! Está em um local diferente. Doçura. Deixe-me verificar isso, mas parece que você pode ter encontrado o que eu preciso.
Dan Gayle

3
Adoraria ver algum código de trabalho com esse filtro, brinquei com ele e não cheguei a lugar nenhum, desisti rapidamente.
Milo

11
@milo minha resposta tem um pouco de código que você pode experimentar
Paul Sheldrake

3

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.


3
" Para imagens arredondadas no CSS3, é necessário agrupar a imagem em uma div e transformar a imagem em uma imagem de fundo dessa div " - absolutamente não é verdade. border-radiuspode ser aplicado diretamente a uma tag IMG, sem problemas.
Chip Bennett

Esse truque do jQuery é legal. Eu ainda bastante fazê-lo Serverside para manter a quantidade de js de processamento no lado do cliente a um mínimo
Dan Gayle

3

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.


Agradável. Isso é mais parecido com o que eu estava falando!
Dan Gayle

Isso funcionou para você?
Paul Sheldrake

Ainda não tive a oportunidade de testá-lo. Obrigado embora!
Dan Gayle

2

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:

insira a descrição da imagem aqui

Depois de:

insira a descrição da imagem aqui

CSS inserido no Firebug:

insira a descrição da imagem aqui

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


Boa idéia para fazer isso usando o Modernizr. Ainda preciso do lado do servidor.
Dan Gayle

Claro, um dos sites em questão ainda tem 80% IE <9 tráfego
Dan Gayle

1

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.


11
raio da borda não se aplica às imagens. Isso é realmente complicado.
fuxia

Raio de beira no Mozilla terá os cantos quadrados apontando para fora se você aplicá-la a uma tag img
Dan Gayle

Ele deve ser aplicado como uma imagem de fundo para o wrapper div, o que é bastante impraticável.
quer

border-radius funciona diretamente em tags img no mozilla atual.
Milo

O que Milo disse. border-radiusfunciona bem em imagens. Eu o uso para comentar Gravatares no meu próprio tema.
Chip Bennett

1

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


0

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.


Isso seria ideal, mas nunca consegui que ele funcionasse de forma consistente. Eu puxei meu cabelo por cima deste.
Dan Gayle

0

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.


0

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.