Individual image captions?

[jengalas]

• This is a question about using the theme.

---

Two questions about image captions:

1. Does the theme provide a way to add captions to individual images (using either <figure> or gallery) rather than simply one caption for the entire group/gallery?
2. Is there a straightforward way to display the caption below the image in the popup/lightbox view? Any way to populate the div.mfp-title? Something like adding a title: or caption: attribute to each gallery image in the front matter, and then somehow setting that as the titleSrc in the Magnific Popup options.

[mmistakes]

1. No the theme only supports 1 caption per <figure> element. I couldn't find a consistent way of styling the grid with captions that may or may not be on every image.
2. the gallery helper could be modified to include a title attribute that I believe Magnific Popup uses to populate the overlay caption. Other option would be to possibly modify the JavaScript to have MP use the alt attribute as the image's titleSrc.

I'm thinking enhancing the gallery helper might be the way to go. Could change L#35 and 44 to something like:

alt="{% if img.alt %}{{ img.alt }}{% endif %}"
title="{% if img.title%}{{ img.title}}{% endif %}">

And then the title could be set in YAML like:

gallery:
  - url: unsplash-gallery-image-1.jpg
    image_path: unsplash-gallery-image-1-th.jpg
    alt: "placeholder image 1"
    title: "Title for image 1"
  - url: unsplash-gallery-image-2.jpg
    image_path: unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 2"
    title: "Title for image 2"

[jengalas]

Thank you! I've made a change to the gallery helper that has inserted title attributes. However, Magnific Popup still doesn't seem to be picking it up. Maybe a change to the JavaScript is required?

[mmistakes]

I did a quick test and was able to get it working. I mistakenly suggest adding the title attribute to the <img> elements. If you add it to the <a> it works.

...
<a href=
  {% if img.url contains "http" %}
    "{{ img.url }}"
  {% else %}
    "{{ img.url | prepend: "/images/" | prepend: base_path }}"
  {% endif %}
  {% if img.title %}title="{{ img.title }}"{% endif %}
>
...

I'll be adding this small enhancement to the theme shortly. But if you add the line with img.title and then set titles in the YAML like in my previous example above you should be good to go.

[jengalas]

Yes, it works! Thank you!