Як автоматично додавати закруглені кути до ескізів?


10

Я хочу створити автоматично закруглені кутові мініатюри для певного проекту, над яким я працюю, використовуючи щось подібне: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

Що б я хотів зробити, це знайти спосіб підключити щось подібне до самого процесу створення мініатюр та кешувати його на стороні сервера. /wp-includes/media.phpСхоже, немає жодних застосовних гачків, тому мені, можливо, доведеться катати свої власні.

Будь-які підказки з того, з чого почати?

EDIT: Не в CSS. З цього приводу було кілька хороших пропозицій, але я використовую радіус кордону по всьому сайту, а зображення, зокрема, потрібно округлити на стороні сервера. Дякую


Вибачте за щедрість +25. Я запізнився на роботу сьогодні вранці.
Ден Гейл

Відповіді:


5

Схоже, ви можете зачепитись у 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.


Ага! Це в іншому місці. Солодкість. Перегляньте це, але, схоже, ви могли знайти те, що мені потрібно.
Ден Гейл

3
Я хотів би побачити якийсь робочий код з цим фільтром, я пограв з ним і нікуди не потрапив, досить швидко відмовився.
Міло

1
@milo у моїй відповіді є трохи коду, який ви можете спробувати
Пол Шелдрейк

3

Незважаючи на те, що ви можете обробити закруглені кути за допомогою PHp та зображення GD (вам все одно доведеться вибрати колір фону), це дуже багато роботи / коду / обробки, що можна легко виконати за допомогою JavaScript або CSS3.

Для округлих зображень у CSS3 вам потрібно загортати зображення у діві та робити зображення фоновим зображенням цього діва, не дуже практичним.

Тому я думаю, що вам слід просто використовувати jquery, просто запхнути сценарій, коли це потрібно, і додати клас jquery до вашої мініатюри через гачок або безпосередньо.

Трюк javascript / jquery в основному застосовує до зображення 4 кутових gif, щоб воно виглядало округлим. Існують різні jquery, що лежать на інтерверті, наприклад http://maestric.com/doc/css/rounded_corners_images .

Просто не кажіть нікому, що вони насправді не круглі.


3
" Для округлих зображень у CSS3 вам потрібно загортати зображення у div та робити зображення фоновим зображенням цього div " - абсолютно не відповідає дійсності. border-radiusможна застосувати безпосередньо до тегу IMG, без жодних проблем.
Чіп Беннетт

Цей трюк jQuery класний. Я б іще зробив це на сервері, щоб мінімізувати обробку js на стороні клієнта
Ден Гейл

3

Ось я взявся за використання одного з фільтрів 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;
}

Якщо ви додасте цей код у файл function.php теми вашої теми, завантажте phpthumb і встановіть шлях, який ви повинні пройти. У мене це працює над моєю локальною установкою xampp, тому, сподіваємось, вона повинна працювати і для інших людей. Коментарі phpThumb - із простого демонстраційного прикладу.


Приємно. Це більше за те, про що я говорив!
Dan Gayle

Це працювало для вас?
Пол Шелдрейк

Ще не було можливості протестувати це. Дякую, хоча!
Ден Гейл

2

Немає причин не робити цього з 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-округлих кутів використовуйте один із резервних методів, якщо вам здається, що це потрібно.


Гарна ідея зробити це за допомогою Modernizr. Все-таки потрібна сторона сервера.
Ден Гейл

Звичайно, на одному з розглянутих сайтів все ще є 80% IE <9 трафіку
Dan Gayle

1

Які ескізи ви хочете стилювати, розмір зображення "мініатюри" взагалі або розміщувати мініатюри?

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

PS IMHO, який прямує до маршруту TimThumb / кешоване зображення, є недостатньо оптимальним. Просто використовуйте згенеровані WordPress квадратні кутові зображення (які вже є частиною об'єкта кешу) та використовуйте CSS для округлення кутів.


1
рамковий радіус не застосовується до зображень. Це справді хитро.
фуксія

Радіус кордону на Mozilla матиме квадратні кути, які вказуватимуть, якщо застосувати його до тегів img
Dan Gayle

Він повинен бути застосований як фонове зображення для обгортки div, що досить недоцільно.
Wyck

border-radius працює безпосередньо над тегами img у поточній мозіллі.
Міло

Що сказав Міло. border-radiusдобре працює на зображеннях. Я використовую це для коментарів Gravatars у власній Темі.
Чіп Беннетт

1

Під час пошуку в Google можна закручувати кути за допомогою GD, але результати не найбільші; вони трохи тугі; але це суб'єктивний дзвінок з мого боку: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Якщо ви повинні це зробити; я рекомендую використовувати сценарій тимчасового пальця як вихідну точку:

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

Stackoverflow також має публікацію про це: /programming/609109/rounded-corners-on-images-using-php


0

Ви подивилися на ccs3pie Округлені кути та хаки CSS3, тобто це повинно зробити те, що ви хочете, як змусити старий добрий, тобто підпорядкований виконувати.


Це було б ідеально, але я ніколи не змушував його послідовно працювати. Я витягнув волосся над цим.
Dan Gayle

0

ОК, це просто !!

Спочатку, як люди сказали, найкращий, найчистіший і найпростіший спосіб - це використовувати css3 межа-радіус. Це працює в більшості сучасних браузерів, за винятком типового 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. Думаю, що моє рішення не застосовується в цьому випадку.


0

Я використовував плагін Get Post Image для цього тут: http://surfhatteras.com/

Get Post Image - це обгортка для отримання плагіна WordPress Image та бібліотеки 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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.