Monday, May 19, 2008

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


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

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


20 comments:

  1. हमने सोचा था के यह आदमी टोटल बकझकिया है,

    गुरु, ये तो सरो-सामां-लीवर-ए-चारागर निकला!

    हाहाहाहाहाहा!

    ReplyDelete
  2. पोस्ट सूखी नहीं, अपने लिए बहुत गरिष्ठ, है पचाने को कसरत करनी पड़ेगी। मात्र चहलकदमी से काम नहीं चलेगा।

    ReplyDelete
  3. बहुत ही अच्छी जानकारी, अति सुगम तरीके से दी आपने !
    मेरे जैसा गदहा भी समझ जाये, गुरु कोई ऎसे ही नहीं कहलाता !

    अचपन पचपन के बच्चों को भी यह टिप्स देना चाहेंगे,
    कि मैं बरजोरी इसको चुरा कर वहाँ डाल दूँ ?

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

    ReplyDelete
  5. बस लिहाजवश आया हूं.. :)

    ReplyDelete
  6. मान गए हजूर कि आप फ़ुल्टू तकनीकी हो, अपन के पल्ले तो पड़ता नई ये सब!

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

    ReplyDelete
  8. देखियेगा, यह भी टाप टेन पोस्ट मे शामिल होगी। तकनीक को सरल भाषा मे समझा पाना भी किसी हुनर से कम नही।

    ReplyDelete
  9. गजब कर दिये हैं साहेब, आपका शुक्रिया ...

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

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

    तुलसी बाबा ने स्पेशल मेरे लिए एक दोहा लिखा था-

    फूलहिं-फरहीं न बेंत, जदपि सुधा बरसहिं जलद,
    मूरख ह्रदय न चेत, जो गुरु मिलैं ज्ञानदत्त सम.

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

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

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

    ReplyDelete
  15. इस तकनीकी जानकारी के लिए बहुत बहुत धन्याबाद

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

    ReplyDelete
  17. जानकारी देने के लिए बेहद शुक्रिया .....

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

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

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

    ReplyDelete

आपको टिप्पणी करने के लिये अग्रिम धन्यवाद|

हिन्दी या अंग्रेजी में टिप्पणियों का स्वागत है|
--- सादर, ज्ञानदत्त पाण्डेय