This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Question about lightbox galleries and photos – Add caption to lightbox [gallery]

  • Creator
    Topic
  • #12904
    apersei
    Participant

    Hello Jason,
    I can’t seem to find a simple way to make a lightbox gallery where i can have captions under the thumbnails in the page of the gallery AND “captions” (or “titles” or “descriptions” or whatever…) under the corresponding images when they open in a popup. It seems that I can have the one or the other, not both, which is a problem. The old “title” trick that i found in a previous post doesn’t seem to work (maybe because the Magnificent Popup works differently from Pretty Photo?)…

    Also, is it possible to make a thumbnail photo with a caption to have the effect of emphasized border and image icon appearing when the mouse hovers over the thumbnail, like in simple lightbox thumbnails (which have no caption)? I made some tests but when I inserted a caption in such a thumbnail, the only effect I had, was the soft fading of the thumbnail photo that usually happens in the gallery thumbnails… (Of course I am not an expert in CSS…)

    Finally, if i understand it well, my Auto Lightbox feature doesn’t seem to work either. Though it’s enabled in the Settings, when I insert an image file, it is not automatically converted to a [lightbox] shortcode. It’ not a real problem, but I am just wondering…

    Thank you,
    Alexis

Viewing 11 replies - 1 through 11 (of 11 total)
  • Author
    Replies
  • #12905
    Jason Bobich
    Keymaster

    Hi Alexis,

    I can’t seem to find a simple way to make a lightbox gallery where i can have captions under the thumbnails in the page of the gallery AND “captions” (or “titles” or “descriptions” or whatever…) under the corresponding images when they open in a popup.

    You can have captions in both the gallery on the page (this is just a built-in WordPress feature) and in the lightbox popup. However, the text in the actual lightbox popup is the title of the attachment. So these are two different things.

    Let’s look an example . —

    When you create a gallery to insert into your page, you input the captions as normal.

    This will result in WordPress displaying the captions below the thumbnails on the page.

    But then because of how WordPress structures the HTML markup of the gallery and how Magnific Popup works, when you click to enlarge the image in the lightbox, it’s going to pull the title of the attachment.

    So, in your WordPress admin, you edit this title for the attachment in your Media Library.

    Also, is it possible to make a thumbnail photo with a caption to have the effect of emphasized border and image icon appearing when the mouse hovers over the thumbnail, like in simple lightbox thumbnails (which have no caption)?

    Unfortunately, you’re not going to able to get this effect with WordPress’s [gallery] shortcode.

    Finally, if i understand it well, my Auto Lightbox feature doesn’t seem to work either. Though it’s enabled in the Settings, when I insert an image file, it is not automatically converted to a [lightbox] shortcode. It’ not a real problem, but I am just wondering…

    In order for the auto lightbox feature to take effect, the image you’re inserting needs to be set to link to an image or video.

    #12939
    apersei
    Participant

    Hello Jason,

    Thank you for your quick and detailed answer. Unfortunately, I have tried the procedure you describe and I tried it again after your answer (and checked the result both in Chrome and Firefox) but it doesn’t work: the captions under the thumbnails of the gallery in the post appear as they should, but the title of the photo is not there when you open the photo in a lightbox popup (and it also does not appear when you hover over the thumbnail, as it should…) I have found one solution but it is not simple: I create the gallery with the above procedure, then I copy the relative html code using Firebug and paste it in an html editor. There I insert the title attributes with the proper text in the tags, and paste the whole code again in the text editor of WordPress… This procedure works fine, with captions appearing under the thumbnails, titles under the lightbox popup photos, and also titles appearing when I hover over a thumbnail… So, if I understand it correctly, in my setup the title attribute is not passed from the gallery shortcode to the html code automatically… (I can send you photos if you want…)

    Also, with the Auto Lightbox feature, when I use the procedure you described (Insert Media and Link to Media File) the resulting code that appears in the WordPress editor doesn’t include the [lightbox] shortcode as it is shown in the relative video, but the [caption] one, like the following:

    [caption id="attachment_556" align="alignleft" width="150"]<a href="http://.........................com/wp-content/uploads/2013/11/test.jpg"><img src="http://........................com/wp-content/uploads/2013/11/test-150x150.jpg" alt="Alt text of photo" width="150" height="150" class="size-thumbnail wp-image-556" /></a> Caption of the photo[/caption]

    As I said this is not a problem because the result is the same but I mention it just in case it has something to do with the above problem.

    Thank you
    Alexis

    #12940
    apersei
    Participant

    One correction to the above message. What I wanted to say is:

    “……. There I insert the title attributes with the proper text in the

    <a href..>

    tags, and paste the whole code again in the text editor of WordPress…”

    Alexis

    #12959
    Jason Bobich
    Keymaster

    Keep in mind that the titles being outputted on the anchor <a> tags is a feature of WordPress’s gallery system, and not anything controlled by the theme. So, I’m aware of how it works, but I’m not sure why you doing the same thing described above would yield different results for you. The only thing I can think of is that you have some plugin interfering with WordPress’s default gallery system or your attachments don’t have titles (like shown here).

    If you want to send me a login to your WP admin, I could take a look and try to make a gallery for you, and see if anything else comes to mind? — You can send the info through My Account > Submit private info here on the support website if you’d like me to do that. Just make sure and post here once you’ve done that.

    And about the Auto Lightbox — The exception here is when you use a caption. Our auto lightbox feature intercepts the insertion of the image HTML and then converts to our [lightbox] shortcode. However, when you insert an image with a caption, WordPress goes through another channel and intercepts the image HTML and changes into its [caption]. So, it’s two different competing, if that makes sense.

    #13018
    apersei
    Participant

    Hello Jason,

    I have sent to you through Submit private info my login info, so you can check what is happening.

    Thank you very much
    Alexis

    #13037
    Jason Bobich
    Keymaster

    Wow, this took forever me to figure out. So, the problem was with the version of WordPress. I was using 3.6 on my dev site and in 3.7 they removed title tags from a bunch of elements in WordPress.

    http://core.trac.wordpress.org/ticket/25739

    http://core.trac.wordpress.org/ticket/24766

    Anyway, after digging around in WP where this link comes from, there’s a filter “wp_get_attachment_link” we can use. So, here’s a solution that will filer on the caption to the output of the anchor tags automatically. Just put this in your child theme’s functions.php:

    /**
     * Add title to <a> in [gallery] shortcode.
     */
    function my_get_attachment_link( $output, $id ) {
    	$attachment = get_post( $id );
    	return str_replace( '<a', "<a title='{$attachment->post_excerpt}'", $output );
    }
    add_filter( 'wp_get_attachment_link', 'my_get_attachment_link', 10, 2 );
    #13045
    apersei
    Participant

    Thank you very much, Jason. Galleries work fine now…

    Alexis

    #13452
    ashlandwebsites
    Participant

    Hi

    Am am working with these same issues. See the first row of images in this gallery:
    http://www.ashlandwebsites.com/molly/deanne-mckeown/
    I added the above code to my Functions.php. The “Title” and “Caption” fields are both filled in, but only the “Caption” is showing. It shows both below the thumbnail and below the lightbox image.

    I am instructing my client in how to label her images and I want to make sure that she doesn’t have to change them when the theme is updated.

    My understanding is that normally the caption should display beneath the thumbnail and the title should display beneath the lightbox image.

    Thanks very much
    David

    #13457
    Jason Bobich
    Keymaster

    Hi David ,

    I added the above code to my Functions.php. The “Title” and “Caption” fields are both filled in, but only the “Caption” is showing. It shows both below the thumbnail and below the lightbox image.

    When I originally posted, I was going off of how WordPress works as of 3.6. But then I figured out WordPress made this change to how galleries are outputted in 3.7. So then in the code I provided above here, to make things a little easier since I was writing it myself, I just confined it to just the caption. That way, there’s only one thing to worry about.

    But if you wanted, you could pull anything there WordPress stores about the attachment to show in the lightbox. Let me know if you want help messing with that from the code I provided above.

    I am instructing my client in how to label her images and I want to make sure that she doesn’t have to change them when the theme is updated.

    It’s really important that you set this up properly for your client to avoid issues moving forward. So make sure you’ve installed a child theme for them. This means that the code here will go in the functions.php of your child theme. If you’re putting this code directly into the functions.php of your parent Alyeska theme, then these changes will get erased next time you update the theme.

    Here’s an intro video on using a child theme:

    http://vimeo.com/70832266

    And here are some things to be aware of when switching to a child theme in the middle of a project:

    http://dev.themeblvd.com/tutorial/switching-to-a-child-theme-after-youve-already-started-building-your-website/

    #13461
    ashlandwebsites
    Participant

    Thanks for your quick reply, Jason. I do have a child theme setup and am using that “functions.php” file so that is all good.

    It would be good to have title display under the thumbnail and the caption under the full lightbox image, which is the way I remember this theme working in earlier version. If there is something that I could paste in that would do that, I would be grateful. I don’t work with PHP so I would not attempt figure it out myself.

    Thanks very much
    David

    #13465
    Jason Bobich
    Keymaster

    It would be good to have title display under the thumbnail and the caption under the full lightbox image

    This is actually backwards from how it used to work. And it’s nothing to do with the theme really, but just how WordPress outputs the HTML markup of the gallery. But it wouldn’t really make sense for the attachment title to display below each thumbnail because that is the caption how you set it up from WP’s media management interface when inserting a gallery.

    So, for example, when you insert a gallery through WP’s media manager it looks like this:

    That is your visual representation of the gallery the user is inserting. The text field below each thumbnail there is what WordPress stores as the “caption.” So, that’s what’s going to display there is the caption and you can’t change that, and I don’t think you’d want to.

    However, what you put for the title tag of the image’s link and thus what will show up in the lightbox popup is the actual customization we’re adding here. So, this could be the title or caption, whichever you want.

    Display the attachment “caption” in the lightbox:

    /**
     * Add title to <a> in [gallery] shortcode.
     */
    function my_get_attachment_link( $output, $id ) {
    	$attachment = get_post( $id );
    	return str_replace( '<a', "<a title='{$attachment->post_excerpt}'", $output );
    }
    add_filter( 'wp_get_attachment_link', 'my_get_attachment_link', 10, 2 );

    Display the attachment “title” in the lightbox:

    /**
     * Add title to <a> in [gallery] shortcode.
     */
    function my_get_attachment_link( $output, $id ) {
    	$attachment = get_post( $id );
    	return str_replace( '<a', "<a title='{$attachment->post_title}'", $output );
    }
    add_filter( 'wp_get_attachment_link', 'my_get_attachment_link', 10, 2 );
Viewing 11 replies - 1 through 11 (of 11 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.