Some users may want to display the image caption beneath the announcement banner images. It’s fairly simple to hook into the plugin code and generate an image caption beneath the banner images using the action timeline-express-after-image build into the plugin.

Adding/Updating Image Captions

We’ve put together some sample code that should help get you started. It’s important to note that the image captions are pulled from the ‘Caption’ field assigned to the image. You can edit the image caption by clicking the banner image on the edit announcement screen. Inside of the popup, on the right-hand side, you should see a field labeled ‘Caption’. You can add or edit image captions here.

Example:

Add and edit announcement banner captions

The Code

You’ll need a small snippet of code added to your website to enable image captions. This can be done by adding the following code into your themes functions.php file (Preferably you are using a child theme. If not your changes will be removed from the functions.php file on each theme update). Another option is to create an MU plugin where you can drop this code into. Whatever route you choose, copy the code below and add it into one of the above-mentioned locations and you should be all set.

/**
 * Generate a caption for the announcement banner image.
 * Note: Pulls the caption from the image caption meta data.
 *
 * @return string Announcement banner image caption if it exists, else null.
 */
function timeline_express_after_image_caption() {

    global $post;

    if ( empty( $post->ID ) ) {
        
        return;

    }

    $announcement_image_id = get_post_meta( $post->ID, 'announcement_image_id', true );

    if ( ! $announcement_image_id ) {

        return;

    }

    $caption = get_the_excerpt( $announcement_image_id );

    if ( ! $caption ) {

        return;

    }

    printf(
        '<figcaption class="banner-caption">%s</figcaption>',
        esc_html( $caption )
    );

}
add_action( 'timeline-express-after-image', 'timeline_express_after_image_caption' );

Styling the Announcement Banner Captions

You can add or remove class names (in the code snippet above) to adjust the appearance of the banner captions or you can alter their appearance through CSS. If you’ve used the snippet above, an example of some basic CSS styles for the announcement banner captions might be:

figcaption.banner-caption {
    float: left;
    font-style: italic;
    font-size: 12px;
}

Feel free to use the styles above as a starting point, and tweak as needed for your theme. You can add the CSS snippet above directly into your child themes style.css file, or into the ‘Additional CSS’ section of the customizer (From the dashboard: Appearance > Customize > Additional CSS).

Results

The final results should look similar to what you see below (depending on your theme’s style definitions):

Announcement banner caption rendered on the frontend