Timeline Express - Add an additional image field to use in place of the icon on the timeline.

timeline-express-image-icons.php

/*
 * Timeline Express - Image Icons
 *
 * Note: Requires Timeline Express v1.2 or later.
 *	The following code should be placed in the bottom of your active themes functions.php file. 
 */

add_filter( 'timeline-express-custom-icon-html', 'pn_timeline_express_custom_icon_html_test', 10, 3 );
function pn_timeline_express_custom_icon_html_test( $html, $post_id, $timeline_express_options ) {

	$custom_png_icon = get_post_meta( $post_id, '_custom_png_icon', true );

	if ( ! $custom_png_icon ) {
		return $html;
	} else {
		$image_html = '<img class="custom-image" src="' .$custom_png_icon . '" />';
	}

	if ( empty( $image_html) ) {
		return $html;
	}

	// capture custom image HTML for the icon
	ob_start();

	if ( $timeline_express_options['read-more-visibility'] != 0 ) { ?>
		<a class="cd-timeline-icon-link" href="<?php echo get_the_permalink( $post_id ); ?>">
			<div class="cd-timeline-img cd-picture cd-timeline-png">
				<?php echo $image_html; ?>
			</div> <!-- cd-timeline-img -->
		</a>
	<?php } else { ?>
		<div class="cd-timeline-img cd-picture cd-timeline-png">
			<?php echo $image_html; ?>
		</div> <!-- cd-timeline-img -->
	<?php }

	$html = ob_get_contents();
	ob_end_clean();

	return $html;
}

/**
 * Define a new file picker field for
 * Timeline Express Announcements
 **/
add_filter( 'timeline_express_custom_fields' , 'add_custom_timeline_express_field' );
function add_custom_timeline_express_field( $custom_fields ) {
	$custom_fields = array(
		array(
			'name' => __( 'Timeline Image', 'timeline-express' ),
			'desc' => __( 'Add the image to use on the timeline, in place of the icon.', 'timeline-express' ),
			'id'   => '_custom_png_icon',
			'type' => 'file',
		),
	);
	return $custom_fields;
}

/**
 * Hide the announcement icon and color picker
 * on the announcement creation page
 **/
add_action( 'admin_head', 'hide_timeline_express_icon_field' );
function hide_timeline_express_icon_field() {
	global $pagenow;
	if ( 'post-new.php' === $pagenow && ( isset( $_GET['post_type'] ) && 'te_announcements' === $_GET['post_type'] ) ) {
		?>
		<style>
		.cmb2-id-announcement-color,
		.cmb2-id-announcement-icon {
			display: none;
		}
		</style>
		<?php
	}
}

add_action( 'wp_footer', 'pn_timeline_express_custom_icon_html_footer_css' );
function pn_timeline_express_custom_icon_html_footer_css() {
	?>
	<style>
		#primary .cd-timeline-img {
			border-radius: 0;
			box-shadow: none;
		}
		#primary .cd-timeline-img.cd-picture {
			background: none;
			border: none;
		}
		#primary .cd-timeline-img img {
			width: 60px;
			height: 60px;
			margin-left: -30px;
			margin-top: -30px;
			height: auto;
		}
	</style>
	<?php
}

This does not seem to work for me. I am using WordPress 4.4.3 running Divi v2.6.2 theme. I have pasted this code into the functions.php file. I do not have a child theme activated. I see no change in the plugin since doing this.

I went ahead and updated the snippet above to now hide the color picker and icon selector fields from the announcement page, since these are no longer relevant when using custom images instead of icons.

I am going to go ahead and make this into a free add-on that will be hosted on our site, https://www.wp-timelineexpress.com/addons .

When I get around to making it into a standalone add-on I will post back here with a link to the add-on and download page.

Thanks!
Evan