Tag Archives: WordPress

iframes for IPython

This will demonstrate the use of iframes and nbviewer to embed IPython notebooks in WordPress. For an example that should work in most cases, enter syntax equivalent to this into the Text tab of the WordPress editor:

[iframe src="http://nbviewer.ipython.org/urls/dl.dropbox.com/s/zwyp2nuue76nuwy/Amanda%20-%20Seastar%20Transcriptome%20continued%20continued.ipynb" width="100%" same_height_as="window" scrolling="yes"]

which will render from IPython as in the example shown below, an implementation of the syntax above. Following this example are additional parameters you can use to modify the appearance and function of an iframe in the Open Notebook Science Network.

iframe parameters and defaults:

  • src – source of the iframe [iframe src="https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97"] (by default src=”https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97″);
  • width – width in pixels or percentage [iframe width="100%" src="https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97"] or [iframe width="640" src="https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97"] (by default width=”100%”);
  • height – height in pixels [iframe height="480" src="https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97"] (by default height=”480″);
  • scrolling – parameter [iframe scrolling="yes"] (by default scrolling=”no”);
  • frameborder – parameter [iframe frameborder="0"] (by default frameborder=”0″);
  • marginheight – parameter [iframe marginheight="0"] (removed by default);
  • marginwidth – parameter [iframe marginwidth="0"] (removed by default);
  • allowtransparency – allows to set transparency of the iframe [iframe allowtransparency="true"] (removed by default);
  • id – allows to add the id of the iframe [iframe id="my-id"] (removed by default);
  • class – allows to add the class of the iframe [iframe class="my-class"] (by default class=”iframe-class”);
  • style – allows to add css styles of the iframe [iframe style="margin-left:-30px;"] (removed by default);
  • same_height_as – allows to set the height of iframe same as target element [iframe same_height_as="body"], [iframe same_height_as="div.sidebar"], [iframe same_height_as="div#content"], [iframe same_height_as="window"] – iframe will have the height of the viewport (visible area), [iframe same_height_as="document"] – iframe will have the height of the document, [iframe same_height_as="content"] – auto-height feature, so the height of the iframe will be the same as embedded content. [[same_height_as="content"]] works only with the same domain and subdomain. Will not work if you want to embed page “sub.site.com” on page “site.com”. (removed by default);
  • get_params_from_url – allows to add GET parameters from url to the src of iframe; Example: page url – site.com/?prm1=11, shortcode – [iframe src="embed.com" get_params_from_url="1"], iframe src – embed.com?prm1=11 (disabled by default);
  • any_other_param – allows to add new parameter of the iframe [iframe any_other_param="any_value"];
  • any_other_empty_param – allows to add new empty parameter of the iframe (like “allowfullscreen” on YouTube) [iframe any_other_empty_param=""];

Note that while this is ability is enabled here in the Open Notebook Science Network, it is not enabled in all WordPress sites and networks hosted by the Open Science Federation, nor is it enabled in most other WordPress sites, including WordPress.com, for security reasons.

This network is moderated and optimised for Open Notebook Science. Embedding from an IPython notebook is one of many features for Open Science, others including licensing management for media, integration with Zotero for reference management, syntax highlighting, MathJax-LaTeX, etc.