Timeline Express Pro Modifications: Difference between revisions

(5 intermediate revisions by the same user not shown)

Line 83:

Ideally it would be great to have a modal popup dialogue that displays the Citations and References, which involves extracting the information from the postmeta table and displaying it in a popup. That's the easy part. Getting the data in the postmeta table to display properly was a problematic issue. The main issue stems from the fact there is HTML and ShortCode in postmeta table. It needs to be displayed as raw output from WordPress, not as text in a paragraph.

Here's some foreshadowing: A Popup window as the solution? As it turns out, no way. Why? Because every single popup Plugin seems to load all of its information with the current page. If there's a bunch of information to load, as there is with a timeline that has a lot of events and a lot of sources that reference hundreds of books and web sites, that will kill a pages performance. All of that information did not need to load until it was called upon.

As it turns out, a Lightbox was the solution. Yes, traditionally those plugins are for images or galleries of images. But some can do iFrames. The best one I found was Featherlight. It can be configured to host / load images, videos, HTML, and iFrames. Perfect!

==Transfer Information into a Link for Clients to Click on==

The easy way to move information and access information between pages or the server and browser is to append data to the end of a URL: https://WhatEverWebSite/WhatEverPage.php?WhatEverVariable=1234567890 and access it with GET. But how can that be done. Easy, just build it into the string passed to the client using PHP.

===Do it with a GET Command===

The below code is a modified version of code from the Timeline Express Web site and should be put in the site Theme's (or child theme's) functions.php file;<syntaxhighlight lang="text">

function generate_custom_read_more_link()

{

global $post;

// "Gets" the ID of the current post from the POSTS Table

$post_id_to_pass = get_the_ID();

// Original line: echo wp_kses_post( '<a href="' . get_the_permalink( $post->ID ) . '" class="custom-class">Read More</a>' );

echo '<a href="' . 'WhatEverVariableName?metapost_id=' . $post_id_to_pass . '"class="WhatEverClassName">WhatEverLinkName</a>';

// Keep in mind, depending on how one's WordPress site is configured, the above HREF may need a leading / (forward slash) in the title), IE '/WhatEverVariableName?..."

}

add_action( 'timeline-express-after-excerpt', 'generate_custom_read_more_link' );

</syntaxhighlight>

===Do it with a POST Command===

But it is so ugly. Why not pass the information via Headers instead? Replace the echo command in the above code block with this one;<syntaxhighlight lang="text">

echo '<a href="" class="WhatEverClassName" onclick="event.preventDefault(); navigate_to_this_url(' . $post_id_to_pass . '); return false;">WhatEverLinkName</a>';

</syntaxhighlight>

It also requires some JavaScript on the client side which can be inserted with the below PHP code. And as above, it goes into the functions.php file;<syntaxhighlight lang="text">

function add_this_script_to_webpage_header()

{

?>

function navigate_to_this_url(the_post_id)

{

document.body.innerHTML = '<form id="dynForm" action="WhatEverURL" method="post"><input type="hidden" name="PostIdPassed" value=' + the_post_id + '></form>';

document.getElementById("dynForm").submit();

return false;

}

</script>

<?php

add_action('wp_head', 'add_this_script_to_webpage_header');

</syntaxhighlight>

The odd ?> and <?php Elements are there to put a break in the PHP code and allow the straight HTML to be injected into the page. This could be done more neatly with some sort of dedicated PHP function to inject HTML instead of just slopping it into the middle of the PHP code, but it works. But why not make it better an neater with the below code;<syntaxhighlight>

function add_this_script_to_webpage_header()

{

$script_string = '<script type="text/javascript">' .

'function navigate_to_this_url(the_post_id)' .

'{' .

"document.body.innerHTML = '<form id=\"dynForm\" action=\"https://WhatEverURL\" method=\"post\"><input type=\"hidden\" name=\"PostIdPassed\" value=' + the_post_id + '></form>';" .

'document.getElementById("dynForm").submit();' .

'return false' .

'}' .

'</script>';

echo $script_string;

}

add_action('wp_head', 'add_this_script_to_webpage_header');

</syntaxhighlight>All of the odd \ (backslashes) in the $script_string code is the escape character for PHP.

===Forget the Above Methods and use a Lightbox===

But either of the two methods opens a new webpage. That seems a bit clunky. Why not do something far more slick like a Popup? Well, as mentioned above there are issues with that. And also mentioned above is a better solution. Use a lightbox. After installing the Featherlight Lightbox, insert the below PHP code into the theme's (or child theme's) functions.php file;<syntaxhighlight lang="text">

function generate_custom_read_more_link()

{

global $post;

// "Gets" the ID of the current post from the POSTS Table

$post_id_to_pass = get_the_ID();

// Original line: echo wp_kses_post( '<a href="' . get_the_permalink( $post->ID ) . '" class="custom-class">Read More</a>' );

echo '<a href="' . 'WhatEverRelativeURL?metapost_id=' . $post_id_to_pass . '" data-featherlight="iframe" data-featherlight-iframe-width="2000" data-featherlight-iframe-height="800" class="FeatherLightUsesThisURLsoNameItAppropriately">WhatEverTextOrLinkName</a>';

}

add_action( 'timeline-express-after-excerpt', 'generate_custom_read_more_link' );

</syntaxhighlight>

And there's also one more item to configure when using the "lightbox" method. A dedicated page (WhatEverURL) needs to be created for the lightbox to open, with any custom CSS associated with making pages render correctly in a theme. And the below code needs to also be inserted into the functions.php file in order to only have the functionality run on the pages it is intended to run on;<syntaxhighlight lang="text">

// This If Function is TRUE if the requested Page is for the intended links

// When FALSE, the $CONTENT is simply returned as is with no changes

if ( basename(get_permalink()) == 'PageNameToCheck') // If the Page or Post name changes, it also needs to be changed in the link generated in the Timeline Express function above.

{

$post_id_from_post_header = $_POST['PostIdPassed'];

$post_id_from_get = $_GET['metapost_id'];

// This If Function is TRUE if the page was requested via a direct link or crawled by a robot.

if( is_null( $post_id_from_post_header ) )

{

$post_id_from_post_header = $post_id_from_get;

}

$content_of_custom_excerpt = get_post_meta( $post_id_from_post_header, 'announcement_custom_excerpt', true );

// This If Function is only TRUE if there is no announcement_custom_exerpt Field in the metapost Table for a post.

// When FALSE, an announcement_custom_exerpt Field in the metapost Table for a post exists.

if( is_null( $content_of_custom_excerpt ) )

{

$custom_excerpt_result_message = 'This post has no custom excerpt associated with it.';

$content = $content;

return $content;

}

else{

$content = 'Post ID from GET:' . $post_id_from_get . '<br><br>' . 'Post ID from HEADER:' . $post_id_from_post_header . $content_of_custom_excerpt;

return $content;

}

else{

$content = $content;

return $content;

}

add_filter ('the_content', 'display_sources_and_additional_information');

</syntaxhighlight>

<br />

@@ Line 83: / Line 83: @@
 Ideally it would be great to have a modal popup dialogue that displays the Citations and References, which involves extracting the information from the postmeta table and displaying it in a popup.  That's the easy part.  Getting the data in the postmeta table to display properly was a problematic issue.  The main issue stems from the fact there is HTML and ShortCode in postmeta table.  It needs to be displayed as raw output from WordPress, not as text in a paragraph.
+Here's some foreshadowing: A Popup window as the solution?  As it turns out, no way.  Why?  Because every single popup Plugin seems to load all of its information with the current page.  If there's a bunch of information to load, as there is with a timeline that has a lot of events and a lot of sources that reference hundreds of books and web sites, that will kill a pages performance.  All of that information did not need to load until it was called upon.
+As it turns out, a Lightbox was the solution.  Yes, traditionally those plugins are for images or galleries of images.  But some can do iFrames.  The best one I found was Featherlight.  It can be configured to host / load images, videos, HTML, and iFrames.  Perfect!
+==Transfer Information into a Link for Clients to Click on==
+The easy way to move information and access information between pages or the server and browser is to append data to the end of a URL: https://WhatEverWebSite/WhatEverPage.php?WhatEverVariable=1234567890 and access it with GET.  But how can that be done.  Easy, just build it into the string passed to the client using PHP.
+===Do it with a GET Command===
+The below code is a modified version of code from the Timeline Express Web site and should be put in the site Theme's (or child theme's) functions.php file;<syntaxhighlight lang="text">
+function generate_custom_read_more_link()
+{
+global $post;
+// "Gets" the ID of the current post from the POSTS Table
+$post_id_to_pass = get_the_ID();
+// Original line: echo wp_kses_post( '<a href="' . get_the_permalink( $post->ID ) . '" class="custom-class">Read More</a>' );
+echo '<a href="' . 'WhatEverVariableName?metapost_id=' . $post_id_to_pass . '"class="WhatEverClassName">WhatEverLinkName</a>';
+// Keep in mind, depending on how one's WordPress site is configured, the above HREF may need a leading / (forward slash) in the title), IE '/WhatEverVariableName?..."
+}
+add_action( 'timeline-express-after-excerpt', 'generate_custom_read_more_link' );
+</syntaxhighlight>
+===Do it with a POST Command===
+But it is so ugly.  Why not pass the information via Headers instead?  Replace the echo command in the above code block with this one;<syntaxhighlight lang="text">
+echo '<a href="" class="WhatEverClassName" onclick="event.preventDefault(); navigate_to_this_url(' . $post_id_to_pass . '); return false;">WhatEverLinkName</a>';
+</syntaxhighlight>
+It also requires some JavaScript on the client side which can be inserted with the below PHP code.  And as above, it goes into the functions.php file;<syntaxhighlight lang="text">
+function add_this_script_to_webpage_header()
+{
+?>
+<script type="text/javascript">
+	function navigate_to_this_url(the_post_id)
+	{
+	document.body.innerHTML = '<form id="dynForm" action="WhatEverURL" method="post"><input type="hidden" name="PostIdPassed" value=' + the_post_id + '></form>';
+	document.getElementById("dynForm").submit();
+	return false;
+	}
+</script>
+<?php
+add_action('wp_head', 'add_this_script_to_webpage_header');
+</syntaxhighlight>
+The odd ?> and <?php Elements are there to put a break in the PHP code and allow the straight HTML to be injected into the page.  This could be done more neatly with some sort of dedicated PHP function to inject HTML instead of just slopping it into the middle of the PHP code, but it works.  But why not make it better an neater with the below code;<syntaxhighlight>
+function add_this_script_to_webpage_header()
+{
+$script_string =	'<script type="text/javascript">' .
+					'function navigate_to_this_url(the_post_id)' .
+					'{' .
+					"document.body.innerHTML = '<form id=\"dynForm\" action=\"https://WhatEverURL\" method=\"post\"><input type=\"hidden\" name=\"PostIdPassed\" value=' + the_post_id + '></form>';" .
+					'document.getElementById("dynForm").submit();' .
+					'return false' .
+					'}' .
+					'</script>';
+echo $script_string;
+}
+add_action('wp_head', 'add_this_script_to_webpage_header');
+</syntaxhighlight>All of the odd \ (backslashes) in the $script_string code is the escape character for PHP.
+===Forget the Above Methods and use a Lightbox===
+But either of the two methods opens a new webpage.  That seems a bit clunky.  Why not do something far more slick like a Popup?  Well, as mentioned above there are issues with that.  And also mentioned above is a better solution.  Use a lightbox.  After installing the Featherlight Lightbox, insert the below PHP code into the theme's (or child theme's) functions.php file;<syntaxhighlight lang="text">
+function generate_custom_read_more_link()
+{
+global $post;
+// "Gets" the ID of the current post from the POSTS Table
+$post_id_to_pass = get_the_ID();
+// Original line: echo wp_kses_post( '<a href="' . get_the_permalink( $post->ID ) . '" class="custom-class">Read More</a>' );
+echo '<a href="' . 'WhatEverRelativeURL?metapost_id=' . $post_id_to_pass . '" data-featherlight="iframe" data-featherlight-iframe-width="2000" data-featherlight-iframe-height="800" class="FeatherLightUsesThisURLsoNameItAppropriately">WhatEverTextOrLinkName</a>';
+}
+add_action( 'timeline-express-after-excerpt', 'generate_custom_read_more_link' );
+</syntaxhighlight>
+And there's also one more item to configure when using the "lightbox" method.  A dedicated page (WhatEverURL) needs to be created for the lightbox to open, with any custom CSS associated with making pages render correctly in a theme.  And the below code needs to also be inserted into the functions.php file in order to only have the functionality run on the pages it is intended to run on;<syntaxhighlight lang="text">
+// This If Function is TRUE if the requested Page is for the intended links
+// When FALSE, the $CONTENT is simply returned as is with no changes
+if ( basename(get_permalink()) == 'PageNameToCheck')				// If the Page or Post name changes, it also needs to be changed in the link generated in the Timeline Express function above.
+	{
+	$post_id_from_post_header = $_POST['PostIdPassed'];
+	$post_id_from_get = $_GET['metapost_id'];
+// This If Function is TRUE if the page was requested via a direct link or crawled by a robot.
+	if( is_null( $post_id_from_post_header ) )
+	{
+		$post_id_from_post_header = $post_id_from_get;
+	}
+	$content_of_custom_excerpt = get_post_meta( $post_id_from_post_header, 'announcement_custom_excerpt', true );
+// This If Function is only TRUE if there is no announcement_custom_exerpt Field in the metapost Table for a post.
+// When FALSE, an announcement_custom_exerpt Field in the metapost Table for a post exists.
+	if( is_null( $content_of_custom_excerpt ) )
+		{
+		$custom_excerpt_result_message = 'This post has no custom excerpt associated with it.';
+		$content = $content;
+		return $content;
+		}
+	else{
+		$content = 'Post ID from GET:' . $post_id_from_get . '<br><br>' . 'Post ID from HEADER:' . $post_id_from_post_header . $content_of_custom_excerpt;
+		return $content;
+		}
+	}
+else{
+	$content = $content;
+	return $content;
+    }
+}
+add_filter ('the_content', 'display_sources_and_additional_information');
+</syntaxhighlight>
 <br />