Add image title and/or description to the caption

Question

Is it possible to manipulate the output of the image captions within the_content in such a way that not only the caption, but also the image title and/or description (defined in the media library) are output under each image?

Possibly via the functions.php?

Collette

do you have an example of the output now? – Chura

Sure. Images placed in the_content are like <div class="wp-block-image"><figure class="alignleft size-large is-resized"><img src="https://www.example.com/wp-content/uploads/winter.jpg" alt="Correct Alt Text" width="400"></figure></div> – Collette

Thanks what is your desired output? – Chura

I'm looking for a way to manipulate the form in which images are displayed within "the_content". For example as a <figure> including <figcaption>. Then I would like to output not only the defined caption itself, but also the image title / image description (defined in the WP Media Gallery also). – Collette

Answer 1

Yes it is possible to manipulate the on the_content.

The easiest way which it looks like you are wanting to do is add a filter in your functions.php file.

I just pulled this from the Codex and modified a bit so you can get the gist of what I'm talking about.

add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 );
 
function my_img_caption_shortcode( $output, $attr, $content ) {
    $attr = shortcode_atts( array(
        'id'      => '',
        'align'   => 'alignnone',
        'width'   => '',
        'caption' => ''
    ), $attr );
 
    if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
        return '';
    }
 
    if ( $attr['id'] ) {
        $attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
    }
 
    return '<div ' . $attr['id']
    . 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
    . 'style="max-width: ' . ( 10 + (int) $attr['width'] ) . 'px;">'
    . do_shortcode( $content )
    . '<p class="wp-caption-text">' . $attr['caption'] . '</p>'
    . '</div>';
 
}

What you can then do is if you see the $attr['caption'], you can modify how you would like it to be. So you can do: get_the_title($attr['id']) to add the title or get_post_meta($attr['id'], '_wp_attachment_image_alt', TRUE); to get the image alt.

To make things easier if you want to grab all the details on a specific attachment you can use a function like this and then get whatever you want.

Here's an example of adding the title to your caption. The format is "Title - Caption"

. '<p class="wp-caption-text">' . get_the_title($attr['id']) . " - " . $attr['caption'] . '</p>'

Link to Code reference: https://developer.wordpress.org/reference/hooks/img_caption_shortcode/

Xanthous

Answer 2

Maybe i'm not understanding your question but it seems to me that you're using the Gutenberg editor?
... All the features you're looking for are already built-in.

If you want to set the alt="" or title="" attributes you can do it on the right side action column, by clicking on the image itself, while in the Gutenberg editor.

For the figcaption, you can set it right under the image, by clicking on the image itself, while in the Gutenberg editor.

Dg

I've updated my question so that it's a little better understandable. Yes, I use the block editor, but I not only want to output ALT and CAPTION, but also TITLE and DESCRIPTION of the image (defined in the Media Library) – Collette

instead of the one you're defining usually in the editor ? – Dg

Yes, I would like to use functions.php to determine how images should be output in "the_content". The theme is self developed. – Collette