A few users have asked if it’s possible to display the popup when the announcement image is clicked. While it certainly is possible, it does require a small code snippet added to your theme to enable this functionality.

Below, we’ve gone ahead and written a small code example of how this can be achieved. You’ll notice that all we are doing, in the code below, is wrapping the announcement image in an anchor tag and adding an onclick attribute to the anchor tag to simulate clicking the ‘Read More’ link. This is a small workaround and allows for the images to be used as ‘Read More’ links.

This technique can also be used on any other elements on the timeline, allowing you to make the announcement title or announcement date as the controller to open the popups.

Code Sample

The code below will need to be added into your themes functions.php file, exactly as it’s written. Ideally, you would want to add the code inside of the tags below into a separate JavaScript file and then you would want to use wp_enqueue_script() to load the script on the appropriate page, to help minimize JavaScript conflicts with your theme or other plugins running on your site. But adding it directly into your themes functions.php file will work as well.

/**
 * Open the popup when the announcement image is clicked
 *
 * Note: This should be written in a separate .js file and enqueued
 * on the appropriate page to prevent conflicts
 *
 * @return mixed HTML markup for the script
 */
function timeline_express_open_popups_on_image_click() {

	?>

        <script type="text/javascript">

	jQuery( document ).ready( function() {

		var $timeline = jQuery( '.timeline-express' );

		$timeline.children( 'div' ).each( function() {

			var $image    = jQuery( this ).find( '.announcement-banner-image' ),
			    $readmore = jQuery( this ).find( '.popups-read-more-link' );

			if ( $image.length && $readmore.length ) {

				$image.wrap( '<a href="' + $readmore.attr( 'href' ) + '" onclick="jQuery(this).closest(\'.cd-timeline-content\').find(\'.popups-read-more-link\').click();return false;"></a>' );

			}

		} );

	} );

	</script>

	<?php

}
add_action( 'wp_head', 'timeline_express_open_popups_on_image_click' );

See It In Action