WordPress: Test the new Timeline Express filter

timeline-express-filter-test.php

<?php
/*
Plugin Name: Timeline Express Custom Icon Filter Test
*/

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, $timeline_express_options ) {

	$custom_png_icon = get_post_meta( $post->ID, '_custom_png_icon', true );
	if ( empty ( $custom_png_icon ) ) {
		return $html;
	} else {
		$image_src = wp_get_attachment_image_src( $custom_png_icon, 'full' );
		if ( ! empty ( $image_src ) ) {
			$image_html = '<img class="custom-image" src="' .$image_src[0] . '" width="' . $image_src[1] . '" height="' . $image_src[1] . '" />';
		}
	}

	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;
}


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
}