Nilalaman
- Ang problema sa WordPress at "mga likido na imahe"
- Ang solusyon na hindi jQuery
- Ang code
- Isang pagtatapat
- Caveats
- Kailangan ng kaalaman: Pangunahing PHP at CSS
- Kinakailangan: Pag-install ng WordPress, pagpipilian ng text editor
- Oras ng proyekto: 10 minuto
Kung nag-subscribe ka sa naka-print na bersyon ng .net magazine (kung hindi, bakit hindi !?), makikita mo na ang isyu sa buwan na ito ay nagtatampok ng isang mahusay na artikulo sa "Responsive Design with WordPress".
Sa artikulo, binabalangkas ng may-akda na si Jesse Friedman ang isang pulutong ng mga talagang kapaki-pakinabang na diskarte para sa masulit, at mapagtagumpayan, taglay na pag-andar ng WordPress upang makagawa ng isang tunay na mabisang tumutugong website. Kung iniisip mong gumawa ng isang tumutugong site sa WordPress dapat mong tiyak na kunin ang isang kopya ng kanyang artikulo. Ito ay isang dapat basahin.
Ang pagkakaroon ng kamakailang muling pagtatayo ng aking personal na blog sa WordPress gamit ang isang tumutugon, mobile-first na diskarte ay pamilyar ako sa ilan sa mga diskarte na sakop sa artikulo. Gayunpaman, ang isang item na talagang nakatayo para sa akin ay ang diskarte ni Jesse sa pagpapagana ng mga likidong imahe sa pamamagitan ng jQuery.
Ang problema sa WordPress at "mga likido na imahe"
Tulad ng sigurado akong alam mo ang lahat ng 'mga likidong imahe' - na gumagamit ng maximum na lapad: 100% - hinihiling na ang mga imahe ay walang takdang lapad o taas upang maiakma nila ang laki ng kanilang lalagyan. Sa kasamaang palad, awtomatikong kinakalkula ng WordPress ang mga sukat ng mga imaheng nabuo mula sa Media library at idinaragdag ang katumbas na mga katangian ng lapad at taas sa anumang mga img> na tag.
Mahusay ito para sa bilis ng pag-render ng pahina ngunit nagtatapon ito ng a malaki at mabigat spanner sa mga gumagana pagdating sa paglikha ng mga tumutugong layout bilang mga sukat ng imahe ay hindi na napigilan sa laki ng kanilang lalagyan.
Isa yang problema.
Ang solusyon na hindi jQuery
Sa kanyang artikulong iminungkahi ni Jesse 'ang paggamit ng jQuery upang alisin ang mga katangian ng lapad at taas mula sa lahat ng mga tag na img> sa pahina kapag na-load na. Tiyak na gagana ito ngunit kapag itinatayo ang aking site ayoko ng ideya ng pag-asa sa JavaScript upang makamit ito, lalo na kung maraming mga imahe sa pahina na pinag-uusapan.
Dito nagsagip ang mga filter ng WordPress.
Tinutukoy ng codex ng WordPress ang isang filter bilang:
"... mga kawit na inilulunsad ng WordPress upang baguhin ang teksto ng iba't ibang mga uri bago idagdag ito sa database o ipadala ito sa screen ng browser."
Bilang ito ay lumabas na ito ay eksakto kung ano ang kailangan namin. Sa pamamagitan ng pag-set up ng isang filter upang tumakbo sa lahat ng mga imahe bilang pangwakas na aksyon bago ma-render ang mga ito sa pahina, maaari naming gamitin ang PHP upang alisin ang mga katangian ng lapad at taas sa gayon pag-iwas sa pangangailangan para sa (potensyal) na mamahaling pagmamanipula ng DOM sa pamamagitan ng JavaScript.
Ang code
- /**
- * Mga tumutugon na imahe na gumagana
- */
- add_filter (’post_thumbnail_html’, ’alisin_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’alisin_thumbnail_dimensions’, 10);
- alisin ang function na_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (lapad
Sa code sa itaas ay nagdaragdag kami ng dalawang mga filter gamit ang pag-andar ng add_filter. Ang unang argumento ay ang filter na nais naming mag-hook at ang pangalawa ay tumutukoy sa pagpapaandar na nais naming patakbuhin kapag ang filter ay tinawag.
Sa aming code nag-uugnay kami sa dalawang hindi malinaw na pag-andar:
- post_thumbnail_html - Mga imahe na nakuha kasama ang post_thumbnail ()
- image_send_to_editor - Mga imahe na idinagdag sa editor
Gumagamit kami pagkatapos ng isang regular na expression upang alisin ang parehong mga katangian ng lapad at taas mula sa mga tag ng imahe. Ngayon kapag naipadala ang aming mga imahe sa browser maaari silang ganap na 'likido' tulad ng sinabi sa amin ni G. Marcotte na dapat nila.
Isang pagtatapat
Kailangan kong ipagtapat sa pagkakaroon ng ideya na gumamit add_filter upang alisin ang mga katangiang hindi ko magawa para sa buhay ko na hanapin ang tamang mga filter ng WordPress upang mai-hook.
Pagkatapos ng maraming paghahanap sa wakas ay nahanap ko ang labis na kapaki-pakinabang na post na ito sa Wordpress Stack Exchange ni Nathaniel Taintor na nagbigay ng impormasyon tungkol sa dalawang filter na kailangan ko.
Caveats
Sa pagkakaalam ko ang tanging pangunahing draw-back sa diskarte na ito ay hindi nito aalisin ang mga katangian ng lapad at taas mula sa lahat ng mga imahe sa iyong site. Natagpuan ko na ito ay isang isyu, tiyak sa mga larawang Gravatar na ginagamit ng WordPress sa mga komento.
Kung ang sinuman ay may solusyon sa isyung ito mangyaring mag-iwan ng isang puna upang makinabang kaming lahat.
Inaasahan kong naging kapaki-pakinabang ito at nagpakita ng isang kahalili sa pag-asa sa JavaScript upang magpatupad ng "mga likidong imahe" sa mga website ng WordPress.
Salita: David Smith
Si Dave Smith ay taga-disenyo ng front end na nakabase malapit sa magandang lungsod ng Bath, UK. Kapag hindi siya nagtatrabaho sa mga bago at kapanapanabik na mga proyekto sa web maaari siyang matagpuan na nagpapatugtog ng trompeta sa lahat mula sa mga Big Band jazz group hanggang sa Symphony orchestras. Maaari mong abutin si Dave sa Twitter bilang @get_dave.
