Embedding Many WordPress Posts

Using JavaScript with Hype
,
1

Looking for some advice… I have about 36 WordPress posts that I’d like to load into a Hype doc which will then be added to the same site as a WordPress page.

  1. Other than iframes, is there a way to load the page content into some box that the user can click a hotspot to hide and show the post entry?

  2. Loading 36 iframes might be… uhm slow. But assuming there’s no other way (ajax?) then what’s a suggestion to get the most speed out of Hype - perhaps a lazy load of sorts, so the iframe content isn’t loaded until the user clicks the hotspot and shows the framed content.

thanks for any advice.

2

###Method 1: API

You can use WP-API it works with JSON. This will take a bit more explaining and I might edit this entry in the future.

###Method 2: iFrame

Use iFrames but create them with JS inside of an rectangle that you then could animate. That way they only load if you trigger them (scene load, viewport enter etc.).

Just a quick function from the top of my head. Untested in Hype as I wrote this on the fly in the forum editor. Happy debugging.

var make_iFrame=function(id, url){
   hypeDocument.getElementById(id).innerHTML = '<iframe src="'+url+'" border="0">';
}
make_iFrame('post1', 'http://google.com');

You will have to have a rectangle on stage (no color) and give it the ID post1.

###Method 3: Custom Hack!

Just a quick function from the top of my head. You can write similar functions for images or Links. Untested in Hype as I wrote this on the fly in the forum editor. Happy debugging.

Render all posts into your page with wordpress use divs with unique ID’s for the elements. Encapsulate the results and hide them…

In your PHP

<div style="display:none;">
   <div id="post1_headline">Hello World</div>
   <div id="post1_body">Donec sed odio dui. <b>Nulla</b> vitae elit libero, a pharetra augue.</div>
</div>

In a Scene Load Function


var loadTextFromID=function(id){
   var content=document.getElementById(id).innerHTML;
   var hypeElements=document.getElementsByClassName(id);
   for(i=0;i<tElm.hypeElements;i++){
      hypeElements[i].innerHTML=content;
   }
}
loadTextFromID('post1_headline');
loadTextFromID('post1_body');

This will replace all the Textelements in you hypeDocument that have the class post1_headline or post1_body and will take the content from an ID from anywhere on the page with the same name.

Has the benefit… it’s immediate and requires no ajax and is SEO friendly. Also everything inside the DIV is copied so in this case one word will be bold.

Hope this gets you started.

1 Like
3

I might make a Extension from this technique…

1 Like
4

Bravo! Thanks! @MaxZieb - A bunch to consider for my neophyte coding eyeballs. Would love to see how the extension would work…