Як обробити візуалізацію SVG у wordpress?

З просуванням веб-браузерів мені стає все зручніше використовувати SVGS під час кодування веб-сайтів ... особливо для піктограм та простої графіки, яку можна замінити на ходу за допомогою PNG.

Схоже, wordpress майже підтримує SVGS. Я кажу майже, тому що:

1. За замовчуванням це не допустимий тип файлу в wordpress. Тому вам потрібно додати це перед завантаженням SVG-файлів

2. Ви не можете побачити мініатюру SVG у галереї "Медіа". (див. зображення нижче)

3. Іноді, коли ви додаєте його до редактора (за допомогою кнопки додавання медіа), редактор не знає розміру svg, тому, хоча він додає svg як зображення, він має ширину та висоту нуля.

4. Коли ви натискаєте кнопку "редагувати зображення" з-за спливаючого вікна завантаження медіа, ви отримуєте повідомлення про те, що "зображення не існує". Дивіться зображення нижче.

Я добре з пунктом 1 у цьому списку, але хтось зрозумів, як виправити пункт 2 3 та 4?

Оновлення про пункт 1:

Щоб дозволити новий тип mime (наприклад, SVG), ви можете просто додати гачок у function.php

function allow_new_mime_type($mimes) {

    $mimes['svg'] = 'image/svg+xml';

    return $mimes;
}
add_filter( 'mime_types', 'allow_new_mime_type' );

Тепер ви маєте можливість завантажувати SVG. Додаткову інформацію ви можете знайти в цьому підручнику . Це вирішує лише пункт 1, який, як я вже згадував, для мене це не є проблемою (хоча я думаю, це має бути дозволено за замовчуванням).

Оновлення про пункт 2:

Я кілька копав і відслідковував функцію, яка вирішує, вкладення - це зображення чи ні. Здається, що все зводиться до цієї функції в wp-include / post.php

/**
 * Check if the attachment is an image.
 *
 * @since 2.1.0
 *
 * @param int $post_id Attachment ID
 * @return bool
 */
function wp_attachment_is_image( $post_id = 0 ) {
    $post_id = (int) $post_id;
    if ( !$post = get_post( $post_id ) )
        return false;

    if ( !$file = get_attached_file( $post->ID ) )
        return false;

    $ext = preg_match('/\.([^.]+)$/', $file, $matches) ? strtolower($matches[1]) : false;

    $image_exts = array( 'jpg', 'jpeg', 'jpe', 'gif', 'png' );

    if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )
        return true;
    return false;
}

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

Я не впевнений, чому останній, якщо оператор повертає false для svgs. Навіть якщо я не додати розширення SVG масиву $ image_exts, то перша умова має повертати вірно, чи не так?

if ( 'image/' == substr($post->post_mime_type, 0, 6)

Це перевіряє, чи 'image /' є рівним першим шести символам типу mime, що для svg є image / svg + xml (перші шість - «image /»).

ОНОВЛЕННЯ

При подальшому дослідженні здається, що проблема зовсім не в wp_attachment_is_image, а в тому, що розмір зображення (ширина та висота) не додаються до метаданих вкладень при завантаженні SVG. Це тому, що функцією для обчислення використовуваного зображення є функція php getimagesize (), яка не повертає розмір зображення для SVG. Я знайшов відповідь на StackOverflow про функції getimagesize і про те , як вести себе SVGs. Подивіться тут.

Погляньте wp_prepare_attachment_for_js(), що саме збирає метадані вкладення для використання на сторінках медіа. Одноіменний фільтр дозволяє нам додавати або змінювати метадані.

Наступний приклад можна перенести у function.php. Примітка: для цього потрібна підтримка SimpleXML в PHP.

function common_svg_media_thumbnails($response, $attachment, $meta){
    if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement'))
    {
        try {
            $path = get_attached_file($attachment->ID);
            if(@file_exists($path))
            {
                $svg = new SimpleXMLElement(@file_get_contents($path));
                $src = $response['url'];
                $width = (int) $svg['width'];
                $height = (int) $svg['height'];

                //media gallery
                $response['image'] = compact( 'src', 'width', 'height' );
                $response['thumb'] = compact( 'src', 'width', 'height' );

                //media single
                $response['sizes']['full'] = array(
                    'height'        => $height,
                    'width'         => $width,
                    'url'           => $src,
                    'orientation'   => $height > $width ? 'portrait' : 'landscape',
                );
            }
        }
        catch(Exception $e){}
    }

    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'common_svg_media_thumbnails', 10, 3);

Це не те, що ви легко зможете "зламати" плагін або якийсь невеликий набір коду.

Коротше кажучи, те, що SVG, за великим рахунком, не є "образами" в сенсі всіх зображень, що були перед ним. SVG - це векторні зображення, і перші отримують реальну тягу в Інтернеті.

Усі зображення до цього були на основі растрових зображень. Система обробки зображень WordPress була написана спеціально для вирішення цих питань, і цей притаманний дизайн розміщений у кожній точці системи.

Це основне припущення, наприклад, що зображення мають ширину та висоту. SVG не мають жодного, вони можуть бути будь-якого розміру. Існує цілий базовий "редактор" для зображень, вбудованих у WordPress, жодна функціональність яких дійсно не може застосовуватися до SVG.

Мультимедійна система повільно переробляється, з акцентом тут на "повільно". Існує багато зворотної сумісності буде підтримуватися і нових конструкцій, які будуть реалізовані. Крім того, більшість людей набагато більше зацікавлені у підтримці відео, аудіо та списків відтворення. По мірі того, як буде виконано переробку дизайну, а розділи бібліотеки стають більш скороченими, то з часом подібні речі стануть легшими підтримувати. Але його ще немає, і це не буде деякий час. Ось чому тип mime SVG не підтримується, оскільки додавання цього типу mime до тих пір, поки всі основні фрагменти не працюють, буде дорогою до зламу.

Для SVG-файлів wp_attachment_is_imageслід повернути помилкове значення, оскільки wp_attachment_is_imageвоно використовується для визначення того, чи слід показувати кнопку редактора чи image_downsizeнамагається змінити розмір зображення на ескізи тощо. Жоден з яких не працював би для SVG. Щоб правильно підтримувати SVG, вам потрібно буде написати нову систему для додавання метаданих до цих зображень цілком, а потім додати підтримку до них у всіх місцях, де можуть використовуватися метадані. Як ви можете уявити, це не мала робота.

Тільки з прочитання джерела (не тестування) я бачу, що розширення має відповідати:

if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )

який читається як (псевдокод)

якщо image/є перші 6 символів у властивості $ post об'єкта post_mime_type АБО є розширення АБО importє властивість $ post об'єктів post_mime_type і поточне розширення файлу є одним із (масив)

А це означає, що останнє твердження завжди вирішить, чи ifвиявиться правдивим чи ні.

З того, що я можу прочитати get_attached_file(), є фільтр, який дозволить підробити розширення:

return apply_filters( 'get_attached_file', $file, $attachment_id );

Іншими словами, ви можете спробувати повернути той самий файл, але з іншим розширенням. Це не буде конфліктувати з іншими частинами, оскільки wp_attachment_is_image()справедливі повертаються bool.