Galleries in Jekyll via YAML header list

Question

Following the answer at https://stackoverflow.com/a/9857308/2966190 I implemented a simple photo gallery in Jekyll.

_layouts/photos.html:

---
layout: layout
---

<section class="content">
  <h1>
    <a href="{{ page.url }}">{{ page.title }}</a>
  </h1>

  <section class="byline">
    {{ page.date | date: "%B %e, %Y" }}
  </section>

  {% for pic in page.photos %}
  <a href="{{ pic.url }}"><img src="{{ pic.url }}" alt="{{ pic.alt }}" /></a>
  {% if pic.caption %}<p>{{ pic.caption }}</p>{% endif %}
  {% endfor%}

  {{ content }}

</section>

so that I can simply make a list with all the required information and have the gallery automatically generated, in such a fashion:

example_gallery.md:

---
layout: photos
title: SOME TITLE

photos:

 - url:     /path/to/img1.png
   alt:     alt1
   caption: Caption with [hyperlinks](example.com) formatted [three][ways] [that][fail]
            [fail]: failure.com/sadface
 - url:     /path/to/img2.png
   alt:     alt2.
   caption: Caption with <a href="/explicit/html/tags.html"> that work but hurt the eyes, are annoying to write, and don't allow me to separate formatting from content</a>.
---
[ways]: doesntwork.com

I encounter the same error with links formatted as in the caption to img1.

Error reading file /path/to/example_gallery.md: (): did not find expected key while parsing a block mapping at line 7 column 4

It also fails if I put the definition of [link] on the same line as caption: (with no linebreak).

In the linked example above, the author explicitly mentions that markdown will not be usable in the captions. To try and get around this I have tried changing {{ pic.caption }} to {{ pic.caption | markdownify }} in the layout photos.html, to no avail.

So, my question is: is there a way to get markdown to work in the image captions by editing the layout or the YAML for each photo (ie. without writing a plugin as in How can I build a gallery tag for Jekyll? )? It seems like similar things work in excerpts (see, for example: Include jekyll / liquid template data in a YAML variable? [I don't need the liquid tags to work in the caption, as discussed in that answer] ).

As an aside, is it possible for the caption to have linebreaks in it?

score 3 · Accepted Answer · answered Feb 27 '14 at 23:00

There are quite a few questions so I will try to go through them one by one.

The only way you can include a link in the YAML front matter is in the [hyperlinks](example.com) format. This is just due to the order the Jekyll renders the page.

I took your example code and changed the rendering of the caption to include the markdownify filter and it worked as expected (after removing the second line from the caption).

 {% if pic.caption %}<p>{{ pic.caption | markdownify }}</p>{% endif %}

The caption can have line breaks in it. If you DO want them preserved in the output, use:

caption: | 
 Caption with [hyperlinks](example.com).

 Line break preserved

 And another

Note the extra line break between each line, and the two spaces at the start of each line of text. If you do not want the line breaks in the output use the ">" character instead of "|".

All of this has been tested using the kramdown markdown parser in Jekyll.

Galleries in Jekyll via YAML header list

1 Answers1