<?php
/**
 * Replace the icon on the timeline with the announcement number.
 *
 * @param  array $timeline_query Timeline Express query.
 *
 * @return array                 The unaltered Timeline Express query.
 */
function timeline_express_number_icons( $timeline_query ) {

    $announcements = wp_list_pluck( $timeline_query->posts, 'ID' );

    /**
     * Make the HTML replacement of the icon.
     *
     * @param  integer $post_id The announcement ID in the iteration.
     * @param  array   $options Timeline Exress options array.
     *
     * @return mixed            Markup for the custom number icon, or false to render the default icon.
     */
    add_filter( 'timeline_express_custom_icon_html', function( $post_id, $options ) use ( $announcements ) {

        global $post;

        if ( ! in_array( $post->ID, $announcements, true ) ) {

            return false;

        }

        return sprintf(
            '<div class="cd-timeline-img cd-picture" style="background: %s;">
                <a class="cd-timeline-icon-link" href="%s">
                    <span class="year"><strong>%s</strong></span>
                </a>
            </div>',
            esc_attr( timeline_express_get_announcement_icon_color( $post->ID ) ),
            esc_url( get_the_permalink( $post->ID ) ),
            absint( array_search( $post->ID, $announcements, true ) + 1 )
        );

    }, 10, 2 );

    return $timeline_query;

}
add_filter( 'timeline_express_announcement_query', 'timeline_express_number_icons' );