विषय
- ज्ञान की जरूरत: बेसिक पीएचपी और सीएसएस
- आवश्यक है: वर्डप्रेस इंस्टाल, पसंद का टेक्स्ट एडिटर
- परियोजना का समय: 10 मिनटों
यदि आप .net पत्रिका के प्रिंट संस्करण की सदस्यता लेते हैं (यदि नहीं, तो क्यों नहीं!?), आपने देखा होगा कि इस महीने के अंक में "वर्डप्रेस के साथ उत्तरदायी डिजाइन" पर एक उत्कृष्ट लेख है।
लेख में, लेखक जेसी फ्रीडमैन ने वास्तव में प्रभावी उत्तरदायी वेबसाइट बनाने के लिए, अंतर्निहित वर्डप्रेस कार्यक्षमता का अधिकतम लाभ उठाने और काबू पाने के लिए वास्तव में उपयोगी तकनीकों के भार की रूपरेखा तैयार की है। यदि आप वर्डप्रेस के साथ एक उत्तरदायी साइट बनाने की सोच रहे हैं, तो आपको निश्चित रूप से उनके लेख की एक प्रति लेनी चाहिए। यह अवश्य पढ़ा जाना चाहिए।
हाल ही में एक उत्तरदायी, मोबाइल-प्रथम दृष्टिकोण का उपयोग करके वर्डप्रेस पर अपने व्यक्तिगत ब्लॉग का पुनर्निर्माण करने के बाद, मैं लेख में शामिल कुछ तकनीकों से परिचित था। हालाँकि, एक वस्तु जो वास्तव में मेरे लिए सबसे अलग थी, वह थी जेसी के माध्यम से तरल छवियों को सक्षम करने के लिए जेसी का दृष्टिकोण।
वर्डप्रेस और "द्रव छवियों" के साथ समस्या
जैसा कि मुझे यकीन है कि आप सभी 'द्रव छवियों' से अवगत हैं - जो अधिकतम-चौड़ाई: 100% का उपयोग करते हैं - इसके लिए आवश्यक है कि छवियों की कोई निश्चित चौड़ाई या ऊंचाई न हो ताकि वे अपने कंटेनर के आकार को माप सकें। दुर्भाग्य से, वर्डप्रेस स्वचालित रूप से मीडिया लाइब्रेरी से उत्पन्न छवियों के आयामों की गणना करता है और किसी भी img> टैग में संबंधित चौड़ाई और ऊंचाई विशेषताओं को जोड़ता है।
यह पृष्ठ प्रतिपादन गति के लिए बहुत अच्छा है लेकिन यह एक फेंकता है बड़ा जब प्रतिक्रियाशील लेआउट बनाने की बात आती है तो स्पैनर काम करता है क्योंकि छवि आयाम अब उनके कंटेनर के आकार तक सीमित नहीं हैं।
ये एक समस्या है।
गैर-jQuery समाधान
अपने लेख में जेसी 'पेज पर लोड होने के बाद सभी img> टैग से चौड़ाई और ऊंचाई विशेषताओं को हटाने के लिए jQuery का उपयोग करने का सुझाव देता है। यह निश्चित रूप से काम करता है लेकिन अपनी साइट का निर्माण करते समय मुझे इसे प्राप्त करने के लिए जावास्क्रिप्ट पर भरोसा करने का विचार पसंद नहीं आया, खासकर यदि प्रश्न में पृष्ठ पर बहुत सारी छवियां थीं।
यह वह जगह है जहाँ वर्डप्रेस फ़िल्टर बचाव के लिए आए थे।
वर्डप्रेस कोडेक्स फ़िल्टर को इस प्रकार परिभाषित करता है:
"...हुक करता है कि वर्डप्रेस विभिन्न प्रकार के टेक्स्ट को डेटाबेस में जोड़ने या ब्राउज़र स्क्रीन पर भेजने से पहले संशोधित करने के लिए लॉन्च करता है।"
जैसा कि यह पता चला है कि यह वही है जो हमें चाहिए। सभी छवियों को पृष्ठ पर प्रस्तुत करने से पहले अंतिम क्रिया के रूप में चलाने के लिए एक फ़िल्टर सेट करके, हम चौड़ाई और ऊंचाई विशेषताओं को हटाने के लिए PHP का उपयोग कर सकते हैं जिससे जावास्क्रिप्ट के माध्यम से (संभावित) महंगे डोम हेरफेर की आवश्यकता को कम किया जा सकता है।
कोड
- /**
- * उत्तरदायी छवि कार्य
- */
- 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 फ़ंक्शन का उपयोग करके दो फ़िल्टर जोड़ रहे हैं। पहला तर्क वह फ़िल्टर है जिसे हम हुक करना चाहते हैं और दूसरा उस फ़ंक्शन को निर्दिष्ट करता है जिसे हम फ़िल्टर कहते समय चलाना चाहते हैं।
हमारे कोड में हम दो अस्पष्ट कार्यों में शामिल हैं:
- पोस्ट_थंबनेल_html - छवियों को retrieve के साथ पुनर्प्राप्त किया गया पोस्ट_थंबनेल ()
- image_send_to_editor - संपादक में जोड़े गए चित्र
फिर हम छवि टैग से चौड़ाई और ऊंचाई दोनों विशेषताओं को हटाने के लिए नियमित अभिव्यक्ति का उपयोग करते हैं। अब जब हमारी छवियों को ब्राउज़र में भेजा जाता है तो वे पूरी तरह से 'तरल' हो सकते हैं जैसे श्री मार्कोटे ने हमें बताया था कि उन्हें चाहिए।
स्वीकारोक्ति
मुझे स्वीकार करना होगा कि मेरे पास उपयोग करने का विचार था add_filter उन विशेषताओं को हटाने के लिए जो मैं अपने जीवन के लिए नहीं कर सका, सही वर्डप्रेस फ़िल्टर को हुक करने के लिए खोजें।
बहुत सारी खोज के बाद मैं अंततः नथानिएल टेंटोर द्वारा वर्डप्रेस स्टैक एक्सचेंज पर इस अत्यंत उपयोगी पोस्ट में आया, जिसने मुझे आवश्यक दो फिल्टर के बारे में जानकारी प्रदान की।
चेतावनियां
जहां तक मुझे पता है कि इस दृष्टिकोण का एकमात्र प्रमुख दोष यह है कि यह आपकी साइट पर सभी छवियों से चौड़ाई और ऊंचाई विशेषताओं को नहीं हटाता है। मैंने पाया कि यह एक मुद्दा है, विशेष रूप से ग्रेवाटर छवियों के साथ वर्डप्रेस टिप्पणियों में उपयोग करता है।
अगर किसी के पास इस समस्या का समाधान है तो कृपया एक टिप्पणी छोड़ दें ताकि हम सभी लाभान्वित हो सकें।
मुझे आशा है कि यह उपयोगी रहा है और वर्डप्रेस वेबसाइटों पर "द्रव छवियों" को लागू करने के लिए जावास्क्रिप्ट पर भरोसा करने के विकल्प का प्रदर्शन किया है।
शब्द: डेविड स्मिथ
डेव स्मिथ ब्रिटेन के खूबसूरत शहर बाथ के पास स्थित फ्रंट एंड डिजाइनर हैं। जब वह नए और रोमांचक वेब प्रोजेक्ट पर काम नहीं कर रहा होता है तो उसे बिग बैंड जैज़ समूहों से लेकर सिम्फनी ऑर्केस्ट्रा तक हर चीज़ में तुरही बजाते हुए पाया जा सकता है। आप डेव के साथ ट्विटर पर @get_dave के रूप में संपर्क कर सकते हैं।
