सिद्धार्थ जी फोटो पर कैप्शन लगाने के बारे में पूछ रहे थे। मेरी समझ में यह आया कि वे चित्र का विवरण देते शब्द चित्र के साथ चिपकाना चाहते हैं। ब्लॉगस्पॉट के पोस्ट एडीटर में यह सरलता से सम्भव नही। फ्लिकर से आप अपनी फोटो पर डिस्क्रिप्शन फील्ड में विवरण भर कर अगर सीधे ब्लॉग करें तो चित्र के नीचे केप्शन के रूप में डिस्क्रिप्शन आ जाता है। पर वह ब्लॉगिंग का सरल/सुविधायुक्त तरीका नहीं है। मैने विण्डोज लाइवराइटर के साथ कुछ प्रयोग पहले किये थे, जिनका विवरण यहां पर मिल सकता है।
कालांतर में मैने कई पोस्टों में पुलकोट में चित्र इन्सर्ट कर उसका सब-टाइटल साथ जोड़ा था। उदाहरण के लिये आप यह रेगुलरहा सुकुल वाली पोस्ट का अवलोकन करें। पुलकोट का जुगाड़ आप सागरचन्द नाहर जी के ब्लॉग पर पायेंगे।
अपनी पिछली पोस्ट में मैने डा. कल्ला के चित्र के नीचे उनके नाम का सब-टाइटल (केप्शन) दिया था। वह देने के लिये मैने एक HTML स्क्रिप्ट का प्रयोग किया था। आप पिछली पोस्ट के अंश का चित्र दाईं ओर देखें। इस चित्र में ड़ा. कल्ला के फोटो के आस-पास दस पिक्सल का मार्जिन रखा गया है, जिससे उनका चित्र और लेख आपस में बम्प करते - सटे हुये न प्रतीत हों।
इस प्रयोग के लिये आप इस प्रकार जुगाड़ कर सकते हैं -
यह रही HTML स्क्रिप्ट। यह केप्शन अगर बहुत लम्बा हो तो भी चित्र के इर्दगिर्द ही रहेगा! - आप HTML स्क्रिप्ट का चित्र (बायें) देखें जिसे मैने ड़ा. कल्ला के चित्र के लिये प्रयोग किया था। इस स्क्रिप्ट को यहां से डाउनलोड कर सकते हैं।
- इस स्क्रिप्ट में float: left का अर्थ चित्र को बायीं ओर लगाने से है। अगर आपको चित्र दायीं ओर लगाना है तो float: right का प्रयोग करें।
- आप padding-top: 1px या padding-bottom: 1px निकाल सकते हैं।
- ड़ा. कल्ला का नाम चित्र में दायीं ओर एलाइन है। आप अगर केप्शन बाईं ओर या मध्य में एलाइन करना चाहें तो text-align: left या text-align: center का प्रयोग करें।
- इस HTML स्क्रिप्ट में केप्शन AAAAAAAA है। आप केप्शन बदल कर जो रखना चाहें, वह लिख दें।
- यह HTML स्क्रिप्ट अपनी पोस्ट पर यथास्थान लगा कर चित्र बिना ले-आउट (लेफ्ट/राइट/सेण्टर) के लोड करें। फिर चित्र पर कर्सर को ले जा कर ड्रैग करें और केप्शन (AAAAAAAA) के पहले ले आयें।
- अगर आपका लोड किया चित्र 250 पिक्सेल से बड़ा/छोटा है तो आप HTML स्क्रिप्ट में तदानुसार width: ---px सेट करे। अर्थात पिक्सेल कम/ज्यादा करें।
ऊपर मैने HTML स्क्रिप्ट के चित्र के लिये margin-right: 40px का रखा है, जिससे कि लिस्ट-टेक्स्ट की नम्बरिंग (1., 2., --- आदि) न दबे। टेक्स्ट एलाइन लेफ्ट (text-align: left) रखा है। और कृपया, "यह रही HTML स्क्रिप्ट...." नामक केप्शन का अवलोकन करें; जो उस चित्र के नीचे बायें एलाइन है, और है चित्र की चौड़ाई की सीमा में ही!
श्री विजयशंकर चतुर्वेदी जी ने टिप्पणी की थी कि बुरी पोस्ट कब लिखेंगे? और मैने देर नहीं लगाई। मुझे पूरा अविश्वास है कि पहले सर्राटा पठन में मित्रगण इस पोस्ट में से कुछ जूस निकाल पायेंगे। कुछ लोग सटक लेंगे और कुछ लिहाजवश टेनटेटिव सी टिप्पणी कर जायेंगे।
है ही सूखी सी पोस्ट! 
हमने सोचा था के यह आदमी टोटल बकझकिया है,
ReplyDeleteगुरु, ये तो सरो-सामां-लीवर-ए-चारागर निकला!
हाहाहाहाहाहा!
पोस्ट सूखी नहीं, अपने लिए बहुत गरिष्ठ, है पचाने को कसरत करनी पड़ेगी। मात्र चहलकदमी से काम नहीं चलेगा।
ReplyDeleteबहुत ही अच्छी जानकारी, अति सुगम तरीके से दी आपने !
ReplyDeleteमेरे जैसा गदहा भी समझ जाये, गुरु कोई ऎसे ही नहीं कहलाता !
अचपन पचपन के बच्चों को भी यह टिप्स देना चाहेंगे,
कि मैं बरजोरी इसको चुरा कर वहाँ डाल दूँ ?
इतनी जानकारी शुदा और बेहतरीन पोस्ट लिख कर सोच रहे हैं कि विजय भाई की शिकायत दूर कर ली. अरे, बहुत कोशिश करिये, अभी तो कुछ भी नहीं कर पायें हैं और शायद तब भी बुरी पोस्ट लिखना आपके बस में न आ पाये. ये जिम्मेदारी हम पर छोड़िये. हा हा!!
ReplyDeleteबस लिहाजवश आया हूं.. :)
ReplyDeleteमान गए हजूर कि आप फ़ुल्टू तकनीकी हो, अपन के पल्ले तो पड़ता नई ये सब!
ReplyDeleteआप अपने ब्लॉग में पता नही क्या क्या करते रहते हैं ........ कभी कभी सोचता हूँ आपसे ब्लोगिंग की ट्यूशन ले लूँ. :D
ReplyDeleteदेखियेगा, यह भी टाप टेन पोस्ट मे शामिल होगी। तकनीक को सरल भाषा मे समझा पाना भी किसी हुनर से कम नही।
ReplyDeleteगजब कर दिये हैं साहेब, आपका शुक्रिया ...
ReplyDeleteजानकारीपूर्ण पोस्ट. हार्दिक आभार. आगे भी आपसे बहुत कुछ सीखने को मिलता रहेगा.
ReplyDeleteगुरु, प्रातःकाल ५ बजे से अब तक बिना नहाए-धोये समझने की कोशिश कर रहा हूँ. कुछ पल्ले नहीं पड़ रहा! अरे भाई, जो आदमी अपनी पोस्ट में लिंक लगाना तक नहीं जानता, उसे आप सीधे पीएचडी का पर्चा थमा रहे हैं?
ReplyDeleteतुलसी बाबा ने स्पेशल मेरे लिए एक दोहा लिखा था-
फूलहिं-फरहीं न बेंत, जदपि सुधा बरसहिं जलद,
मूरख ह्रदय न चेत, जो गुरु मिलैं ज्ञानदत्त सम.
बुरी पोस्ट लिखने वाले भौत लोग हैं जी। आप तो अच्छी में लगे रहियेजी।
ReplyDeleteटेकनीकल पोस्ट है।
इश्क और टेकनीकल पोस्ट के मामले धीमे धीमे ही परवान चढ़ते हैं।
हम भी समझ ही लेगे एक दिन।
जमाये रहिये जी।
@ विजयशंकर चतुर्वेदी - आप अब नहा धो लें। किसी को टिप्पणी न करियेगा - बुरी पोस्ट कब लिखेंगे?
ReplyDeleteलोग तुरंत लिख कर बताने में लग जायेंगे!
जैसे मैं! :)
छुप नहीं पाई
ReplyDeleteतकनीकी
जरूर हो रही होगी
लेटलतीफी
यहां नहीं तो वहां
मेल में नहीं तो रेल में
पर दिमाग में हमारे
छप नहीं पाई
आपने तो खुद बनाई
खाए जाएं भरपूर मलाई.
इस तकनीकी जानकारी के लिए बहुत बहुत धन्याबाद
ReplyDeleteसमझने का मूड बना रही हूँ। यदि समझ आ गया तो रिकॉर्ड स्थापित हो जाएगा। वैसे ऐसी बातें केवल अंग्रेजी में थोड़ा बहुत समझ आती हैं।
ReplyDeleteघुघूती बासूती
जानकारी देने के लिए बेहद शुक्रिया .....
ReplyDeleteआप मेरे गुरुदेव हैं इसी लिए कभी-कभी देश काल का ख्याल किये बगैर आपको बेमौके तंग किया करता हूँ। आपने मेरी जिज्ञासा शान्त करने के लिए यह तकनीकी ब्लॉग पोस्ट किया इसके लिए हार्दिक धन्यवाद। आगे भी आपको कष्ट देता रहूंगा। कैप्शन देने की तकनीक सीखने से पहले html की abcd सीखनी पड़ेगी। अब इसे भी खोजता हूँ।
ReplyDeleteआप पता नहीं कब सीखेंगे अपने अनुभवों से। आप लगता है भूल गये कि आपका सृजन सम्मान से पत्ता इसीलिये कट गया था क्योंकि आप तकनीकी रूप से सक्षम पाये गये थे। अब फ़िर वहे लफ़ड़ा कर रहे हैं आप। बताइये भला। :)
ReplyDeleteअरे सर जी आप तो टेक्नो गुरु भी निकले!!
ReplyDeleteवैसे पिछले कई दिनों से आप के ब्लॉग से कापी -पेस्ट के द्वारा आप के हिसाब का हटमल ब्लॉगर पोस्ट एडिटर में जमा रहा हूँ!!
जल्दी ही दर्शन होंगे!!