Markdown Jekyll में एक छवि कैप्शन का उपयोग करना

Question

मैं Github पर एक Jekyll ब्लॉग होस्टिंग कर रहा हूँ और Markdown साथ मेरी पोस्ट लिखने। जब मैं छवियों द्वारा जोड़ा जा रहा है, मैं यह निम्नलिखित तरीके से करना:

![name of the image](http://link.com/image.jpg)

यह तब पाठ में छवि दिखाता है।

हालांकि, मैं मार्कडाउन को एक कैप्शन जोड़ने के लिए कैसे कह सकता हूं जो छवि के नीचे या ऊपर प्रस्तुत किया गया है?

Answer 1

यदि आप किसी भी प्लगइन्स का उपयोग नहीं करना चाहते हैं (जिसका अर्थ है कि आप इसे सीधे साइट को उत्पन्न किए बिना GitHub पर धकेल सकते हैं), तो आप एक नई फ़ाइल बना सकते हैं जिसका नाम image.htmlहै _includes:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

और फिर साथ अपने markdown से छवि प्रदर्शित:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

Comments

यह एक लाजवाब विचार है! हालांकि, site_rootएक वैध चर के रूप में स्वीकार नहीं किया जाता है। जब इसे प्रस्तुत किया जाता है तो यह समाप्त हो जाता है src="{{ site.url_root }}...।

— ओर्शिच्रो

आह, ठीक है, यह ऑक्टोप्रेस में जोड़ा गया एक चर है । मैंने इसे संपादित किया, इसलिए नमूना कोड छवि के सापेक्ष URL का उपयोग करता है।

— IQAndreas

Jekyll अब एक भी शामिल है site.urlचर।

— रॉय टिंकर

एक बेहतर मार्कअप होगा:<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>

— एडमंडो

मुझे और जानकारी की आवश्यकता है ... इसे दोहराने की आवश्यकता के बिना एक से अधिक छवि रखना संभव है include image.html? मैं कुछ के साथ कोशिश कर रहा हूँ, {% for image in page.images %}लेकिन कोई सफलता नहीं। क्या आप मेरी मदद कर सकते हैं?

— एडमंडो

Answer 2

मुझे पता है कि यह एक पुराना प्रश्न है, लेकिन मुझे लगा कि मैं अभी भी छवि कैप्शन जोड़ने की अपनी विधि साझा करूँगा। आप का उपयोग करने के लिए सक्षम नहीं होंगे captionया figcaptionटैग, लेकिन यह किसी भी प्लग का उपयोग किए बिना एक सरल विकल्प होगा।

अपने markdown में, आप जोर टैग के साथ अपना कैप्शन लपेट और इतने की तरह एक नई लाइन डालने के बिना छवि के नीचे यह सीधे डाल कर सकते हैं:

![](path_to_image)
*image_caption*

यह निम्नलिखित HTML उत्पन्न करेगा:

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

फिर अपने सीएसएस में आप दूसरे के साथ हस्तक्षेप किए बिना निम्नलिखित चयनकर्ता का उपयोग करके इसे शैली दे सकते emपृष्ठ के टैग:

img + em { }

ध्यान दें कि आपके पास छवि और कैप्शन के बीच एक रिक्त रेखा नहीं होनी चाहिए क्योंकि यह इसके बजाय उत्पन्न होगी:

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

आप इसके अलावा जो भी टैग चाहते हैं उसका उपयोग कर सकते हैं em। बस सुनिश्चित करें कि कोई टैग है, अन्यथा आप इसे स्टाइल नहीं कर पाएंगे।

Comments

बहुत बढ़िया! कुछ बेवकूफ jekyll वाक्यविन्यास को याद करने की आवश्यकता नहीं है :)

— Corstian Boerman

मैं इसका एक बड़ा प्रशंसक हूं

— एलेक्स विलियम्स

धन्यवाद! बस उस के लिए खोज रहा था

— Michal Gruca

नमस्ते! मैं कर रहा हूँ नहीं काफी यकीन है कि कहाँ और कैसे सीएसएस हिस्सा डाल करने के लिए ... यह वास्तव में महान है, तो किसी को भी मदद कर सकता है किया जाएगा।

— ChriiSchee

@ChriiSchee या तो आप इसे मुख्य CSS फ़ाइल में रखते हैं, या आप अपना स्वयं का बना सकते हैं और इसे अपने डिफ़ॉल्ट लेआउट से लिंक कर सकते हैं। उदाहरण के लिए, मेरा डिफ़ॉल्ट लेआउट main.css फ़ाइल से लिंक करता है, <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">इसलिए मैं इस फ़ाइल के नीचे अपनी कस्टम CSS परिभाषा जोड़ देता हूं: // My custom css img + em { display: block; text-align: center; } //image captions

— Jan Zavrel

Answer 3

इसके लिए आप टेबल का उपयोग कर सकते हैं। यह बढ़िया काम करता है।

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

परिणाम:

Comments

यह उत्तर सबसे अच्छा है .. शुद्ध मार्काडाउन का उपयोग करना और आपको जो चाहिए वह प्राप्त करना है। धन्यवाद!

— कदम परी

ऑफटॉपिक की तरह, लेकिन यह जुपिटर नोटबुक में भी काम करता है।

— पैलॉचफ

इसने मेरे लिए चौड़ाई 100% घटा दी। मैं इसे कैसे चौड़ा करूं?

— अभय हेगड़े

Answer 4

कैप्शन के साथ छवियों के लिए उपयोग करने के लिए सही HTML, के <figure>साथ है<figcaption> ।

इसके लिए कोई मार्काडाउन समतुल्य नहीं है, इसलिए यदि आप केवल सामयिक कैप्शन जोड़ रहे हैं, तो मैं आपको प्रोत्साहित करूँगा कि आप अपने html में संशोधन करें:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

मार्कडाउन युक्ति आपको HTML को इस तरह के मामलों में एम्बेड करने के लिए प्रोत्साहित करती है, इसलिए यह ठीक दिखाई देगा। यह प्लगइन्स के साथ गड़बड़ करने की तुलना में बहुत सरल है।

यदि आप कैप्शन बनाने के लिए अन्य Markdown-y फीचर्स (जैसे टेबल, तारांकन आदि) का उपयोग करने का प्रयास कर रहे हैं, तो आप बस इस बात के आस-पास हैक कर रहे हैं कि मार्काडाउन का उपयोग कैसे किया जाना था।

Comments

यह बहुत बुरा है कि इस जवाब ने कोई ध्यान नहीं दिया है - मुझे वास्तव में लगता है कि यह सबसे सरल और सबसे अधिक सही है। मैं विशेष रूप से तालिकाओं का उपयोग करके प्रारूपण करने वाले सभी उत्तरों से व्यथित हूं, जो कि 1990 के दशक की तबाही का प्रतीक है। ;-)

— स्थापित करें

मैं सहमत हूँ। हालाँकि ऐसा लगता है कि यह अभी तक बिटबकैट द्वारा समर्थित नहीं है। दया।

— बोरिएल नोव

मुझे @Andrew द्वारा प्रदान किया गया चतुर और सरल उत्तर पसंद है, लेकिन मुझे इसके साथ जाना होगा जो स्पष्ट है, उपयुक्त HTML टैग का उपयोग करता है, और इसके लिए बहुत अधिक टाइपिंग की आवश्यकता नहीं है।

— सीनबा

बहुत बहुत धन्यवाद, मैं jekyll में नया हूं और नहीं जानता कि html के साथ मार्कडाउन का उपयोग किया जा सकता है।

— साम्बो किम

Answer 5

शीर्ष वोट किए गए उत्तर पर एक हल्की सी दरार जो मुझे थोड़ी अधिक स्पष्ट लगी, वह यह है कि किसी कक्षा में किसी चीज़ को जोड़ने के लिए जेकिल सिंटैक्स का उपयोग किया जाए और फिर उसे इस तरह से स्टाइल किया जाए।

तो पोस्ट में आपके पास होगा:

![My image](/images/my-image.png)

{:.image-caption}
*The caption for my image*

और फिर अपनी CSS फ़ाइल में आप कुछ इस तरह से कर सकते हैं:

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: light-grey;

अच्छा लग रहा है बाहर आता है!

Answer 6

इस प्रश्न के दो अर्थपूर्ण हल हैं:

1. एक प्लगइन का उपयोग करना
2. एक कस्टम बनाना शामिल है

1. एक प्लगइन का उपयोग करना

मैंने कुछ प्लग इन करने की कोशिश की है और मेरा पसंदीदा हैjekyll-figure ।

1.1। इंस्टॉलjekyll-figure

एक तरह से स्थापित करने के लिए jekyll-figureजोड़ने के लिए है gem "jekyll-figure"अपने प्लग-इन समूह में अपने Gemfile करने के लिए।

फिर bundle installअपनी टर्मिनल विंडो से चलाएं ।

1.2। उपयोगjekyll-figure

सीधे शब्दों में अपनी markdown लपेट {% figure %}और {% endfigure %}टैग।

आप ओपनिंग {% figure %}टैग में कैप्शन देते हैं , और आप इसे मार्कडाउन के साथ भी स्टाइल कर सकते हैं!

उदाहरण:

{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% endfigure %}

1.3। इसे स्टाइल करें

अब जब आपकी छवियां और कैप्शन शब्दबद्ध रूप से सही हैं, तो आप सीएसएस को अपनी इच्छानुसार लागू कर सकते हैं:

• figure (छवि और कैप्शन दोनों के लिए)
• figure img (केवल छवि के लिए)
• figcaption (केवल कैप्शन के लिए)

2. एक कस्टम बनाना शामिल है

आपको अपने फ़ोल्डर में एक image.htmlफ़ाइल बनाने_includes की आवश्यकता होगी , और इसे मार्कडाउन में तरल का उपयोग करके शामिल करें ।

2.1। _Includes / image.html बनाएँ

image.htmlअपने _includes फ़ोल्डर में दस्तावेज़ बनाएं :

<!-- _includes/image.html -->
<figure>
    {% if include.url %}
    <a href="{{ include.url }}">
    {% endif %}
    <img
        {% if include.srcabs %}
            src="{{ include.srcabs }}"
        {% else %}
            src="{{ site.baseurl }}/assets/images/{{ include.src }}"
        {% endif %}
    alt="{{ include.alt }}">
    {% if include.url %}
    </a>
    {% endif %}
    {% if include.caption %}
        <figcaption>{{ include.caption }}</figcaption>
    {% endif %}
</figure>

2.2। मार्कडाउन में, लिक्विड का उपयोग करके एक छवि शामिल करें

/assets/imagesकैप्शन के साथ एक छवि :

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

एक (बाह्य) छवि एक निरपेक्ष URL का उपयोग: (परिवर्तन src=""करने के लिए srcabs="")

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

एक क्लिक करने योग्य छवि: ( url=""तर्क जोड़ें )

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    url="https://jekyllrb.com" <!-- destination url -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

कैप्शन के बिना एक छवि:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
%}

2.3। इसे स्टाइल करें

अब जब आपकी छवियां और कैप्शन शब्दबद्ध रूप से सही हैं, तो आप सीएसएस को अपनी इच्छानुसार लागू कर सकते हैं:

• figure (छवि और कैप्शन दोनों के लिए)
• figure img (केवल छवि के लिए)
• figcaption (केवल कैप्शन के लिए)

Comments

बस पूर्णता के लिए, आप Jekyll-आंकड़ा उपयोग करना चाहते हैं तो आप अपने _config.yml में प्लग-इन करने के लिए Jekyll-आंकड़ा जोड़ना होगा

— Aleix सांचिस

Answer 7

आप pandocअपने कनवर्टर के रूप में उपयोग करने का प्रयास कर सकते हैं । इसे लागू करने के लिए यहां एक jekyll प्लगइन है। पंडोक आपकी altविशेषता के रूप में एक आंकड़ा कैप्शन जोड़ने में सक्षम हो जाएगा ।

लेकिन आपको संकलित साइट को धक्का देना होगा क्योंकि जीथब सुरक्षा के लिए जीथब पृष्ठों में प्लगइन्स की अनुमति नहीं देता है।

Comments

धन्यवाद। तो अकेले मार्कडाउन कैप्शन बनाने में सक्षम नहीं है?

— ऑर्किरो

मेरा मानना ​​है कि यह आपके द्वारा उपयोग किए जाने वाले कनवर्टर पर निर्भर करता है, हालांकि, मार्कडाउन मानक कैप्शन जोड़ने का समर्थन नहीं करता है।

— चोंगक्सु रेन

Answer 8

एंड्रयू का @ andrew-wei उत्तर शानदार काम करता है। आप जो कुछ करने की कोशिश कर रहे हैं, उसके आधार पर आप कुछ एक साथ चेन भी कर सकते हैं। यह, उदाहरण के लिए, आपको ऊँचाई, शीर्षक और कैप्शन के साथ एक छवि मिलती है, जो कि रेखा के अलग-अलग हिस्सों में बोल्ड और इटैलिक है:

img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}

निम्नलिखित <img>मार्कडाउन के साथ:

![description](https://img.jpg "description")
***Image:*** *description*

Answer 9

<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

यह मूल कैप्शन का उपयोग है। एक अतिरिक्त प्लगइन का उपयोग करने के लिए आवश्यक नहीं है।

Answer 10

यहां सबसे सरल (लेकिन सबसे सुंदर नहीं) समाधान है: पूरी चीज़ के चारों ओर एक तालिका बनाएं। स्पष्ट रूप से स्केलिंग मुद्दे हैं, और यही कारण है कि मैं अपना उदाहरण HTML के साथ देता हूं ताकि आप छवि आकार को आसानी से संशोधित कर सकें। इसने मेरे लिए काम किया।

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |