Using Trello and Blogs
I have been using Trello to manage project to do lists for awhile now. Also I have a set of pages on this blog http://blogs.it.ox.ac.uk/jamesc/projects/ where I openly store some descriptions and basic information about a subset of the projects I’m working on. In order to give those who care an easy overview of where particular projects were at I can give them access to my Trello board for that project. However, copying that information out in a table or something here on my blog seems a waste of time. But, I wondered, is there a way to embed the Trello board in my blog post? That would not only save me trouble, but since the board would have to be ‘public’ it would also make me work in the light which generally is a good thing.
What Trello Provides
Trello, as you may know, is a clever collaborative to-do list managing web app which has a concept of ‘Boards’, each of which can have multiple ‘lists’ and each list can have multiple ‘cards’ on it. (And indeed, each ‘card’ can also have multiple comments, attachments, checklists, due dates, etc.) It is really easy to create boards/lists/cards and move cards between lists, sort them on lists, etc. There is a handy Android App (I hear there is also an iOS version) that is feature rich. On each card you can see things like due dates, and who has been assigned that task.
So when you create a board it gets a unique URL like https://trello.com/b/g9mdhdzg/test-trello-board which is a test trello board I set up with some dummy lists and cards. What Trello gives us with and public boards from this URL (if we strip off the name (but leave the ID) and append different file suffixes) is:
- An image of the board: https://trello.com/b/g9mdhdzg.png
- Some html content of the board to stick in an iframe: https://trello.com/b/g9mdhdzg.html
- A full JSON serialization of the board: https://trello.com/b/g9mdhdzg.json
- And you can get all of these for any individual ‘card’ as well!
All that sounds great and you think I’d just embed an iframe with the trello in and it would always be up to date. Unfortunately the way WordPress is set up here (and many places by default) is not to allow iframes in your posts/pages. This makes sense: including lots of remote content on your blog is potentially dangerous in terms of that content then changing and misrepresenting your institution. But what you can do is embed an image and link to the board. So I do:
</pre> <div> <h2>Trello Board</h2> <a href="https://trello.com/b/g9mdhdzg"> <img alt="" src="https://trello.com/b/g9mdhdzg.png" /> </a></div> <pre>
And this gets me the below:
I just mention this in case you are using Trello and want to embed your boards in wordpress. For an example of me actually using this see my LEAP project page. There are several limitations (which I’ve mentioned to Trello). Even when you look at a particular card:
Also, as you can see from the image above you only really see 3 lists, and you get blank space under the lists if they are short (or get them truncated, presumably, if they are very long).
Also, if you click on the Test Trello Board above and go to it, you’ll notice it looks slightly different. That is because I have a ‘power-up’ called ‘card-aging’ on it which makes the cards look old when I’ve not touched them for a few weeks. But here they look normal. As well, I’ve changed the background colour, and the standard Trello blue is used in this image. Perhaps they might change these things at some point.
I hope that is useful or interesting. I plan to add more Trello Boards to my project pages in the future.