Używanie podpisu obrazu w Markdown Jekyll

149

Prowadzę bloga Jekyll na Github i piszę posty z Markdown. Dodając obrazy, robię to w następujący sposób:

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

To pokazuje obraz w tekście.

Jak jednak mogę powiedzieć Markdown, aby dodał podpis, który jest przedstawiony poniżej lub powyżej obrazu?

orschiro
źródło

Odpowiedzi:

115

Jeśli nie chcesz używać żadnych wtyczek (co oznacza, że ​​możesz przesłać je bezpośrednio do GitHub bez wcześniejszego generowania witryny), możesz utworzyć nowy plik o nazwie image.htmlw _includes:

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

Następnie wyświetl obraz z przeceny za pomocą:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
IQAndreas
źródło
1
To jest wspaniały pomysł! Jednak site_rootnie jest akceptowana jako prawidłowa zmienna. Po renderowaniu kończy się jako src="{{ site.url_root }}....
orschiro
2
Ach, tak, to jest zmienna dodana w Octopress . Wyedytowałem go, więc przykładowy kod używa tylko względnego adresu URL obrazu.
IQAndreas
3
Jekyll zawiera teraz site.urlzmienną.
Roy Tinker
20
Lepszym <figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
oznaczeniem
Potrzebuję więcej informacji… można umieścić więcej niż jeden obraz bez konieczności powtarzania include image.html? Próbuję z czymś takim, {% for image in page.images %}ale bez sukcesu. Możesz mi pomóc?
edmundo
287

Wiem, że to stare pytanie, ale pomyślałem, że nadal podzielę się moją metodą dodawania podpisów do zdjęć. Nie będziesz mógł używać tagów captionlub figcaption, ale byłaby to prosta alternatywa bez użycia jakichkolwiek wtyczek.

W swoim przecenie możesz zawinąć podpis w znacznik wyróżnienia i umieścić go bezpośrednio pod obrazem bez wstawiania nowego wiersza, jak na przykład:

![](path_to_image)
*image_caption*

Spowoduje to wygenerowanie następującego kodu HTML:

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

Następnie w swoim CSS możesz stylizować go za pomocą następującego selektora bez zakłócania innych emtagów na stronie:

img + em { }

Zauważ, że nie możesz mieć pustej linii między obrazem a podpisem, ponieważ zamiast tego wygenerowałoby:

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

Możesz także użyć dowolnego tagu innego niż em. Po prostu upewnij się, że jest tag, w przeciwnym razie nie będziesz w stanie go stylizować.

Andrew Wei
źródło
3
Niesamowite! Nie trzeba zapamiętywać jakiejś głupiej składni jekyll :)
Corstian Boerman
2
Jestem wielkim fanem tego
Alex Williams
Dziękuję Ci! Właśnie tego szukałem
Michał Gruca
1
Cześć! Nie jestem pewien, gdzie i jak umieścić część CSS ... byłoby naprawdę świetnie, gdyby ktoś mógł pomóc.
ChriiSchee
2
@ChriiSchee Albo umieścisz go w głównym pliku CSS, albo możesz stworzyć własny i połączyć go z domyślnym układem. Na przykład, mój domyślny układ łączy się z plikiem main.css, <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">więc po prostu dodaję własną definicję CSS na dole tego pliku: // My custom css img + em { display: block; text-align: center; } //image captions
Jan Zavrel
93

Możesz do tego użyć tabeli. To działa dobrze.

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

Wynik:

wprowadź opis obrazu tutaj

Bilal Gultekin
źródło
8
Ta odpowiedź jest najlepsza. Używając czystej przeceny i zdobywając to, czego potrzebujesz. Dzięki!
Kadam Parikh
Rodzaj offtopic, ale działa to również w notebookach Jupyter.
paulochf
U mnie zmniejszyło szerokość ze 100%. Jak to poszerzyć?
Abhay Hegde
50

Prawidłowe HTML do wykorzystania w przypadku zdjęć z podpisami, jest <figure>z<figcaption> .

Nie ma odpowiednika w Markdown, więc jeśli dodajesz tylko sporadyczny podpis, zachęcam Cię do dodania tego kodu HTML do dokumentu Markdown:

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

Specyfikacja Markdown zachęca do osadzania kodu HTML w takich przypadkach, aby wyświetlał się dobrze. Jest to również o wiele prostsze niż majstrowanie przy wtyczkach.

Jeśli próbujesz używać innych funkcji Markdown-y (takich jak tabele, gwiazdki itp.) Do tworzenia napisów, to po prostu hakujesz, w jaki sposób miał być używany Markdown.

bryanbraun
źródło
5
Szkoda, że ​​ta odpowiedź nie zwróciła uwagi - naprawdę uważam, że jest najprostsza i najbardziej poprawna semantycznie. Szczególnie niepokoją mnie wszystkie odpowiedzi sugerujące formatowanie za pomocą tabel, które po prostu sieją chaos lat 90. ;-)
sudo make install
Zgadzam się. Jednak wydaje się, że nie jest jeszcze obsługiwany przez Bitbucket. Szkoda.
Boriel
Podoba mi się sprytna i prosta odpowiedź udzielona przez @Andrew, ale muszę skorzystać z tej, ponieważ jest wyraźna, wykorzystuje odpowiednie znaczniki HTML i nie wymaga zbytniego pisania.
Seanba,
1
Wielkie dzięki, jestem nowy w jekyll i nie wiedziałem, że Markdown może być używany z HTML.
Sambo Kim
6

Niewielki riff na górze głosował odpowiedź, którą uważam za nieco bardziej wyraźną, to użycie składni jekyll do dodania klasy do czegoś, a następnie stylowanie tego w ten sposób.

Więc w poście miałbyś:

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

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

A potem w swoim pliku CSS możesz zrobić coś takiego:

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

Wygląda dobrze!

Cory
źródło
4

Istnieją dwa poprawne semantycznie rozwiązania tego pytania:

  1. Korzystanie z wtyczki
  2. Tworzenie niestandardowego pliku dołączanego

1. Korzystanie z wtyczki

Wypróbowałem kilka wtyczek, które to robią, a moim ulubionym jestjekyll-figure .

1.1. zainstalowaćjekyll-figure

Jednym ze sposobów instalacji jekyll-figurejest dodanie gem "jekyll-figure"do pliku Gemfile w grupie wtyczek.

Następnie uruchom bundle installz okna terminala.

1.2. Posługiwać sięjekyll-figure

Po prostu zawiń przecenę {% figure %}i {% endfigure %}oznacz.

Twój podpis pojawia się w otwierającym {% figure %}tagu, a nawet możesz go stylizować za pomocą przeceny!

Przykład:

{% 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. Styl to

Teraz, gdy twoje obrazy i podpisy są semantycznie poprawne, możesz zastosować CSS, jak chcesz:

  • figure (dla obrazu i podpisu)
  • figure img (tylko dla obrazu)
  • figcaption (tylko do podpisów)

2. Tworzenie dołączenia niestandardowego

Musisz utworzyć image.htmlplik w swoim _includesfolderze i dołączyć go za pomocą Liquid w Markdown .

2.1. Utwórz _includes / image.html

Utwórz image.htmldokument w swoim folderze _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. W Markdown dołącz obraz za pomocą Liquid

Obraz /assets/imagesz podpisem:

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 -->
%}

Obraz (zewnętrzny) używający bezwzględnego adresu URL: (zmień src=""na 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 -->
%}

Klikalny obraz: (dodaj url=""argument)

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 -->
%}

Obraz bez podpisu:

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

Teraz, gdy twoje obrazy i podpisy są semantycznie poprawne, możesz zastosować CSS, jak chcesz:

  • figure (dla obrazu i podpisu)
  • figure img (tylko dla obrazu)
  • figcaption (tylko do podpisów)
Robin Métral
źródło
1
Dla kompletności, jeśli chcesz użyć jekyll-figure, będziesz musiał dodać jekyll-figure do wtyczek w swoim _config.yml
Aleix
3

Możesz spróbować użyć pandocjako konwertera. Oto wtyczka jekyll do zaimplementowania tego. Pandoc będzie mógł automatycznie dodać podpis do figury taki sam jak twój altatrybut.

Ale musisz wypchnąć skompilowaną witrynę, ponieważ github nie zezwala na wtyczki na stronach Github ze względów bezpieczeństwa.

Chongxu Ren
źródło
Dzięki. Czyli sama przecena nie jest w stanie stworzyć napisów?
orschiro
Uważam, że zależy to od używanego konwertera, jednak standard przeceny nie obsługuje dodawania napisów.
Chongxu Ren
3

Odpowiedź Andrew @ andrew-wei działa świetnie. Możesz także połączyć kilka ze sobą, w zależności od tego, co próbujesz zrobić. Na przykład otrzymujesz obraz z alt, tytułem i podpisem z podziałem wiersza oraz pogrubieniem i kursywą w różnych częściach podpisu:

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;}

Z następującą <img>przeceną:

![description](https://img.jpg "description")
***Image:*** *description*
Matthew Bennett
źródło
1
<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

To jest podstawowe użycie napisów. Nie ma potrzeby używania dodatkowej wtyczki.

Hasan Tezcan
źródło
0

Oto najprostsze (ale nie najładniejsze) rozwiązanie: ułóż tabelę wokół całości. Istnieją oczywiście problemy ze skalowaniem i dlatego podaję mój przykład z HTML, abyś mógł łatwo zmodyfikować rozmiar obrazu. To zadziałało dla mnie.

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
ndimhypervol
źródło