[photos] How to show captions in gallery view?

[rototom]

As described above I want to have the captions (from captions.txt) to be shown under the photo in the gallery. Is this possible?

[pxquim]

Greetings, and sorry for the very late answer.

In the Pelican way, showing the captions requires three-way collaboration between:

• The plugin, which collects the captions and makes them available to the theme.
• The theme, which should make use of the data to create HTML (or JavaScript).
• The external JavaScript, which should make use of the data.

In my blog, the theme includes code as follows, which creates an element <a ... caption="..."> for each photo:

{% for image, photo, thumb, exif, caption in article.photo_gallery %}
<a href="{{ SITEURL }}/{{ photo }}" title="{{ image }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a>
{% endfor %}

The end of each page includes the following JavaScript code to initialize and customize the magnific-popup.js library:

$('.gallery').magnificPopup({
  delegate: 'a',
  type: 'image',
  gallery: {
    enabled: true,
    navigateByImgClick: true,
    preload: [1,2]
  },
  image: {
    titleSrc: function(item) {
        if (item.el.attr('caption') && item.el.attr('exif')) {
            return (item.el.attr('caption').replace(/\\n/g, '<br />') +
                '<small>' + item.el.attr('title') + ' - ' + item.el.attr('exif') + '</small>');
        }
        return item.el.attr('title') + '<small>' + item.el.attr('exif') + '</small>';
  } }
});

It's the function after titleSrc: that defines the content of the title. If you can follow the examples in the magnific-popup site, you can change the initialization code to customize the behavior.

[justinmayer]

Closing due to inactivity. Please feel free to comment here if you feel the issue should be re-opened.