Как автоматически добавить закругленные углы к миниатюрам?

Я хочу создать автоматически миниатюры закругленных углов для конкретного проекта, над которым я работаю, используя что-то вроде этого: http://webdeveloperplus.com/php/create-thumbnail-images-with-ounded-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 угловых изображения к изображению, чтобы оно выглядело округлым. На межсетях лежат различные jquery, такие как http://maestric.com/doc/css/ounded_corners_images .

Только не говори никому, что они на самом деле не круглые.

Вот мое мнение об использовании одного из фильтров изображений WordPress, я попытался использовать тот, который предложил Чип Беннетт, но безуспешно.

Я создал собственный размер, а затем проверил каждое изображение в том виде, в котором оно было создано, если это определенный размер, а затем примените фильтры 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 = "руглые углы "к вашим эскизам и в вашем CSS:

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

Я быстро проверил случайное изображение на первой странице WPCandy.com, добавив углы к классу изображений с помощью Firebug. Вот результаты.

Перед:

После:

CSS вошел в Firebug:

Для ваших .no-закругленных углов используйте один из запасных методов, если вам это нужно.

Какие миниатюры вы хотите стилизовать, размер изображения «миниатюры» в целом или «Миниатюры сообщений»?

И то, и другое может быть легко реализовано с помощью CSS - в частности, border-radiusсвойства; конкретный ответ будет зависеть от ваших точных потребностей. Я буду рад обновить.

PS ИМХО переход к TimThumb / кэшированный образ маршрута неоптимален. Просто используйте сгенерированные WordPress изображения с прямоугольными углами (которые уже являются частью кеша объектов) и используйте CSS для скругления углов.

После поиска в Google можно закруглить углы с помощью GD, но результаты не самые лучшие; они немного зазубренные; но это субъективный вызов с моей стороны: http://www.assemblysys.com/dataServices/php_oundedCorners.php

Если вы должны сделать это; я рекомендую использовать сценарий timthumb в качестве отправной точки:

Проект Timthumb: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

В Stackoverflow также есть сообщение об этом: /programming/609109/ounded-corners-on-images-using-php

Вы взглянули на ccs3pie Rounded Corners и CSS3 хаки, т. Е. Это должно делать то, что вы хотите, а также принуждать старое доброе, т. Е. Подчиняться .

ОК, это легко!

Сначала, как говорили люди, самый лучший, самый чистый и простой способ - использовать 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-индексом изображений, поэтому, если вы используете ползунок, который исчезает, у вас могут возникнуть проблемы.

Если вам не нравится использовать CSS3 Pie, я бы порекомендовал http://jquery.malsup.com/corner/ . Вы просто связываете его в своем заголовке вместе с jQuery и используете следующее:

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

Он принимает декларацию CSS3 и для любого браузера, который его не поддерживает, визуализирует закругленные углы с помощью jquery.

Недавно мы использовали оба эти варианта на веб-сайте клиентов здесь: http://www.theathenaprogramme.co.uk/

Работа сделана :-) Надеюсь, это поможет.

Редактировать: только что заметил, что это нужно сделать, прежде чем изображение будет сохранено через media.php. Думаю, мое решение не применимо в этом случае.

Я использовал плагин Get Post Image, чтобы сделать это здесь: http://surfhatteras.com/

Get Post Image - это оболочка для плагина Get The 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