Timeline Express Pro Modifications: Difference between revisions

Line 87:

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!

== ~~Using Headers to~~ Transfer Information ==

==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 ~~it is so ugly~~. ~~Why not pass~~ the ~~information via Headers?~~

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>

@@ Line 87: / Line 87: @@
 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!
-== Using Headers to Transfer Information ==
+==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 it is so ugly.  Why not pass the information via Headers?
+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>