Paragraph Embedding from JISCPress

One of the things I was keen to explore within the context of the JISCPress project was the potential for using WordPress as a platform for publishing paragraph level fragments that could be embedded in third party web pages.

As Joss announced on the JISCPress blog, We’ve got paragraph data output switches! that expose paragraph level content through a unique URI in a variety of formats (xml, txt, html, rss and json), as well as object embed codes for each paragraph, though I’m not sure if this is going to be maintained…? e..g at the moment, I think we’re trialling literal text blockquote embeds:

Blockquote embed

(If the object embed does disappear, similar functionality could be achieved using the JSON feed and a Javascript function, though I guess we need JSON-P (i.e. support for something like &callback=foo to make that really easy.)

See also: A Quick Update for a review of the latest feature releases within the digress.it theme we’re using.

To demonstrate one possible use case for object embedding, see the post Engaging With the Issues Raised By The Google Book Settlement which includes three embedded paragraphs from the JISC’s current consultation around the Google books settlement.

Embedding content from write to reply

Here’s the actual HTML:

Embedding content from WriteToReply

Note that currently there is an issue with sizing the embed container (can any CSS gurus out there give us a fix?

Object sizing issue with WTR embeds

Ideally we need to identify the container height and then size it automatically so there are no scrollbars? I’m guessing .scrollHeight might have a role to play in autodetecting this?)

One thing you might notice is that the URIs for the embedded consultation questions follow a similar pattern – only the paragraph number identifier changes:
http://writetoreply.org/googlebooks?p=8&digressit-embed=4

What this means is that we should be able to pull in a random paragraph by constructing a URI with a randomly generated paragraph number. So for example:

var n=2+Math.floor(Math.random()*5);
var o=document.createElement(‘object’);
o.setAttribute(‘style’,’width: 100%; height:70px;’);
o.setAttribute(‘id’,’61c197964762012d4819093ebeee4fcf’);
var p=’http://writetoreply.org/googlebooks?p=8&digressit-embed=’+n;
p=p.replace(/#038;/,”); //get round WordPress escaping everything…
o.setAttribute(‘data’,p);
document.getElementById(‘wtr_embed’).appendChild(o);

If you reload the page, you have an 80% chance of seeing a different question…

Here’s the Javascript snippet:

var n=2+Math.floor(Math.random()*5);
var o=document.createElement('object');
o.setAttribute('style','width: 100%; height:70px;');
o.setAttribute('id','61c197964762012d4819093ebeee4fcf');
var p='http://writetoreply.org/googlebooks?p=8&digressit-embed='+n;
p=p.replace(/#038;/,''); //get round WordPress escaping everything...
o.setAttribute('data',p);
document.getElementById('wtr_embed').appendChild(o);

//There’s a div with an appropriate id attribute (‘wtr_embed’) also added to the page…
//Note that the div needs to be placed before any inline Javascript in the page;-)

I’m not sure yet if we can track the use of embeds (certainly server logs should be able to track calls, but these probably can’t be captured using Google Analytics?), but it’s still early days…

Advertisements

3 thoughts on “Paragraph Embedding from JISCPress

  1. Steph Gray

    The dream of transcluded consultation documents takes a big step forward – great work guys!

    Re: scrollbar, how about
    – checking your margins and padding are set to zero
    – adding overflow:hidden to the container

  2. WriteToReply

    @steph I think the scrollbar issue is to do with the max default size(?) of the object…. I can surpress it, but the container doesn’t necessarily flow have a large enough height to accommodate all the text if the page is narrowed. I saw a trick with old techniques on a lightbox some time ago that i think watched for scrollbars and kept track of the scrollHeight(?); if required it would actively resize the container?

    Ideally, we want the container to be just high enough, irrespective of the width?

  3. Pingback: The JISCPress Prototype Demonstrator Platform « JISCPress

Comments are closed.