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


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.