New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Individual image captions? #334

Closed
jengalas opened this Issue Jun 1, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@jengalas
Copy link

jengalas commented Jun 1, 2016

  • 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

This comment has been minimized.

Copy link
Owner

mmistakes commented Jun 1, 2016

  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

This comment has been minimized.

Copy link

jengalas commented Jun 1, 2016

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

This comment has been minimized.

Copy link
Owner

mmistakes commented Jun 2, 2016

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

screen shot 2016-06-01 at 9 18 25 pm

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.

@mmistakes mmistakes self-assigned this Jun 2, 2016

@jengalas

This comment has been minimized.

Copy link

jengalas commented Jun 2, 2016

Yes, it works! Thank you!

@jengalas jengalas closed this Jun 2, 2016

mmistakes added a commit that referenced this issue Jun 2, 2016

Add support for gallery image captions in Magnific Popup overlays
- Apply optional `title` attribute to image anchors that trigger Magnific Popup overlays
- Close #334

mmistakes added a commit that referenced this issue Jun 2, 2016

Add support for gallery image captions in Magnific Popup overlays
- Apply optional `title` attribute to image anchors that trigger Magnific Popup overlays
- Close #334

sobkowiak added a commit to sobkowiak/sobkowiak.github.io-new that referenced this issue Jul 18, 2016

Add support for gallery image captions in Magnific Popup overlays
- Apply optional `title` attribute to image anchors that trigger Magnific Popup overlays
- Close mmistakes#334

sobkowiak added a commit to sobkowiak/sobkowiak.github.io-new that referenced this issue Jul 18, 2016

Add support for gallery image captions in Magnific Popup overlays
- Apply optional `title` attribute to image anchors that trigger Magnific Popup overlays
- Close mmistakes#334

cjmadsen pushed a commit to cjmadsen/cjmadsen.github.io that referenced this issue Dec 7, 2016

jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this issue May 6, 2017

Add support for gallery image captions in Magnific Popup overlays
- Apply optional `title` attribute to image anchors that trigger Magnific Popup overlays
- Close mmistakes#334

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Add support for gallery image captions in Magnific Popup overlays
- Apply optional `title` attribute to image anchors that trigger Magnific Popup overlays
- Close mmistakes#334
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment