Tuesday, February 21, 2012

Embedding images into your Markdown pages

Markdown has great support for images, and they come in handy for bringing WikiPack pages to life. I use them for a lot of things:

  • I keep a wishlist page with photos of iOS games I’d like to try one day, geek tools that look cool, and stationary items that I really like the idea of but will never use
  • Before buying new things, like a burr grinder or cold-press juicer that I’m considering at the moment, I research he best products out there on a page with links to reviews and photos of each item
  • I keep a page for my favourite apps containing tips & tricks, often accompanied by a screenshot

In this video I demonstrate two methods for adding images to your pages:

  1. Hot-linking to externally hosted images (a bit naughty)
  2. Using an image sharing service like Cloud.ly to upload an image from your computer

The method of embedding the image is the same in each case, using the following Markdown syntax:

![alt-text](URL)

A note on Trunk Notes images

Those of you who use WikiPack as a companion for Trunk Notes may be wondering about the possibility of supporting it’s images. Trunk Notes allows you to save images into a folder on Dropbox, and display them in your wiki using either it’s {{image}} function, or a standard Markdown image like ![image](../images/Image.jpg).

As the files are stored locally on your iOS device, it doesn’t use any bandwidth to view images within Trunk Notes, but I haven’t implemented support for Trunk Notes images in WikiPack yet.

What I’m thinking about is looking into whether it might be possible to use hot-linking to display the images directly from Dropbox, because it won’t be practical to keep a local cache of a large no. of users images. At least not for the time being. If it turns out that there’s no other way to implement support for Trunk Notes images, it might have to become a premium feature or something. Not making any promises at this point though.

No comments:

Post a Comment