如何自动为缩略图添加圆角?

时间:2011-04-29 作者:Dan Gayle

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

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

有什么线索可以从哪里开始吗?

编辑:Not in CSS. 关于这一点有一些很好的建议,但我在整个网站上都使用了边界半径,特别需要在服务器端对图像进行圆角处理。谢谢

9 个回复
最合适的回答,由SO网友:Chip Bennett 整理而成

看起来你可以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 );
}
所以只需进行操作,并将结果返回给wp_create_thumbnail.

SO网友:Wyck

尽管您可以使用Php和image GD处理圆角(您仍然需要选择背景色),但对于JavaScript或CSS3可以轻松完成的工作来说,这需要大量的工作/代码/处理。

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

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

javascript/jquery技巧基本上对图像应用4个角GIF,使其看起来更圆。在interwebs上有各种jquery,例如http://maestric.com/doc/css/rounded_corners_images.

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

SO网友:Paul Sheldrake

下面是我对使用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;
}
如果您将该代码添加到主题的函数中。php文件,下载phpthumb并设置您应该可以选择的路径。我已经在本地安装的xampp上运行了它,所以希望它也能为其他人工作。phpThumb注释来自简单的演示示例。

SO网友:Chris_O

没有理由不使用CSS执行此操作,除IE 8及以下版本外,所有主流浏览器都支持此操作:

如果你真的想支持IE,你可以使用Modernizr,它会在浏览器中的目标img元素上添加一个无圆角的类。

在缩略图和css中添加class=“圆角”:

.rounded-corners {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px;
}
我对WPCandy首页上的一张随机图像进行了快速测试。com,通过使用Firebug向image类添加角点。以下是结果。

之前:

enter image description here

之后:

enter image description here

CSS输入Firebug:

enter image description here

为您的。没有圆角如果您觉得有必要,请使用一种回退方法。

SO网友:Chip Bennett

您想要设置什么样的缩略图,一般的“缩略图”图像大小,还是发布缩略图?

这两者都可以通过CSS轻松完成—具体来说border-radius 所有物具体答案将取决于您的确切需求。我很乐意更新。

P、 IMHO去TimThumb/缓存的图像路由是次优的。只需使用WordPress生成的直角图像(已经是对象缓存的一部分),并使用CSS来圆角。

SO网友:chrisjlee

在谷歌搜索中,有可能通过GD绕过弯路,但结果并不是最好的;它们有点参差不齐;但这是我的主观要求:http://www.assemblysys.com/dataServices/php_roundedCorners.php

如果你必须这样做;我建议使用timthumb脚本作为起点:

Timthumb project:http://timthumb.googlecode.comhttp://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow also has a post about this: https://stackoverflow.com/questions/609109/rounded-corners-on-images-using-php

SO网友:MartinJJ

你看过ccs3pie了吗Rounded Corners And CSS3 hacks for ie 这应该做你想做的事情,同时迫使好的老ie服从。

SO网友:daveaspinall

好的,这很简单!!

首先,正如人们所说,最好、最干净、最简单的方法是使用css3边界半径。除了典型的IE6-8不支持。。。虽然IE9可以。

.round {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
所以,如果你像我一样,你的客户都使用IE,那么我推荐CSS3派,如上所述http://css3pie.com/. 唯一的缺点是它会弄乱图像的z索引,因此如果使用淡入淡出的滑块,可能会出现问题。

如果你不喜欢用CSS3派,我建议你http://jquery.malsup.com/corner/. 您只需将其与jQuery一起链接到标题中,并使用以下内容:

<script>
        $(function(){
        $(\'.round\').corner();
    });
</script>
它选择CSS3声明,对于任何不支持它的浏览器,它通过jquery呈现圆角。

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

工作完成:-)希望这有帮助。

Edit: 刚刚注意到,您需要在通过媒体保存图像之前完成此操作。php。我认为我的解决方案不适用于这种情况。

SO网友:two7s_clash

我在这里使用了Get Post Image插件:http://surfhatteras.com/

Get-Post-Image是Get-Image 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

结束

相关推荐

Resizing all images

我刚刚更改了博客的主题,由于页面宽度很小,它打破了布局。我之前的大多数图片(附在帖子中)的宽度都在600px左右,现在我需要按450px的比例调整它们的大小。如何一次性调整它们的大小?有这个插件吗?P、 美国:编写CSS规则是一个很好的选择,我已经做到了。但我认为调整图像大小也会减少每个页面的下载开销!