सामग्री
- ज्ञान आवश्यक आहे: मूलभूत पीएचपी आणि सीएसएस
- आवश्यक आहे: वर्डप्रेस स्थापित, पसंतीचा मजकूर संपादक
- प्रकल्प वेळ: 10 मिनिटे
आपण .नेट मासिकाच्या प्रिंट आवृत्तीचे (जर नसेल तर का नाही !?) सदस्यता घेतली असल्यास आपण पाहिले असेल की या महिन्याच्या अंकामध्ये “वर्डप्रेससह प्रतिसादात्मक डिझाईन” वर एक उत्कृष्ट लेख आहे.
लेखात, लेखक जेसी फ्रीडमॅन खरोखर प्रभावी प्रतिसाद देणारी वेबसाइट तयार करण्यासाठी मूळत: वर्डप्रेस कार्यक्षमतेचा जास्तीत जास्त फायदा करून घेण्यासाठी व मात करण्यासाठी खरोखर उपयुक्त तंत्रांची भरपाई केली आहे. आपण वर्डप्रेस सह एक प्रतिसाद साइट तयार करण्याचा विचार करत असाल तर आपण निश्चितच त्याच्या लेखाची एक प्रत उचलली पाहिजे. हे वाचणे आवश्यक आहे
नुकताच वर्डप्रेसवर माझा वैयक्तिक ब्लॉग उत्तरदायी, मोबाईल-प्रथम दृष्टिकोन वापरून पुन्हा लेखित केल्याने मला लेखातील काही तंत्राची माहिती आहे. तथापि, जे आयटम माझ्यासाठी खरोखर उभा आहे तो होता जेसीरीचा jQuery द्वारे द्रव प्रतिमे सक्षम करण्याच्या दृष्टीकोनातून.
वर्डप्रेस आणि “फ्लुईड इमेज” ची समस्या
मला खात्री आहे की आपण सर्व जागरूक ‘द्रव प्रतिमा’ आहात - जे जास्तीत जास्त रूंदीचा वापर करतात: 100% - आवश्यक आहे की प्रतिमांची निश्चित रुंदी किंवा उंची नसावी जेणेकरून ते त्यांच्या कंटेनरच्या आकारापर्यंत मोजू शकतील. दुर्दैवाने, वर्डप्रेस मीडिया लायब्ररीतून व्युत्पन्न केलेल्या प्रतिमेच्या आयामांची स्वयंचलितपणे गणना करते आणि कोणत्याही img> टॅगमध्ये संबंधित रूंदी आणि उंची विशेषता जोडते.
हे पृष्ठ प्रस्तुत गतीसाठी उत्कृष्ट आहे परंतु ते एक फेकते भव्य प्रतिसादाचे लेआउट त्यांच्या कंटेनरच्या आकारापर्यंत मर्यादित नसल्यामुळे प्रतिसादात्मक लेआउट तयार करण्याचा विचार करता तेव्हा कार्यक्षेत्रातील स्पॅनर.
ही एक समस्या आहे.
न- jQuery समाधान
त्याच्या लेखात जेसी ’jQuery वापरुन पृष्ठ एकदाच्या सर्व img> टॅग्जवरील लोड आणि रुंदी आणि उंची गुणधर्म काढण्यासाठी सूचित करते. हे नक्कीच कार्य करते परंतु माझी साइट तयार करताना मला हे साध्य करण्यासाठी जावास्क्रिप्टवर अवलंबून राहण्याची कल्पना आवडली नाही, विशेषतः जर पृष्ठावरील प्रश्नांवर बर्‍यापैकी प्रश्न असतील.
येथूनच वर्डप्रेस फिल्टर्स बचावात आली.
वर्डप्रेस कोडेक्स फिल्टरची व्याख्या अशी आहेः
"... डेटाबेसमध्ये जोडण्यापूर्वी किंवा ब्राउझरच्या स्क्रीनवर पाठविण्यापूर्वी वर्डप्रेस विविध प्रकारचे मजकूर सुधारित करण्यासाठी हूक करतो."
जसे हे निष्पन्न होते की आपल्याला हेच हवे आहे. सर्व प्रतिमांवर पृष्ठावर प्रस्तुत होण्यापूर्वी त्यांना अंतिम क्रिया म्हणून चालविण्यासाठी फिल्टर स्थापित करून, आम्ही जावास्क्रिप्टद्वारे (संभाव्य) महागड्या डीओएम हाताळणीची आवश्यकता लक्षात घेऊन रुंदी आणि उंचीचे गुणधर्म काढून टाकण्यासाठी PHP वापरू शकतो.
कोड
- /**
- RE * प्रतिसादात्मक प्रतिमा कार्ये
- */
- add_filter (’पोस्ट_थंम्बनेल_ एचटीएमएल’, ’काढून_ थंबनेल_ आयाम’, 10);
- अ‍ॅड_फिल्टर (’प्रतिमा_सेन्ड_क_संपादक’, ’हटवा_थंबनेल_ आयाम’, १०);
- कार्य काढून टाका_थंबनेल_ परिमाण (t एचटीएमएल)
- . एचटीएमएल = प्रीग_ पुनर्स्थापना (’/ (रुंदी
वरील कोडमध्ये आम्ही add_filter फंक्शन वापरुन दोन फिल्टर जोडत आहोत. पहिला युक्तिवाद ज्या फिल्टरमध्ये आपण वाकवू इच्छितो तो असतो आणि दुसरा फिल्टर कॉल केल्यावर आपल्यास कार्य करायचे असल्याचे निर्दिष्ट करतो.
आमच्या कोडमध्ये आम्ही दोन अस्पष्ट फंक्शन्समध्ये प्रवेश केला:
- post_thumbnail_html - सह पुनर्प्राप्त प्रतिमा पोस्ट थंबनेल ()
- image_send_to_editor - संपादकात प्रतिमा जोडल्या गेल्या
त्यानंतर आम्ही प्रतिमा टॅगमधून रूंदी आणि उंची दोन्ही विशेषता काढून टाकण्यासाठी नियमित अभिव्यक्ती वापरतो. आता जेव्हा आमच्या प्रतिमा ब्राउझरवर पाठविल्या जातात तेव्हा श्री मार्कोटे यांनी आम्हाला पाहिजे तसे सांगितले त्याप्रमाणे ते पूर्णपणे ‘द्रव’ बनू शकतात.
कबुलीजबाब
मला वापरण्याची कल्पना आल्यापासून कबूल केले पाहिजे add_filter माझ्या आयुष्यासाठी मी करू शकणार नाही असे गुणधर्म काढून टाकण्यासाठी मी त्यात योग्य वर्डप्रेस फिल्टर शोधून काढले.
बर्‍याच शोधानंतर मला शेवटी नथॅनिएल टेन्टर द्वारा लिहिलेल्या वर्डप्रेस स्टॅक एक्स्चेंजवरील अत्यंत उपयुक्त पोस्ट सापडली ज्याने मला आवश्यक असलेल्या दोन फिल्टर्सची माहिती दिली.
गुहेत
मला माहिती आहे की या दृष्टिकोनातील एकमेव मुख्य ड्रॉ बॅक म्हणजे तो आपल्या साइटवरील सर्व प्रतिमांमधून रुंदी आणि उंची विशेषता काढून टाकत नाही. मला ही एक समस्या असल्याचे आढळले, स्पष्टीकरणात ग्रॅव्हॅटार प्रतिमांसह वर्डप्रेस टिप्पण्यांमध्ये वापरते.
कोणाकडेही या समस्येचे निराकरण असल्यास कृपया एक टिप्पणी द्या जेणेकरून आम्हाला सर्वांचा फायदा होऊ शकेल.
मला आशा आहे की हे उपयुक्त आहे आणि वर्डप्रेस वेबसाइटवर "फ्लुइड इमेजेस" लागू करण्यासाठी जावास्क्रिप्टवर अवलंबून राहण्याचा एक पर्याय दर्शविला गेला आहे.
शब्दः डेव्हिड स्मिथ
डेव्ह स्मिथ यूकेच्या बाथ शहराच्या सुंदर शहराजवळील फ्रंट एंड डिझायनर आहे. जेव्हा तो नवीन आणि रोमांचक वेब प्रकल्पांवर काम करीत नाही तेव्हा तो बिग बॅंड जाझ गटांपासून सिम्फनी ऑर्केस्ट्रापर्यंतच्या सर्व गोष्टींमध्ये रणशिंग वाजवत असल्याचे दिसून येते. आपण ट्विटरवर डेव्हला @get_dave म्हणून पकडू शकता.
