如何自动将圆角添加到缩略图？

我想使用以下方法为正在处理的特定项目自动创建圆角缩略图：http : //webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

我理想地想做的是找到一种方法，将类似这样的内容挂接到缩略图创建过程本身，并在服务器端缓存它。/wp-includes/media.php似乎没有任何适用的钩子，所以我可能不得不自己动手。

关于从哪里开始的任何线索？

编辑： 不在CSS中。对此有一些好的建议，但是我在整个站点上都使用border-radius，并且图像特别需要在服务器端进行四舍五入。谢谢

看起来您可以连接到wp_create_thumbnail过滤器：

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

因此，只需进行操作，然后将结果返回到即可wp_create_thumbnail。

即使您可以用Php和图像GD处理圆角（您仍然必须选择背景色），但要使用JavaScript或CSS3可以轻松完成很多工作/代码/处理。

对于CSS3中的圆形图像，您必须将图像包装在div中，并使图像成为该div的背景图像，这并不实际。

因此，我认为您应该只使用jquery，只需在需要时将脚本排入队列，然后通过钩子或直接将jquery类附加到缩略图即可。

javascript / jquery技巧基本上将4个角gif应用于图像，以使其显得圆润。在Internet上有各种各样的jquery，例如http://maestric.com/doc/css/rounded_corners_images。

只是不要告诉任何人他们不是真的。

这是我使用一种wordpress图像过滤器的尝试，我尝试使用Chip Bennett建议的一种，但没有成功。

我要做的是创建一个自定义大小，然后检查创建的每个图像（如果是该特定大小），然后应用phpthumb过滤器。理想情况下，我希望能够仅检查自定义图像尺寸的名称，但是我还没有弄清楚该怎么做。

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

如果您将该代码添加到主题的functions.php文件中，请下载phpthumb并设置路径。我已经在本地安装的xampp上使用了它，因此希望它也应该对其他人也有用。phpThumb注释来自简单的演示示例。

没有理由不使用CSS来执行此操作，并且所有主流浏览器都将支持它，但IE 8及以下版本除外：

如果您确实想支持IE，则可以使用Modernizr，它将在无法使用的浏览器中的目标img元素上添加一类不四舍五入的角。

将class =“ rounded-corners”添加到缩略图和CSS中：

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

我通过使用Firebug在WPCandy.com的首页上对随机图像进行了快速测试，方法是将角落添加到图像类中。这是结果。

之前：

后：

CSS进入Firebug：

对于您的.no-rounded拐角，如果您认为需要，可以使用一种备用方法。

您要设置哪些缩略图样式，通常的“缩略图”图像大小或“发布缩略图”？

两者都可以通过CSS轻松实现-具体来说就是border-radius属性；具体答案将取决于您的确切需求。我很乐意更新。

PS IMHO转到TimThumb /缓存的图像路由不理想。只需使用WordPress生成的方角图像（这些图像已经成为对象缓存的一部分），然后使用CSS即可解决问题。

通过google搜索，可以使用GD进行圆角处理，但结果并不是最好的；他们有点锯齿；但这是我的主观呼吁：http : //www.assemblysys.com/dataServices/php_roundedCorners.php

如果必须这样做；我建议使用timthumb脚本作为起点：

Timthumb项目： http ://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow也有关于此的帖子： https : //stackoverflow.com/questions/609109/rounded-corners-on-images-using-php

您是否查看过ccs3pie 圆角和CSS3 hack，例如，它应该做您想做的事情，也可以迫使旧版本（例如旧版）服从提交。

好的，这很容易！

首先，就像人们所说的那样，最好，最干净，最简单的方法是使用css3 border-radius。该功能适用​​于大多数现代浏览器，除了不支持的典型IE6-8之外……尽管IE9可以。

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

因此，如果您像我一样，并且您的客户都使用IE，那么我建议使用CSS3 Pie，如http://css3pie.com/所示。唯一的缺点是它会使图像的z-index混乱，因此，如果使用的滑块会褪色，则可能会出现问题。

如果您不喜欢使用CSS3 Pie，则建议使用http://jquery.malsup.com/corner/。您只需将其与jQuery一起链接到标题中，然后使用以下代码：

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

它获取CSS3声明，对于任何不支持它的浏览器，它都通过jquery渲染圆角。

我们最近在以下客户网站上使用了这两种方法：http：//www.theathenaprogramme.co.uk/

已完成的工作:-)希望这会有所帮助。

编辑：刚刚注意到您需要通过media.php保存图像之前完成此操作。认为我的解决方案不适用于这种情况。

我已经使用“获取帖子图像”插件在此处执行以下操作：http : //surfhatteras.com/

获取帖子图像是获取图像WordPress插件和phpThumb库的包装。

使用它，您可以做一些像<?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> 圆角发布图像的操作。或者，您也可以自己包装图像：http : //phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

不要忘记缓存！http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite