Trying here a test of my Comparator Tool blogged/flogged yesterday. While brushing my teeth last night, the idea came to me I was thinking about doing this the wrong way- an iframe is the route.
Let’s see if this works.
The code that does that looks like (yes it needs a noframes option):
<iframe src="http://splot.ca/comparator/embed/?cid=44" width="420" height="340" style="border:none;"/>
Rather than the long mumbo jumbo I was doing before with all of the script references and HTML.
Let’s preview first. The splot was created here http://splot.ca/comparator/made/44/ and embed code copied.
EUREKA! Much easier embed AND it works in WordPress.
The first hitch was getting code into the output that checked for existing presence of jQuery and jQuery UI. You do not want to inject another if already present, and by default WordPress gives it to ya. Like 99% of the time, StackExchange came through with an answer with the code in a fiddle.
So this takes care of checking for the two required pieces of jQuery. The rest of my new version then loads the before/after jQuery plugin (I have it loaded on Google Drive), and runs the rest of the code to display the widget just as it does on the Splot page.
To make this work, I create a blank WordPress page on my site named “Embed”. No content needed. Then in my theme there is a new template page-embed.php where I code in everything it needs to work.
The only difference, we need to pass in a URL variable to indicate the post id, the key to getting all the info we use to grab the data within it.
So in functions.php I have some code that let’s me use my own custom URL parameters:[cpde lang=”php”] /* —– add allowable url parameter for urls */
add_filter(‘query_vars’, ‘comparator_parameter_queryvars’ );
function comparator_parameter_queryvars( $qvars )
// allow parameters to be passed in wordpress query strings
$qvars = ‘show’; // flag for showing w/o WP chrome
$qvars = ‘cid’; // post id for embeds
This lets me add parameters to my URLs like http://splot.ca/comparator/embed/?cid=12
So now in my script, I just need to grab this value, and I can use it as a post ID reference.
// just in case, put ID in for existing item $default_cid = 12; // get post id parameters from url string $cid = (isset($_GET['cid'])) ? $_GET['cid'] : $default_cid;
I have one working on a demo HTML page on my site e.g. http://cogdogblog.com/stuff/mappy.html. The HTML for this page is pretty simple
< !DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Map o Rama</title> </head> <body> <h1>My Home Town</h1> <p>Everything below the line came from <a href="http://splot.ca/comparator/made/18/">http://splot.ca/comparator/made/18/</a></p> <hr /> <iframe src="http://splot.ca/comparator/embed/?cid=18" width="620" height="640" style="border:none;"></iframe> </body> </html>
I am not able to get this going on Dropbox or Google Drive, since they are all running on SSL now, and you cannot iframe to a source from a non https server. That’s minor for now.
But it’s embed! in bed! in wordpress!
This code is hardly prime time, but just to be a good citizen, all of it is now available on github.
Again, what I am interested here are the things needed to run things from WordPress that are more tool than blog or site.
The post "Embed The Before/After Bed" was originally dropped like a smoking hot potato at CogDogBlog (http://cogdogblog.com/2014/11/embed-the-beforeafter-bed/) on November 19, 2014.