0

I am trying to get the caption of post embedded images to then use on a lightbox.

This is my code:

function my_theme_prefix_content_gallery( $content ) {
    global $post;

    $args = array(
        'post_type' => 'attachment',
        'post_mime_type'=>'image',
        'numberposts' => 1,
        'post_status' => null,
        'post_parent' => $post->ID,
    );

    $attachments = get_posts( $args );
    if ( $attachments ) {
        foreach ( $attachments as $attachment ) {
           $caption = $attachment->post_excerpt;
        }
    }

    $pattern     = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="' . $caption . '"$6>';
    $content     = preg_replace( $pattern, $replacement, $content );

    return $content;
}
add_filter( 'the_content', 'my_theme_prefix_content_gallery' );

What i have at the moment(code above) is giving me the caption from other images on the media library. How do I get the caption of the image that I am seeing?

EDIT

The Magnific Popup bit for the embedded images popup:

 $('a[rel="lightbox"]').magnificPopup ({
        type: 'image',
        mainClass: 'mfp-fade',
        fixedContentPos: false,
        removalDelay: 350,
        gallery: {
            enabled: true
        }
});

So whit this code I am being able to open post embedded images in Magnific Popup when clicked. All I am missing is a way to show their captions when they open in Magnific Popup.

5
  • On which page you are seeing image ? post, page, CPT, attachment ?
    – Sumit
    Commented Mar 23, 2016 at 19:27
  • On the post page, on a lightbox. I just need to get the image caption to show on the lightbox. I have edited my code above to show the whole function where I am trying to implement this functionality.
    – Madeirense
    Commented Mar 23, 2016 at 19:29
  • Shouldn't $replacement be inside the foreach loop? The $caption value changes inside the foreach loop. Once the loop is done, you will only have the last value of $caption.
    – gdaniel
    Commented Mar 23, 2016 at 19:40
  • Even with $replacement inside of the loop it keeps giving me the caption from another image from media library..
    – Madeirense
    Commented Mar 23, 2016 at 19:53
  • Its just frustrating that this seems to be so challenging, unless I am missing something very obvious here.. If I want the post featured image caption its as simple as this $caption = get_post(get_post_thumbnail_id())->post_excerpt; but if i want the caption from an image embedded in a post seems to be much more complicated.. Is there some similar function like this for post embedded images I am not seeing?
    – Madeirense
    Commented Mar 23, 2016 at 20:18

1 Answer 1

1

If I understood correctly, you are trying to add, to every image embedded in a post gallery, a custom rel attribute and a title attribute based on the attachment caption. Instead of parsing the content, you can try to modify the anchor that wraps the images using the 'wp_get_attachment_link' filter.

<?php

    function wpse221533_add_caption_title_to_content_gallery_image_attachments( $markup, $id, $size, $permalink, $icon, $text ) {

        //Target only images
        if ( ! wp_attachment_is_image( $id ) ) :
            return $markup;
        endif;

        //Limit the scope of the new attributes
        $post_types = array( 'post', 'page' );

        if ( ! is_singular( $post_types ) ) :
            return $markup;
        endif;

        //Get attachment data
        $current_attachment_object = get_post( $id );

        //Get attachment caption
        $current_attachment_caption = $current_attachment_object->post_excerpt;

        //Nothing wrong with regex, but str_replace is cheaper
        $markup = str_replace( ' href=', ' rel="lightbox" title="' . $current_attachment_caption . '" href=', $markup );

        return $markup;

    }

    add_filter( 'wp_get_attachment_link', 'wpse221533_add_caption_title_to_content_gallery_image_attachments', 10, 6 ) ;

?>

EDIT 16/04/06

In fact, I didn't understand correctly, since I was referring to posts' image galleries and the op to posts' single image attachments. The code above will only work for galleries.

This other code will do it for single image attachments:

<?php

    function wpse221533_add_caption_title_to_content_single_image_attachments( $content ) {

        //Limit the scope of the new attributes
        $post_types = array( 'post', 'page' );

        if ( ! is_singular( $post_types ) ) :
            return $content;
        endif;

        //Parse the content DOM for links
        $doc = new DOMDocument();
        $doc->loadHTML( $content );

        $anchors = $doc->getElementsByTagName( 'a' ); 

        //Parse each link
        foreach ( $anchors as $anchor ) :

            //Get the rel attribute
            $anchor_rel = $anchor->getAttribute( 'rel' );

            //Get the image ID based on the rel attribute
            $current_attachment_id = substr( strrchr( $anchor_rel, "-" ), 1 );

            //Check if the extracted ID is actually a number
            if ( ! is_numeric( $current_attachment_id ) ) :
                return $content;
            endif;

            //Target only images
            if ( ! wp_attachment_is_image( $current_attachment_id ) ) :
                return $content;
            endif;

            //Get the attachment object
            $current_attachment_object = get_post( $current_attachment_id );

            //Get the attachment caption
            $current_attachment_caption = $current_attachment_object->post_excerpt;

            //Set the rel attribute
            $anchor->setAttribute( 'rel', 'lightbox' );

            //Finally set the title attribute based on the attachment caption
            $anchor->setAttribute( 'title', $current_attachment_caption );

        endforeach;

        //Save the DOM changes
        $content = $doc->saveHTML();

        return $content;

    }

    add_filter( 'the_content', 'wpse221533_add_caption_title_to_content_single_image_attachments', 10, 1 );

?>
11
  • This doesn't seem to work. The replacement doesn't seem to be taking place. All I am trying to do is to make post embedded images open on a modal, Magnific Popup in this case. So when I click on a post embedded image I expect it to open in Magnific Popup and show its caption. The code I have above on my question works well apart from the caption bit. I just can't seem to figure out a way to make a post embedded image caption show when this image is open in Magnific Popup, no matter what I try. Edited my code above so you can also see the Magnific Popup bit.
    – Madeirense
    Commented Mar 24, 2016 at 9:49
  • May it be that your scope is not single page/post views? Try removing the is_singular condition.
    – Luis Sanz
    Commented Mar 24, 2016 at 22:15
  • No, even removing the is_singular condition is not making any difference.. the a tag that wraps the image looks like this <a href="http://localhost/myteme/wp-content/uploads/2016/02/image.jpg" rel="attachment wp-att=2107".. Nothing is changing rel="lightbox" title="' . $current_attachment_caption . '" is not being added.
    – Madeirense
    Commented Mar 25, 2016 at 4:15
  • The 'wp_get_attachment_link' filter is tailored for cases like yours, but it's difficult to tell what's going on in your website without knowing your exact setup. Try checking if the filter is passing the if conditions and if it's meeting the replacement function. If it's running that function without any effect, you could try substituting the str_replace for a proper preg_replace or even parsing the link with DOMDocument.
    – Luis Sanz
    Commented Mar 25, 2016 at 16:59
  • Sorry for the late reply. Haven't been around for a while. I have tried your suggestions but I just can't get this to work no matter what I do. So, I think I will leave it for the last touches or even consider to quite trying to implement this as it has been really time consuming so far. It's a shame because I really wanted it to work like that but unfortunately no luck. Thanks anyway
    – Madeirense
    Commented Apr 6, 2016 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.