Поддержка Retina-дисплеев в темах WordPress

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

Есть довольно много плагинов, доступных пользователям WordPress, которые позволяют добавлять поддержку Retina к своему сайту. Поиск по репозиторию WordPress выдает следующие решения:

• WP Retina 2x
• Retina Image Support
• Retina for WP
• Simple WP Retina
• wp-retina

Каждый плагин использует свой собственный подход по добавлению поддержки Retina, однако все они в той или иной степени базируются на двух компонентах: скрипте определения экранного разрешения и функции создания изображений для Retina-экранов. Первое, что потребуется сделать разработчикам, желающим добавить данную возможность напрямую к своим темам – это подключить правильный JS-файл для определения пользовательского разрешения экрана.

Обнаружение Retina-дисплеев

Выводить изображение высокого качества требуется лишь в том случае, если конечный пользователь работает с Retina-дисплеем. Для наших целей самый лучший способ сделать это состоит в использовании JS. Я предпочитаю использовать скрипт retina.js от Imulus. Он весит всего лишь 4 Кб, добавляет всю необходимую фронт-энд функциональность, которая требуется для обнаружения Retina-дисплея и загрузки верного изображения.

Подключаем скрипт

Скопируем файл retina.js в папку /js с темой. Файл должен находиться в верном месте, чтобы мы могли подключить его.

Добавим следующий код в файл темы functions.php:

add_action( 'wp_enqueue_scripts', 'retina_support_enqueue_scripts' );
/**
 * Enqueueing retina.js
 *
 * This function is attached to the 'wp_enqueue_scripts' action hook.
 */
function retina_support_enqueue_scripts() {
    wp_enqueue_script( 'retina_js', get_template_directory_uri() . '/js/retina.js', '', '', true );
}

Больше для обнаружения дисплеев ничего не требуется. Далее уже будут идти функции, которые будут отвечать за создание изображений высокого качества.

Создание изображений

Вы должны убедиться в том, что каждый раз при загрузке изображения будет создаваться его высококачественная версия и сохраняться с приставкой @2x, которая будет добавляться к названию файла. Скрипт обнаружения будет разыскивать эту приставку, чтобы при необходимости загружать Retina-версию изображения.

Настраиваем функцию

Чтобы убедиться в том, что Retina-изображение будет автоматически создаваться всякий раз при загрузке изображения, вы должны сцепиться с соответствующим фильтром WordPress. Корректным фильтром в данном случае является wp_generate_attachment_metadata.

Добавляем следующий код к своему файлу темы functions.php:

add_filter( 'wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2 );
/**
 * Retina images
 *
 * This function is attached to the 'wp_generate_attachment_metadata' filter hook.
 */
function retina_support_attachment_meta( $metadata, $attachment_id ) {
    foreach ( $metadata as $key => $value ) {
        if ( is_array( $value ) ) {
            foreach ( $value as $image => $attr ) {
                if ( is_array( $attr ) )
                    retina_support_create_images( get_attached_file( $attachment_id ), $attr['width'], $attr['height'], true );
            }
        }
    }
 
    return $metadata;
}

Функция проверяет, является ли загруженный файл изображением. Если да, то она обрабатывает его, используя функцию retina_support_create_images().

Создаем изображение

После проверки, было ли изображение загружено, нам нужно создать функцию, которая будет обрабатывать и создавать высококачественную Retina-версию изображения.

Добавляем в functions.php следующий код:

/**
 * Create retina-ready images
 *
 * Referenced via retina_support_attachment_meta().
 */
function retina_support_create_images( $file, $width, $height, $crop = false ) {
    if ( $width || $height ) {
        $resized_file = wp_get_image_editor( $file );
        if ( ! is_wp_error( $resized_file ) ) {
            $filename = $resized_file->generate_filename( $width . 'x' . $height . '@2x' );
 
            $resized_file->resize( $width * 2, $height * 2, $crop );
            $resized_file->save( $filename );
 
            $info = $resized_file->get_size();
 
            return array(
                'file' => wp_basename( $filename ),
                'width' => $info['width'],
                'height' => $info['height'],
            );
        }
    }
    return false;
}

Теперь Retina-изображение будет создаваться в двойном размере от оригинала. Приставка @2x будет добавлена к названию файла, чтобы скрипт обнаружения мог корректно работать во фронт-энде.

В принципе, это практически все, в чем вы нуждаетесь. Единственное, что можно добавить – это функцию, которая будет все подчищать после того, как изображение будет удалено.

Задаем очистку

Если пользователь удаляет изображение из медиа-библиотеки, вы можете также удалить все retina-изображения, которые были созданы на его основе.

Поместите заключительный фрагмент кода в файл темы functions.php:

add_filter( 'delete_attachment', 'delete_retina_support_images' );
/**
 * Delete retina-ready images
 *
 * This function is attached to the 'delete_attachment' filter hook.
 */
function delete_retina_support_images( $attachment_id ) {
    $meta = wp_get_attachment_metadata( $attachment_id );
    $upload_dir = wp_upload_dir();
    $path = pathinfo( $meta['file'] );
    foreach ( $meta as $key => $value ) {
        if ( 'sizes' === $key ) {
            foreach ( $value as $sizes => $size ) {
                $original_filename = $upload_dir['basedir'] . '/' . $path['dirname'] . '/' . $size['file'];
                $retina_filename = substr_replace( $original_filename, '@2x.', strrpos( $original_filename, '.' ), strlen( '.' ) );
                if ( file_exists( $retina_filename ) )
                    unlink( $retina_filename );
            }
        }
    }
}

Заключение

Реализовать тему, готовую к Retina-дисплеям, можно очень легко и быстро. Воспользовавшись несколькими функциями, а также одним дополнительным JS-файлом, вы можете сделать так, чтобы ваши пользователи видели привлекательные изображения на всех типах экранов.

Источник: wp.tutsplus.com