Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save EvanHerman/6bbc8de82f34b4cb3c5c to your computer and use it in GitHub Desktop.
Save EvanHerman/6bbc8de82f34b4cb3c5c to your computer and use it in GitHub Desktop.
Timeline Express - Add an additional image field to use in place of the icon on the timeline.
/*
* 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
}
@tgawley
Copy link

tgawley commented Jul 29, 2015

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

@stefanbuttigieg
Copy link

Bump! +1 for the above comment!

@Fencer04
Copy link

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

@djchub
Copy link

djchub commented Aug 24, 2015

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. :-(

@EvanHerman
Copy link
Author

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.

@EvanHerman
Copy link
Author

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

@EvanHerman
Copy link
Author

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

@PKE123
Copy link

PKE123 commented May 24, 2016

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.

@EvanHerman
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment