Изображения Retina – настраиваемый синтаксис для вставки изображений в пост-контент

В настоящее время я занимаюсь созданием отзывчивой темы WordPress для недвижимости, и я выясняю, как правильно добавить поддержку экранов HiDPI. Я решил использовать JavaScript-решение Picturefill , которое имитирует функциональность предлагаемого элемента HTML изображения . WordPress позволяет нам создавать собственные размеры изображений, и я решил, что для каждого размера изображения (например, для отображения изображений галереи на одной странице листинга) мне понадобится четыре размера изображений:

  1. Регулярное изображение с низким разрешением для настольных устройств
  2. @ 2x hi-res изображение для настольных устройств HiDPI (в настоящее время только Retina MacBook)
  3. Меньшее изображение с низким разрешением для смартфонов (зачем смартфонам нужно загружать полноразмерные изображения?)
  4. Меньшее изображение привет-Res для смартфонов

Для планшетов я решил использовать изображения такого же размера, что и для настольных устройств, просто потому, что размер размера изображения, характерного для планшета, не так сильно отличается от рабочего стола, поэтому увеличение полосы пропускания недостаточно велико, чтобы оправдать добавление двух изображений размеры (на каждое местоположение изображения) до WordPress (low- и hi-res) и загромождение загрузок и DOM.

Теперь все прекрасно и денди, когда мы имеем дело с изображениями, которые тема автоматически вытягивает (например, миниатюры сообщений, автоматическая галерея сообщений и т. Д.), Но поскольку для работы скрипта Picturefill мне нужно выводить четыре разных пути изображения (с соответствующими медиа запросы) – как я могу использовать изображения, которые пользователь вручную помещает в почтовый контент ?

Для тех, кто не хочет читать, как работает Picturefill, вот синтаксис, который ожидает сценарий:

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </div> 

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

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

Кроме того, я знаю уже существующий плагин Wp Retina 2x , но это не совсем то, что мне нужно, поскольку мои изображения должны не только быть приветливыми, но и реагировать – я не хочу заставить пользователей смартфонов загружать ~ 800 КБ обои для рабочего стола привет-Res.

Solutions Collecting From Web of "Изображения Retina – настраиваемый синтаксис для вставки изображений в пост-контент"

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

Он использует фильтр image_send_to_editor в функции get_image_send_to_editor () .

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

Есть несколько проблем с этим подходом, самым сложным решением которого является базовый URL-адрес изображения – поскольку даже если изображение было загружено через WordPress, экземпляр в сообщении может быть полноразмерным изображением, или это может быть миниатюра. Чтобы преобразовать его в ваш массив размеров, вам нужен базовый URL-адрес изображения, а затем вы можете добавить разные размеры до конца (то есть 150×150).

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

Типичный импорт вложений выглядит так:

 <img src="http://img.wordpressask.com/images/image_name.jpg" alt="Description" width="150" height="150" class="aligncenter size-thumbnail wp-image-1237" /> 

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

 function picturefill_images($content) { if(preg_match("/<img.*?wp-image-(\d+).*?\/>/", $content, $matches); foreach($matches as $match) { $img_id = $match[1]; $new = "<div data-src='".wp_get_attachment_link($img_id, 'thumbnail')."'></div>"; $new .= "<div data-src='".wp_get_attachment_link($img_id, '300x300')."' data-media='(min-width: 400px)'></div>"; // etc, etc, etc... $content = preg_replace("/".preg_quote($match[0])."/", $new, $content); } return $content; } add_filter('the_content', 'picturefill_images'); 

Дело в том, что мы фильтруем контент для любых тегов изображений, содержащих wp-image – ####, и фиксируем конечный номер, который является идентификатором вложения. Затем мы используем id для создания замены тега с разными размерами вложений. Наконец, замените оригинальный тег изображения в содержании нашей заменой.

Опять же, это все работа над доской – непроверенная, но она должна помочь вам начать работу в правильном направлении.