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
}

Hi, Could you explain where this code gets added into the plugin?

Bump! +1 for the above comment!

This is placed in the theme or child theme's functions file.

I still can't get it to work. copied the entire code and pasted it in the functions.php of my theme. But its still not working. :-(

This code gets placed into your child themes function.php file.

Last I checked this was working. I will have another look and report back.

Reporting back:

You are correct. In one of the previous updates when I updated CMB to CMB2 the function stopped working.

I am pushing out a 1.1.7.4 update that will get things in a working order.

Thanks for reporting here.

Edit: This should now be resolved and functioning properly in the latest releast on WordPress.org.

Evan

This snippet/gist has now been updated to work with Timeline Express version 1.2 and later.

If anyone is having any issues, feel free to post here and ping me.

Evan

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