মার্কডাউন জিকিলে একটি চিত্রের ক্যাপশন ব্যবহার করা

Question

আমি গিথুবে একটি জ্যাকিল ব্লগ হোস্ট করছি এবং মার্কডাউন দিয়ে আমার পোস্টগুলি লিখছি। আমি যখন ছবিগুলি যুক্ত করছি, আমি এটি নিম্নলিখিত উপায়ে করি:

![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>

এবং তারপরে আপনার চিহ্নডাউন থেকে চিত্রটি প্রদর্শিত করুন:

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

Comments

এটা একটা খুব ভাল বুদ্ধি! তবে, site_rootবৈধ পরিবর্তনশীল হিসাবে গ্রহণ করা হয় না। যখন রেন্ডার করা হয় এটি শেষ হয় src="{{ site.url_root }}...।

— orschiro

আহ, ঠিক আছে, এটি অক্টোপ্রেসে যুক্ত একটি পরিবর্তনশীল । আমি এটি সম্পাদনা করেছি, সুতরাং নমুনা কোডটি কেবলমাত্র চিত্রটির সাথে সম্পর্কিত ইউআরএল ব্যবহার করে।

— আইকিউআন্দ্রিয়াস

জ্যাকিল এখন একটি 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ট্যাগ ব্যবহার করতে পারবেন না তবে কোনও প্লাগইন ব্যবহার না করে এটি একটি সহজ বিকল্প হবে।

আপনার মার্কডাউনতে, আপনি জোর দেওয়া ট্যাগের সাহায্যে নিজের ক্যাপশনটি মোড়ানো করতে পারেন এবং এটির মতো কোনও নতুন লাইন withoutুকিয়ে না দিয়ে সরাসরি চিত্রের নীচে রাখতে পারেন:

![](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

অসাধারণ! কিছু বোকা জেকিল সিনট্যাক্স মুখস্ত করার দরকার নেই :)

— করস্টিয়ান বোর্ম্যান

আমি এর একটি বড় অনুরাগী

— অ্যালেক্স উইলিয়ামস

ধন্যবাদ! কেবল

— এটির

হাই! সিএসএসের অংশটি কোথায় এবং কীভাবে রাখা যায় তা আমি নিশ্চিত নই ... কেউ সাহায্য করতে পারলে সত্যিই দুর্দান্ত হবে great

— ChriiSchee

@ চিরিশিচি হয় আপনি এটিকে মূল সিএসএস ফাইলে রেখে দিন বা আপনি নিজের তৈরি করতে পারেন এবং এটিকে আপনার ডিফল্ট বিন্যাসে লিঙ্ক করতে পারেন। উদাহরণস্বরূপ, আমার ডিফল্ট বিন্যাসটি মেইন সিএসএস ফাইলের সাথে লিঙ্ক করে <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">তাই আমি এই ফাইলটির নীচে আমার কাস্টম সিএসএস সংজ্ঞাটি যুক্ত করব: // My custom css img + em { display: block; text-align: center; } //image captions

— জান জাভরেল

Answer 3

আপনি এটির জন্য টেবিল ব্যবহার করতে পারেন। এটা ঠিক কাজ করে।

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

ফলাফল:

Comments

এই উত্তরটি সেরা .. খাঁটি মার্কডাউন ব্যবহার করে এবং আপনার যা প্রয়োজন তা পেয়ে যাচ্ছেন। ধন্যবাদ!

— কদম পরীখ

অফটোপিক বাছাই করুন, তবে এটি জুপিটার নোটবুকগুলিতেও কাজ করে।

— paulochf

এটি আমার জন্য প্রস্থটি 100% থেকে হ্রাস করেছে। আমি কীভাবে এটি আরও প্রশস্ত করব?

— অভয় হেগদে

Answer 4

সঠিক পরিচয়লিপি সহ ইমেজ জন্য ব্যবহার এইচটিএমএল হল <figure>সঙ্গে<figcaption> ।

এর জন্য কোনও মার্কডাউন সমতুল্য নেই, সুতরাং আপনি যদি কেবলমাত্র মাঝেমধ্যে ক্যাপশন যুক্ত করেন তবে আমি আপনাকে কেবল আপনার মার্কডাউন ডকুমেন্টে h এইচটিএমএল যুক্ত করতে উত্সাহিত করব:

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...

মার্কডাউন স্পেস আপনাকে এই জাতীয় ক্ষেত্রে এইচটিএমএল এম্বেড করতে উত্সাহ দেয়, সুতরাং এটি ঠিক জরিমানা প্রদর্শিত হবে। এটি প্লাগিনগুলির সাথে জগাখিচুড়ি করার চেয়ে অনেক সহজ।

আপনি যদি ক্যাপশন তৈরি করতে অন্যান্য মার্কডাউন-ওয় বৈশিষ্ট্যগুলি (যেমন টেবিল, অ্যাসিরিস্টস ইত্যাদি) ব্যবহার করার চেষ্টা করছেন তবে আপনি কীভাবে মার্কডাউন ব্যবহারের উদ্দেশ্যে ছিলেন তা প্রায় হ্যাক করছেন।

Comments

এটি অত্যন্ত খারাপ যে এই উত্তরের কোনও দৃষ্টি আকর্ষণ করা যায় নি - আমি সত্যিই মনে করি এটি সবচেয়ে সহজ এবং শব্দার্থগতভাবে সঠিক। আমি বিশেষত সমস্ত উত্তরগুলি দ্বারা টেবিলগুলি ব্যবহার করে ফরম্যাটিংয়ের পরামর্শ দিয়ে বিরক্ত হয়েছি, যা কেবল 1990 এর দশকের মায়ামে পড়েছিল। ;-)

— sudo

আমি রাজী. তবে এটি এখনও বিটবকেট দ্বারা সমর্থিত বলে মনে হচ্ছে না। একটি পিটি।

— বোরিয়েল

আমি @ অ্যান্ড্রু দ্বারা সরবরাহিত চতুর এবং সহজ উত্তরটি পছন্দ করি তবে আমাকে এই একটি দেওয়া উচিত যা স্পষ্টভাবে দেওয়া হয়, উপযুক্ত এইচটিএমএল ট্যাগ ব্যবহার করে, এবং খুব বেশি টাইপিংয়ের প্রয়োজন হয় না।

— সানবা

অনেক অনেক ধন্যবাদ, আমি জেকিলে নতুন এবং জানি না যে মার্কডাউন এইচটিএমএল দিয়ে ব্যবহার করা যেতে পারে।

— সাম্বো কিম

Answer 5

শীর্ষে ভোট দেওয়া উত্তরের একটি সামান্য রিফ যা আমি আরও স্পষ্ট বলে মনে করেছি তা হ'ল জেকিল বাক্য গঠনটি কোনও কিছুর সাথে কোনও শ্রেণি যুক্ত করার জন্য ব্যবহার করা এবং তারপরে সেটিকে স্টাইল করা।

সুতরাং পোস্টে আপনি হবে:

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

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

এবং তারপরে আপনার সিএসএস ফাইলে আপনি এর মতো কিছু করতে পারেন:

.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"করা।

তারপরে bundle installআপনার টার্মিনাল উইন্ডো থেকে চালান ।

1.2। ব্যবহারjekyll-figure

কেবল আপনার মার্কডাউন {% 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। স্টাইল করুন

এখন আপনার চিত্রগুলি এবং ক্যাপশনগুলি শব্দার্থগতভাবে সঠিক হয়েছে, আপনি নিজের ইচ্ছামতো CSS প্রয়োগ করতে পারেন:

• figure (চিত্র এবং ক্যাপশন উভয়ের জন্য)
• figure img (শুধুমাত্র চিত্রের জন্য)
• figcaption (কেবল ক্যাপশনের জন্য)

2. একটি কাস্টম তৈরি অন্তর্ভুক্ত

আপনাকে করতে হবে একটি তৈরি image.htmlআপনার ফাইল _includesফোল্ডার , এবং Markdown মধ্যে তরল ব্যবহার করে এটি অন্তর্ভুক্ত ।

2.1। _মুখে / চিত্র html তৈরি করুন

image.htmlআপনার _যুক্ত ফোল্ডারে নথিটি তৈরি করুন :

<!-- _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। স্টাইল করুন

এখন আপনার চিত্রগুলি এবং ক্যাপশনগুলি শব্দার্থগতভাবে সঠিক হয়েছে, আপনি নিজের ইচ্ছামতো CSS প্রয়োগ করতে পারেন:

• figure (চিত্র এবং ক্যাপশন উভয়ের জন্য)
• figure img (শুধুমাত্র চিত্রের জন্য)
• figcaption (কেবল ক্যাপশনের জন্য)

Comments

শুধু সম্পূর্ণতার স্বরূপ, আপনি jekyll-চিত্রে ব্যবহার করতে চান তাহলে আপনি আপনার _config.yml মধ্যে প্লাগ-ইন করার jekyll-চিত্রে যোগ করার জন্য থাকবে

— Aleix Sanchis

Answer 7

আপনি pandocআপনার রূপান্তরকারী হিসাবে ব্যবহার করার চেষ্টা করতে পারেন । এটি বাস্তবায়নের জন্য এখানে একটি জেকিল প্লাগইন রয়েছে । প্যান্ডোক altস্বয়ংক্রিয়ভাবে আপনার অ্যাট্রিবিউটের মতো একটি ফিগার ক্যাপশন যুক্ত করতে সক্ষম হবে।

তবে আপনাকে সংকলিত সাইটটি ধাক্কা দিতে হবে কারণ গিথুব সুরক্ষার জন্য গিথুব পৃষ্ঠাগুলিতে প্লাগইনগুলিকে অনুমতি দেয় না।

Comments

ধন্যবাদ। সুতরাং একাকী মার্কডাউন কি ক্যাপশন তৈরি করতে সক্ষম নয়?

— orschiro

আমি বিশ্বাস করি এটি আপনি যে রূপান্তরকারীটি ব্যবহার করেন তার উপর নির্ভর করে তবে মার্কডাউন স্ট্যান্ডার্ড ক্যাপশন যুক্ত করার পক্ষে সমর্থন করে না।

— চঙক্সু রেন

Answer 8

অ্যান্ড্রু এর @ অ্যান্ড্রু-ওয়ে উত্তরটি দুর্দান্ত কাজ করে। আপনি যা করার চেষ্টা করছেন তার উপর নির্ভর করে আপনি কয়েকটি একসাথে চেইনও করতে পারেন। এটি উদাহরণস্বরূপ, ক্যাপশনের বিভিন্ন অংশে আপনাকে লাইট ব্রেক এবং গা bold় এবং তির্যক সহ Alt, শিরোনাম এবং ক্যাপশন সহ একটি চিত্র দেয়:

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

এখানে সহজ (তবে prettiest নয়) সমাধান: পুরো জিনিসটি প্রায় একটি টেবিল তৈরি করুন। স্পষ্টতই স্কেলিংয়ের সমস্যা আছে এবং এই কারণেই আমি আমার উদাহরণটি এইচটিএমএল দিয়ে দিচ্ছি যাতে আপনি সহজেই চিত্রের আকার পরিবর্তন করতে পারেন। এটি আমার পক্ষে কাজ করেছে।

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