{"id":355,"date":"2015-04-17T14:03:27","date_gmt":"2015-04-17T14:03:27","guid":{"rendered":"http:\/\/drsfenner.org\/blog\/?p=355"},"modified":"2016-02-05T16:23:55","modified_gmt":"2016-02-05T16:23:55","slug":"pushing-ipython-notebooks-to-wordpress-3","status":"publish","type":"post","link":"https:\/\/drsfenner.org\/blog\/2015\/04\/pushing-ipython-notebooks-to-wordpress-3\/","title":{"rendered":"Pushing IPython Notebooks to WordPress"},"content":{"rendered":"
\n
\n<\/div>\n
\n
\n

It turns out that I really, really like writing documents as iPython notebooks – at least shorter documents. I’m also (as you can tell, if you are reading this) into blogging about my technical (and recreational) endavors. Since blog posts are shorter documents … Captain Obvious? … it is a small step to wanting to do my blog posting, or much of it … or any of it with Python code, as an iPython notebook. However, WordPress is primarily a php and database mashup and it doesn’t really work well (natively) with Python or iPython.<\/p>\n

This has led several folks (like Jake VdV<\/a>) to bail ship from WordPress to Pelican<\/a>) and other folks (like Matt R<\/a>) to not use notebooks directly in their posts. For myself, I decided to explore another option (b\/c I already had web hosting and I didn’t want to spin up additional servers, migrate my blog — again, etc.).<\/p>\n

<\/p>\n

I decided to make use of html as a common display format and use iPython’s conversion systems to feed the notebook. This process turned out to be more difficult than I wanted. I had originally hoped to add an element within my blog page that would be a "direct" link a notebook that was rendered by nbviewer. That didn’t work out so well: mainly b\/c displaying a webpage within another webpage is a pain-in-the-tail. It is understandable that it is difficult because arbitrarily linking to external content can be a severe security issue.<\/p>\n

There are ways around the cross linking issue (iframe is the "builtin" html construct — it sucks): ajax, requesting the remote resource on the server side and then displaying "joined" content to the client using php. I did this, it sort of worked, but it required me manually writing a "wrapper" post that included a php call to render the notebook on nbviewer<\/a>). What was more difficult was getting all the elements of the nbviewer css integrated with the blog css theme. I don’t have patience for that sort of web development (not my cup of tea), so I kept looking for another option. In the end, I did have to do a bit of css work, but it amount to getting two pre-created css files onto my server. I can deal with that.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n<\/div>\n
\n
\n

My Solution¶<\/a><\/h3>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/div>\n
\n
\n

What I settled on gave me the following capabilities.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
In [1]:<\/div>\n
\n
\n
\n
from<\/span> IPython.display<\/span> import<\/span> Image<\/span>\r\nImage<\/span>(<\/span>'.\/resources\/chart.png'<\/span>)<\/span>\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
Out[1]:<\/div>\n
\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/div>\n
\n
\n
As you can see, I wanted to give my readers the maximum flexibility to view the notebook in the way that worked best for them. You can either view it:<\/p>\n