ब्लॉग पोस्ट में फोटो सब-टाइटल (कैप्शन) का जुगाड़



सिद्धार्थ जी फोटो पर कैप्शन लगाने के बारे में पूछ रहे थे। मेरी समझ में यह आया कि वे चित्र का विवरण देते शब्द चित्र के साथ चिपकाना चाहते हैं। ब्लॉगस्पॉट के पोस्ट एडीटर में यह सरलता से सम्भव नही। फ्लिकर से आप अपनी फोटो पर डिस्क्रिप्शन फील्ड में विवरण भर कर अगर सीधे ब्लॉग करें तो चित्र के नीचे केप्शन के रूप में डिस्क्रिप्शन आ जाता है। पर वह ब्लॉगिंग का सरल/सुविधायुक्त तरीका नहीं है। मैने विण्डोज लाइवराइटर के साथ कुछ प्रयोग पहले किये थे, जिनका विवरण यहां पर मिल सकता है।

Photo Subtitleकालांतर में मैने कई पोस्टों में पुलकोट में चित्र इन्सर्ट कर उसका सब-टाइटल साथ जोड़ा था। उदाहरण के लिये आप यह रेगुलरहा सुकुल वाली पोस्ट का अवलोकन करें। पुलकोट का जुगाड़ आप सागरचन्द नाहर जी के ब्लॉग पर पायेंगे।

अपनी पिछली पोस्ट में मैने डा. कल्ला के चित्र के नीचे उनके नाम का सब-टाइटल (केप्शन) दिया था। वह देने के लिये मैने एक HTML स्क्रिप्ट का प्रयोग किया था। आप पिछली पोस्ट के अंश का चित्र दाईं ओर देखें। इस चित्र में ड़ा. कल्ला के फोटो के आस-पास दस पिक्सल का मार्जिन रखा गया है, जिससे उनका चित्र और लेख आपस में बम्प करते – सटे हुये न प्रतीत हों।

इस प्रयोग के लिये आप इस प्रकार जुगाड़ कर सकते हैं –

Photo Subtitle A यह रही HTML स्क्रिप्ट। यह केप्शन अगर बहुत लम्बा हो तो भी चित्र के इर्दगिर्द ही रहेगा!

  1. आप HTML स्क्रिप्ट का चित्र (बायें) देखें जिसे मैने ड़ा. कल्ला के चित्र के लिये प्रयोग किया था। इस स्क्रिप्ट को यहां से डाउनलोड कर सकते हैं।
  2. इस स्क्रिप्ट में float: left का अर्थ चित्र को बायीं ओर लगाने से है। अगर आपको चित्र दायीं ओर लगाना है तो float: right का प्रयोग करें।
  3. आप padding-top: 1px या padding-bottom: 1px निकाल सकते हैं।
  4. ड़ा. कल्ला का नाम चित्र में दायीं ओर एलाइन है। आप अगर केप्शन बाईं ओर या मध्य में एलाइन करना चाहें तो text-align: left या text-align: center का प्रयोग करें।
  5. इस HTML स्क्रिप्ट में केप्शन AAAAAAAA है। आप केप्शन बदल कर जो रखना चाहें, वह लिख दें।
  6. यह HTML स्क्रिप्ट अपनी पोस्ट पर यथास्थान लगा कर चित्र बिना ले-आउट (लेफ्ट/राइट/सेण्टर) के लोड करें। फिर चित्र पर कर्सर को ले जा कर ड्रैग करें और केप्शन (AAAAAAAA) के पहले ले आयें।
  7. अगर आपका लोड किया चित्र 250 पिक्सेल से बड़ा/छोटा है तो आप HTML स्क्रिप्ट में तदानुसार width: —px सेट करे। अर्थात पिक्सेल कम/ज्यादा करें।

ऊपर मैने HTML स्क्रिप्ट के चित्र के लिये margin-right: 40px का रखा है, जिससे कि लिस्ट-टेक्स्ट की नम्बरिंग (1., 2., — आदि) न दबे। टेक्स्ट एलाइन लेफ्ट (text-align: left) रखा है। और कृपया, “यह रही HTML स्क्रिप्ट…. नामक केप्शन का अवलोकन करें; जो उस चित्र के नीचे बायें एलाइन है, और है चित्र की चौड़ाई की सीमा में ही!


श्री विजयशंकर चतुर्वेदी जी ने टिप्पणी की थी कि बुरी पोस्ट कब लिखेंगे? और मैने देर नहीं लगाई। मुझे पूरा अविश्वास है कि पहले सर्राटा पठन में मित्रगण इस पोस्ट में से कुछ जूस निकाल पायेंगे। कुछ लोग सटक लेंगे और कुछ लिहाजवश टेनटेटिव सी टिप्पणी कर जायेंगे।

है ही सूखी सी पोस्ट! Confused


Advertisements