0

First of all, I have to apologize, my php-skills aren't good enough to solve this myself. So I hope that someone will kindly help me in this matter.

I'm trying to adjust the image caption below single post images. Instead of displaying the caption (post_excerpt), I would like to display the image title (post_title) and image description (post_content). I somewhat got what I'm looking for with the following code:

add_shortcode('wp_caption', 'img_caption_add_description');
add_shortcode('caption', 'img_caption_add_description');
function img_caption_add_description($attr, $content = null)
{
$post_id = str_replace('attachment_', '', $attr['id']);
$img = get_post((int)$post_id);

if (is_a($img, 'WP_Post')) {
    $image_title = $img->post_title;
    $image_content = $img->post_content;
    $attr['caption'] = '<span class="title-css">' . $image_title . '</span><br><span class="description-css">' . $image_content . '</span>';
}

return img_caption_shortcode($attr, $content);
}

Obviously, title and description are only added to the caption as shown here: Screenshot

How can I replace the caption with the image title and description, thus only showing title and description?

My caption shortcode in the editor looks like this:

[caption id="attachment_214" align="alignleft" width="999"]
<img class="size-full wp-image-214"
    src="https://www.[...]/wp-content/uploads/2017/02/geierlay-2.jpg"
    alt="Alt Geierlay" width="999" height="749" />
 Bechriftung Test[/caption]
0

Override The Image Caption With Image Title And Description

Here's a way to override the caption with the image title and image description, with a demo plugin.

Let's assume we have uploaded this image:

espresso

Then we insert it into the editor with the following:

[caption id="attachment_123" align="aligncenter" width="300"]
  <a href="https://example.tld/2017/03/01/hello-world/espresso/"    
       rel="attachment wp-att-123">
    <img src="https://example.tld/wp-content/uploads/2017/03/espresso-300x180.jpg" 
         alt="" width="300" height="180" class="size-medium wp-image-123" />        
   </a> espresso caption
[/caption]

Before:

Without our plugin activated it will display as:

before

After:

With the plugin activated it displays:

after

Hope it helps!

Demo plugin:

We use the filters img_caption_shortcode and shortcode_atts_caption.

Here we wrap it into a class to pass on the attachment id between the filter callbacks.

<?php
/**
 * Plugin Name: Modified Image Caption
 * Description: Override The Image Caption With Image Title And Description
 * Plugin URI:  http://wordpress.stackexchange.com/a/258612/26350
 */

namespace WPSE\Q258586;

add_action( 'init', [ new Caption, 'init' ] );

class Caption
{
    private $attachment_id ;

    public function init()
    {
        add_filter( 'img_caption_shortcode',    [ $this, 'shortcode' ], 999, 3 );
        add_filter( 'shortcode_atts_caption',   [ $this, 'atts' ],      999, 3 );
    }
    public function shortcode( $output, $attr, $content )
    {
        if( isset( $attr['id'] ) && preg_match( '/attachment_\d+/i', $attr['id' ] ) )
            $this->attachment_id = str_replace( 'attachment_', '', $attr['id'] );

        return $output;
    }

    public function atts( $atts, $pair )
    {
        if( ! $this->attachment_id  )
            return $atts;

        $img = get_post( $this->attachment_id );

        if( is_a( $img, '\WP_Post' ) )
        {
            $atts['caption'] = sprintf( 
                '<span class="title-css">%s</span>
                 <br><span class="description-css">%s</span>',
                esc_html( $img->post_title ),
                esc_html( $img->post_content )
            );
        }

        $this->id = null;

        return $atts;
    }
}
  • Thank you very much for your help. I created the plugin with your code snippet, activated it and created a new post to test it. Unfortunately, there seems to be no effect. Only the caption is displayed. ("<figcaption class="caption wp-caption-text">Bechriftung Test</figcaption>") Am I missing something? – Hans Wernersen Mar 2 '17 at 19:43
  • How are you inserting the image into the editor? What's the code there? @HansWernersen – birgire Mar 2 '17 at 20:00
  • I am inserting the image via the regular Wordpress "Add Media" button, as shown here: codex.wordpress.org/Inserting_Media_into_Posts_and_Pages – Hans Wernersen Mar 2 '17 at 20:14
  • I updated the answer with an example how it shows up on my install @HansWernersen – birgire Mar 2 '17 at 20:18
  • Thank you for your answer. I updated my original post to show my caption shortcode in the editor. I don't know why, but it looks different from yours. Could that be the reason why the plugin shows no effect for me? – Hans Wernersen Mar 2 '17 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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