ipad coding

A while back I noticed a post on the glow forums (glo login needed) where someone wanted to embed a google calendar on a glow blog. The problem is that the glow install of wordpress does not support iFrames (it does support short codes from youtube and vimeo).
After thinking about his I posted a solution that uses JavaScript, the suffusion theme supports adding a buit of JS to the blog template. this is the result: School Calendar » John Paul Academy

About a week ago I had an enquiry at work from a local school on how to add iFrames to their school blog which was fortunately using the suffusion theme. I revisited the code and made it a little more flexible. It is pretty simple stuff but seems to do the job.

You can add JavaScript to the Custom Footer JavaScript field in the Blog Features– JavaScript to the Custom Footer JavaScript in the Blog Features- Custom Includes section of the suffusion theme settings. section of the suffusion theme settings.


	var iframesArray= document.getElementsByClassName('ifr');
	for (var i=0; i < iframesArray.length; i++) {
	var iframeDetail=iframesArray[i].innerHTML.split(',');
	var newHTML='<iframe src="'+iframeDetail[0]+'" height="'+iframeDetail[1]+'" width="'+iframeDetail[2]+'" seamless="1" frameborder="0"></iframe>';
	iframesArray[i].innerHTML=newHTML;
	};

Once that is added you can add a iFrame to a post or page by adding this sort of text with the html editor:

<div class="ifr">http://johnjohnston.info/flickrSounds/show3.php,400,500</div>

The above will result in an iframe showing the page http://johnjohnston.info/flickrSounds/show3.php with an iFrame height of 400 pixels and a width of 500 the idea is to be able to control the ifRame height and width.

What does the code do

For any other JavaScript neophytes out there this is what happens:

The code runs every time a pages is loaded.

  1. var iframesArray= document.getElementsByClassName('ifr'); this gets an Array of all the divs with a class of ifr.
  2. for (var i=0; i < iframesArray.length; i++) { we then loop through all of the divs with the class.
  3. var iframeDetail=iframesArray[i].innerHTML.split(','); we make a new array splitting up the content of the div, id URL,Height and Width
  4. var newHTML='<iframe src="'+iframeDetail[0]… we make an html fragment for the iframe
  5. iframesArray[i].innerHTML=newHTML; and replace the contents of the div with the iFrame code
  6. }; finally close the loop.

I am not sure how much longer glow blogs are going to be wordpress ones:

Glow Blogs (e-portfolios and school sites) – Stakeholders raised concerns about the plan to migrate away from the current WordPress implementation of Glow Blogs. In response to this, and to increase user choice, we continue to seek clarification on the feasibility of making available a new installation of WordPress that will be available in parallel with SharePoint Online. In the meantime you have my assurance that the data sitting in the current version of WordPress will continue to be available to you while we consider the next steps.

from: Glow Scotland » Glow – December 2012 update from Craig Munro

I really hope that we will not loose the traction gained by training many users, teachers and pupils in the use of wordpress blogs over the last year or so.

3 thoughts on “Glow Blog Hack iFrames

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Before August 2014 I used disqus for comments, so this form shows up on older posts.

blog comments powered by Disqus