Содержание
- Проблема с WordPress и «плавными изображениями»
- Решение, отличное от jQuery
- Код
- Признание
- Предостережения
- Знания необходимы: Базовый PHP и CSS
- Требует: Установка WordPress, текстовый редактор по выбору
- Время проекта: 10 минут
Если вы подпишетесь на печатную версию журнала .net (если нет, почему бы и нет !?), вы увидите, что в номере этого месяца есть отличная статья на тему «Адаптивный дизайн с WordPress».
В статье автор Джесси Фридман обрисовывает в общих чертах множество действительно полезных методов, позволяющих максимально использовать и преодолеть встроенную функциональность WordPress для создания действительно эффективного адаптивного веб-сайта. Если вы думаете о создании адаптивного сайта на WordPress, вам обязательно стоит взять копию его статьи. Это обязательно к прочтению.
Недавно перестроив свой личный блог на WordPress с использованием адаптивного подхода, ориентированного на мобильные устройства, я был знаком с некоторыми методами, описанными в статье. Однако единственным моментом, который мне особенно понравился, был подход Джесси к включению плавных изображений через jQuery.
Проблема с WordPress и «плавными изображениями»
Как я уверен, вы все знаете, что для «жидких изображений», в которых используется max-width: 100%, требуется, чтобы изображения не имели фиксированной ширины или высоты, чтобы их можно было масштабировать до размера своего контейнера. К сожалению, WordPress автоматически вычисляет размеры изображений, созданных из библиотеки Media, и добавляет соответствующие атрибуты ширины и высоты к любым тегам img>.
Это отлично подходит для скорости рендеринга страницы, но вызывает массивный гаечный ключ в разработке, когда дело доходит до создания адаптивных макетов, поскольку размеры изображений больше не ограничиваются размером их контейнера.
Это проблема.
Решение, отличное от jQuery
В своей статье Джесси предлагает использовать jQuery для удаления атрибутов ширины и высоты из всех тегов img> на странице после ее загрузки. Это определенно работает, но при создании своего сайта мне не понравилась идея полагаться на JavaScript для достижения этой цели, особенно если на рассматриваемой странице было много изображений.
Здесь на помощь пришли фильтры WordPress.
Кодекс WordPress определяет фильтр как:
«... хуки, которые WordPress запускает для изменения текста различных типов перед добавлением его в базу данных или отправкой на экран браузера».
Оказывается, это именно то, что нам нужно. Настроив фильтр для запуска на всех изображениях в качестве последнего действия перед их отображением на странице, мы можем использовать PHP для удаления атрибутов ширины и высоты, тем самым устраняя необходимость (потенциально) дорогостоящих манипуляций с DOM через JavaScript.
Код
- /**
- * ФУНКЦИИ ОТВЕТСТВЕННОГО ИЗОБРАЖЕНИЯ
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- функция remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (ширина
В приведенном выше коде мы добавляем два фильтра с помощью функции add_filter. Первый аргумент - это фильтр, к которому мы хотим подключиться, а второй указывает функцию, которую мы хотим запускать при вызове фильтра.
В нашем коде мы подключаемся к двум малоизвестным функциям:
- post_thumbnail_html - изображения, полученные с помощью post_thumbnail ()
- image_send_to_editor - изображения добавлены в редактор
Затем мы используем регулярное выражение для удаления атрибутов ширины и высоты из тегов изображений. Теперь, когда наши изображения отправляются в браузер, они могут быть полностью «плавными», как сказал нам г-н Маркотт.
Признание
Должен признаться, у меня возникла идея использовать add_filter чтобы удалить атрибуты, я не мог найти правильные фильтры WordPress, чтобы подключиться.
После долгих поисков я, наконец, наткнулся на чрезвычайно полезный пост Натаниэля Тейнтора на Wordpress Stack Exchange, который предоставил информацию о двух необходимых мне фильтрах.
Предостережения
Насколько мне известно, единственным серьезным недостатком этого подхода является то, что он не удаляет атрибуты ширины и высоты из всех изображений на вашем сайте. Я обнаружил, что это проблема, особенно с изображениями Gravatar, которые WordPress использует в комментариях.
Если у кого-то есть решение этой проблемы, пожалуйста, оставьте комментарий, чтобы мы все могли извлечь выгоду.
Я надеюсь, что это было полезно и продемонстрировало альтернативу использованию JavaScript для реализации «плавных изображений» на веб-сайтах WordPress.
Слова: Дэвид Смит
Дэйв Смит - дизайнер фасадов, живущий недалеко от прекрасного города Бат, Великобритания. Когда он не работает над новыми захватывающими веб-проектами, его можно встретить играющим на трубе во всем, от джазовых групп Big Band до симфонических оркестров. Вы можете связаться с Дэйвом в Твиттере как @get_dave.
