Съдържание
- Проблемът с WordPress и „течните изображения“
- Решението, различно от jQuery
- Кодът
- Изповед
- Предупреждения
- Необходими знания: Основни PHP и CSS
- Изисква: Инсталиране на WordPress, избран текстов редактор
- Време на проекта: 10 минути
Ако се абонирате за печатната версия на списание .net (ако не, защо не !?), ще видите, че броят на този месец включва отлична статия на тема „Отзивчив дизайн с WordPress“.
В статията авторът Джеси Фридман очертава много полезни техники за максимално използване и преодоляване на присъщата функционалност на WordPress, за да създаде наистина ефективен отзивчив уебсайт. Ако мислите да създадете отзивчив сайт с WordPress, определено трябва да вземете копие от неговата статия. Това е задължително четиво.
След като наскоро преустроих личния си блог в WordPress, използвайки отзивчив подход за мобилни устройства, бях запознат с някои от техниките, разгледани в статията. Единственият елемент, който наистина се открои за мен, беше подходът на Джеси за активиране на течни изображения чрез jQuery.
Проблемът с WordPress и „течните изображения“
Тъй като съм сигурен, че всички сте наясно с „течни изображения“ - които използват максимална ширина: 100% - изискват изображенията да нямат фиксирана ширина или височина, за да могат да се мащабират до размера на контейнера си. За съжаление, WordPress автоматично изчислява размерите на изображенията, генерирани от медийната библиотека и добавя съответните атрибути за ширина и височина към всякакви тагове img>.
Това е чудесно за скорост на рендиране на страници, но хвърля a масивна гаечен ключ в работата, когато става въпрос за създаване на отзивчиви оформления, тъй като размерите на изображението вече не са ограничени до размера на техния контейнер.
Това е проблем.
Решението, различно от jQuery
В статията си Джеси предлага използването на jQuery за премахване на атрибутите width и height от всички тагове img> на страницата, след като се зареди. Това със сигурност работи, но при изграждането на моя сайт не ми хареса идеята да разчитам на JavaScript, за да постигна това, особено ако на въпросната страница имаше много изображения.
Тук на помощ дойдоха филтрите на WordPress.
Кодексът на WordPress определя филтър като:
„... куки, които WordPress стартира, за да модифицира текст от различни типове, преди да го добави към базата данни или да го изпрати на екрана на браузъра.“
Оказва се, че това е точно това, от което се нуждаем. Чрез настройване на филтър, който да се изпълнява върху всички изображения като последно действие, преди да бъдат изобразени на страницата, можем да използваме PHP, за да премахнем атрибутите width и height, като по този начин заобикаляме необходимостта от (потенциално) скъпа 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 - изображения, добавени към редактора
След това използваме регулярен израз, за да премахнем атрибутите width и height от маркерите на изображението. Сега, когато нашите изображения се изпращат до браузъра, те могат да бъдат напълно „течни“, точно както г-н Marcotte ни каза, че трябва.
Изповед
Трябва да призная, че съм имал идеята да използвам add_filter за да премахна атрибути, не можах през целия си живот да намеря правилните филтри на WordPress, към които да се закача.
След много търсене най-накрая попаднах на тази изключително полезна публикация в Wordpress Stack Exchange от Nathaniel Taintor, която предостави информацията за двата филтъра, от които се нуждаех.
Предупреждения
Доколкото знам, единственият основен недостатък на този подход е, че той не премахва атрибутите ширина и височина от всички изображения на вашия сайт. Открих, че това е проблем, по-специално с изображенията на Gravatar, които WordPress използва в коментарите.
Ако някой има решение на този проблем, моля, оставете коментар, за да можем всички да се възползваме.
Надявам се, че това е било полезно и е демонстрирало алтернатива на разчитането на JavaScript за внедряване на „флуидни изображения“ в уеб сайтове на WordPress.
Думи: Дейвид Смит
Дейв Смит е преден дизайнер, базиран близо до красивия град Бат, Великобритания. Когато не работи по нови и вълнуващи уеб проекти, може да бъде намерен да свири на тромпет във всичко - от джаз групите на Big Band до симфоничните оркестри. Можете да настигнете Дейв в Twitter като @get_dave.
