Адаптивные изображения WordPress без проблем

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

Если вы похожи на меня, и хотите настроить адаптивный сайт, который относительно легко обновлять, WordPress является наиболее подходящей для этого CMS.

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

Я покажу вам, как добавить поддержку адаптивных изображений на свой сайт в виде небольшого плагина WordPress.

Разметка, которую мы в конечном итоге хотим получить

Мы будем использовать библиотеку Picturefill. На текущий момент мы используем разметку, предполагаемую библиотекой, которая точно имитирует готовящийся к релизу элемент <picture>.

<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
  <source srcset="examples/images/medium.jpg">

  <!-- резервный вариант -->
  <img srcset="examples/images/medium.jpg" alt="alt text">
</picture>

Это общий шаблон разметки, хотя она может стать немного сложнее, чтобы учитывать некоторые ошибки браузеров.

Чего мы точно не будем делать, это использовать эту разметку непосредственно в блоге, мы хотим заставить сам WordPress делать это за нас.

Тема

Все, что вам нужно изменить в вашей теме, это добавить следующую строку в файл functions.php:

add_theme_support('post-thumbnails');

Этот код гарантирует, что ваша тема дает WordPress разрешение изменять размер загруженных изображений. Без него плагин не будет работать.

Плагин

Имеет смысл реализовать нужный нам функционал именно в виде плагина WordPress, потому что нам нужно будет, чтобы он был активен, независимо от того, какую тему мы устанавливаем. Мы можем создать папку с файлом PHP, который будет содержать код самого плагина, а также копию библиотеки Picturefill:

Добавление библиотеки

function get_picturefill() {
  wp_enqueue_script('picturefill', plugins_url( '/js/picturefill.js', __FILE__ ));
}
add_action('init', 'get_picturefill');

Это обеспечивает загрузку этой библиотеки JavaScript.

Определение размеров

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

add_image_size('large-img', 1000, 702);
add_image_size('medium-img', 700, 372);
add_image_size('small-img', 300, 200);

Вы можете установить эти параметры по своему усмотрению. add_image_size имеет целый ряд параметров, которые можно настроить. Для JPG-изображения Кролика Банни размером 1024 на 768 пикселей, создается целая куча версий:

Изображение размером 936 на 702 пикселя было создано, потому что мы указали, что должно создаваться одно изображение с максимальной высотой 702 пикселя. Изображение размером 150 на 150 пикселей было создано, потому что WordPress автоматически создает квадратные миниатюры такого размера.

Создание [шорткода]

Давайте расширим наш плагин, добавим ему дополнительный функционал, и создадим шорткод адаптивных изображений. Таким образом, мы сможем правильно вставить его в содержание записи:

[responsive imageid="12" size1="0" size2="500" size3="1000"]

и он будет выводить разметку, необходимую для Picturefill.

Мы разделим это на три функции. Одна будет определять шорткод и HTML для вывода, одна - вспомогательная для возвращения текста alt, и одна специально для перебора вариантов изображения и выбора одного источника:

function tevkori_get_img_alt( $image ) {
    $img_alt = trim( strip_tags( get_post_meta( $image, '_wp_attachment_image_alt', true ) ) );
    return $img_alt;
}

function tevkori_get_picture_srcs( $image, $mappings ) {
    $arr = array();
    foreach ( $mappings as $size => $type ) {
        $image_src = wp_get_attachment_image_src( $image, $type );
        $arr[] = '<source srcset="'. $image_src[0] . '" media="(min-width: '. $size .'px)">';
    }
    return implode( array_reverse ( $arr ) );
}

function tevkori_responsive_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'imageid'    => 1,
        // Здесь вы можете добавить больше размеров для своего шорткода
        'size1' => 0,
        'size2' => 600,
        'size3' => 1000,
    ), $atts ) );

    $mappings = array(
        $size1 => 'small-img',
        $size2 => 'medium-img',
        $size3 => 'large-img'
    );

   return
        '<picture>
            <!--[if IE 9]><video style="display: none;"><![endif]-->'
            . tevkori_get_picture_srcs( $imageid, $mappings ) .
            '<!--[if IE 9]></video><![endif]-->
            <img srcset="' . wp_get_attachment_image_src( $imageid[0] ) . '" alt="' . tevkori_get_img_alt( $imageid ) . '">
            <noscript>' . wp_get_attachment_image( $imageid, $mappings[0] ) . ' </noscript>
        </picture>';
}

Затем подключаем шорткод:

add_shortcode( 'responsive', 'tevkori_responsive_shortcode' );

В идеале вы определяете здесь контрольные точки, чтобы их не нужно было передавать с помощью шорткода:

[responsive imageid="12"]

Атрибуты используются в шорткоде только в тех редких случаях, когда вы должны переопределить контрольные точки.

Изменение внешнего вида загрузчика файлов мультимедиа

Этот шорткод может оказаться чрезвычайно полезным для вас (помните, мы даже можем программно настроить в будущем разметку в соответствии с <picture>).

Но, как мы узнаем, ID изображения, которое нужно использовать? В интерфейсе загрузчика медиафайлов данная информация недоступна. Однако мы все же можем сделать этот ID доступным в загрузчике, для этого нам нужно настроить простой фильтр:

function responsive_insert_image($html, $id, $caption, $title, $align, $url) {
  return "[responsive imageid='$id' size1='0' size2='600' size3='1000']";
}
add_filter('image_send_to_editor', 'responsive_insert_image', 10, 9);

Теперь выбор и вставка изображения через редактор будет работать следующим образом:

Все работает! На картинке вы можете видеть результат нашей новой функции:

Что вы еще можете сделать:

• Если вы хотите обеспечить более широкую поддержку браузерами, вы можете подумать над тем, чтобы установить Matchmedia.js. Это позволит работать медиа запросам в более старых браузерах, которые затем автоматически переходят на Picturefill;
• Вместо того чтобы использовать шорткоды или настраивать загрузчик медиафайлов, вы можете задействовать специальную панель через дополнительные пользовательские поля;
• Вы можете настроить разметку, чтобы разрешить использование align-*, как это часто делается в WordPress. Или элементов <figure> и <figcaption>. А также тегов alt;
• Вы можете настроить определение контрольных точек через интерфейс загрузчика, вместо жесткой установки через плагин.