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


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

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

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

  1. बहुत ही अच्छी जानकारी, अति सुगम तरीके से दी आपने !मेरे जैसा गदहा भी समझ जाये, गुरु कोई ऎसे ही नहीं कहलाता !अचपन पचपन के बच्चों को भी यह टिप्स देना चाहेंगे, कि मैं बरजोरी इसको चुरा कर वहाँ डाल दूँ ?

    Like

  2. इतनी जानकारी शुदा और बेहतरीन पोस्ट लिख कर सोच रहे हैं कि विजय भाई की शिकायत दूर कर ली. अरे, बहुत कोशिश करिये, अभी तो कुछ भी नहीं कर पायें हैं और शायद तब भी बुरी पोस्ट लिखना आपके बस में न आ पाये. ये जिम्मेदारी हम पर छोड़िये. हा हा!!

    Like

  3. आप अपने ब्लॉग में पता नही क्या क्या करते रहते हैं …….. कभी कभी सोचता हूँ आपसे ब्लोगिंग की ट्यूशन ले लूँ. 😀

    Like

  4. जानकारीपूर्ण पोस्ट. हार्दिक आभार. आगे भी आपसे बहुत कुछ सीखने को मिलता रहेगा.

    Like

  5. गुरु, प्रातःकाल ५ बजे से अब तक बिना नहाए-धोये समझने की कोशिश कर रहा हूँ. कुछ पल्ले नहीं पड़ रहा! अरे भाई, जो आदमी अपनी पोस्ट में लिंक लगाना तक नहीं जानता, उसे आप सीधे पीएचडी का पर्चा थमा रहे हैं?तुलसी बाबा ने स्पेशल मेरे लिए एक दोहा लिखा था-फूलहिं-फरहीं न बेंत, जदपि सुधा बरसहिं जलद,मूरख ह्रदय न चेत, जो गुरु मिलैं ज्ञानदत्त सम.

    Like

  6. बुरी पोस्ट लिखने वाले भौत लोग हैं जी। आप तो अच्छी में लगे रहियेजी।टेकनीकल पोस्ट है। इश्क और टेकनीकल पोस्ट के मामले धीमे धीमे ही परवान चढ़ते हैं।हम भी समझ ही लेगे एक दिन।जमाये रहिये जी।

    Like

  7. @ विजयशंकर चतुर्वेदी – आप अब नहा धो लें। किसी को टिप्पणी न करियेगा – बुरी पोस्ट कब लिखेंगे?लोग तुरंत लिख कर बताने में लग जायेंगे! जैसे मैं! 🙂

    Like

  8. छुप नहीं पाईतकनीकीजरूर हो रही होगीलेटलतीफीयहां नहीं तो वहांमेल में नहीं तो रेल मेंपर दिमाग में हमारेछप नहीं पाईआपने तो खुद बनाईखाए जाएं भरपूर मलाई.

    Like

  9. समझने का मूड बना रही हूँ। यदि समझ आ गया तो रिकॉर्ड स्थापित हो जाएगा। वैसे ऐसी बातें केवल अंग्रेजी में थोड़ा बहुत समझ आती हैं।घुघूती बासूती

    Like

  10. आप मेरे गुरुदेव हैं इसी लिए कभी-कभी देश काल का ख्याल किये बगैर आपको बेमौके तंग किया करता हूँ। आपने मेरी जिज्ञासा शान्त करने के लिए यह तकनीकी ब्लॉग पोस्ट किया इसके लिए हार्दिक धन्यवाद। आगे भी आपको कष्ट देता रहूंगा। कैप्शन देने की तकनीक सीखने से पहले html की abcd सीखनी पड़ेगी। अब इसे भी खोजता हूँ।

    Like

  11. आप पता नहीं कब सीखेंगे अपने अनुभवों से। आप लगता है भूल गये कि आपका सृजन सम्मान से पत्ता इसीलिये कट गया था क्योंकि आप तकनीकी रूप से सक्षम पाये गये थे। अब फ़िर वहे लफ़ड़ा कर रहे हैं आप। बताइये भला। 🙂

    Like

  12. अरे सर जी आप तो टेक्नो गुरु भी निकले!!वैसे पिछले कई दिनों से आप के ब्लॉग से कापी -पेस्ट के द्वारा आप के हिसाब का हटमल ब्लॉगर पोस्ट एडिटर में जमा रहा हूँ!!जल्दी ही दर्शन होंगे!!

    Like

आपकी टिप्पणी के लिये खांचा:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s