Eu quero criar miniaturas de cantos arredondados automaticamente para um projeto específico em que estou trabalhando, usando algo assim: enlace
O que eu gostaria de fazer é encontrar uma maneira de inserir algo parecido com isso no próprio processo de criação de miniaturas e armazená-lo em cache. /wp-includes/media.php não parece ter ganchos aplicáveis, então eu posso ter que rolar sozinho.
Alguma pista sobre por onde começar?
EDITAR: Não em CSS. Houve boas sugestões sobre isso, mas estou usando o raio de borda em todo o site, e as imagens precisam ser arredondadas no lado do servidor. Obrigado
Parece que você pode acessar o 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 );
}
Portanto, faça sua manipulação e retorne o resultado para wp_create_thumbnail .
Mesmo que você possa processar cantos arredondados com Php e imagem GD (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. / p>
Para imagens arredondadas em CSS3, você precisa envolver a imagem em uma div e tornar a imagem uma imagem de fundo dessa div, que não é realmente prática.
Então, eu acho que você deve usar apenas o jquery, basta 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 torná-la arredondada. Existem várias jquery sobre as interwebs, como enlace .
Apenas não diga a ninguém que eles não são realmente redondos.
Aqui está minha opinião sobre o uso de um dos filtros de imagem do wordpress, eu 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 como ela é criada se for esse tamanho específico e, em seguida, aplicar filtros phpthumb. Idealmente, gostaria de poder verificar apenas 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, faça o download do phpthumb e defina o caminho que você deve seguir. Eu tenho que trabalhar na minha instalação local do xampp, então espero que funcione para outras pessoas também. 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 que funciona e será suportado em todos os principais navegadores, exceto no IE 8 e abaixo:
Se você realmente quiser dar suporte ao IE, você pode usar o Modernizr, que adicionará uma classe de cantos sem arredondamento no elemento img de destino em navegadores incapazes.
Adicione class="round-corners" à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;
}
Eu 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:
CSS entrou no Firebug:
Para seus cantos arredondados, use um dos métodos de fallback se achar que precisa.
Quais miniaturas você deseja estilizar, o tamanho da imagem "miniatura" em geral ou "Post Thumbnails"?
Ambos podem ser facilmente realizados via CSS - especificamente, a propriedade border-radius ; a resposta específica dependerá de suas necessidades exatas. Ficarei feliz em atualizar.
P.S. IMHO indo para TimThumb / rota da imagem em cache é sub-ótima. Basta usar as imagens de canto quadrado geradas pelo WordPress (que já fazem parte do cache de objetos) e usar CSS para arredondar os cantos.
Após uma pesquisa no google, é possível arredondar cantos com GD, mas os resultados não são os melhores; eles são um pouco jaggy; mas isso é uma chamada subjetiva da minha parte: enlace
Se você precisa fazer isso; Eu recomendo usar o script timthumb como ponto de partida:
Projeto Timthumb: enlace enlace
Stackoverflow também tem um post sobre isso: enlace
Você já deu uma olhada no ccs3pie cantos arredondados e CSS3 hacks para isto é isso deve fazer o que você quiser além de forçar a boa idade, ou seja, a submissão para cumprir.
OK, isso é fácil !!
Primeiro, como as pessoas disseram que a melhor, mais limpa e mais fácil é usar o css3 border-radius. Isso funciona na maioria dos navegadores modernos, exceto o típico IE6-8 que não tem suporte ... embora o IE9 faça isso..round {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Então, se você é como eu e todos os seus clientes usam o IE, então eu recomendo CSS3 Pie como acima enlace . A única desvantagem é que ele mexe com z-index de imagens, portanto, se você estiver usando um controle deslizante que desvanece você pode ter problemas.
Se você não gosta de usar o CSS3 Pie, eu recomendo enlace . Você simplesmente o vincula ao 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 suporte, renderiza os cantos arredondados via jquery.
Recentemente, usamos esses dois em um site de clientes aqui: enlace
Trabalho feito :-) Espero que isso ajude.
Editar: Só percebi que você precisa que isso seja feito antes que a imagem seja salva via media.php. Acho que a minha solução não é aplicável neste caso.
Eu usei o plug-in Get Post Image para fazer isso aqui: enlace
Get Post Image é um wrapper para Obter o Plugin Image WordPress e biblioteca phpThumb.
Ao usá-lo, você pode fazer algo como <?php get_post_image ('w=200&zc=1&fltr[]=ric|30|30'); ?> para arredondar os cantos de uma imagem postada. Ou você pode quebrar suas imagens você mesmo: enlace
Não se esqueça de armazenar em cache! enlace
Tags post-thumbnails images