As part of my rewrite of this blog I also wanted to get rid of having to put absolute links to images and other post-local files into every rendering of a post. While trying to achieve that for the feeds I stumbled upon a neat little feature of XML that made this possible.
If you remember the HTML3 and HTML4-days you probably also remember the
tag appearing virtually everywhere due to the amount of static websites. It
allows to set a base URL for every relative link or reference within the
current document. XML has that too but in a far more useful way: You can set
such a base path not just for the whole document but for every node with the
<container xml:base="http://zerokspot.com/"> <img src="image.png" /> </container>
img[src] attribute is interpreted as a link, then the resulting path
With the rise of HTML5 replacing XHTML you might think that this doesn’t work
anymore, but if you serve your HTML5 document as XML then this should work
here as well according to the specs. I didn’t try that, though, since I wanted
to stick with the non-XML version of HTML5. Luckily, I only have one page that
serves the content of a post without being in the blog post’s own path: The
index page. And here I just set the classic
<base> tag for the whole page.
As I wrote above, my initial use-case for this feature was to resolve relative links contained in my blog posts within the context of each such post. So, if you look at the main feed right now, you will see something like this:
<entry xml:base="http://zerokspot.com/weblog/2014/07/14/knack-review/"> <title>Knack reviewed</title> <updated>2014-07-14T18:33:33Z</updated> <id> http://zerokspot.com/weblog/2014/07/14/knack-review/ </id> <content type="html"> <!-- ... --> <img src="screenshot.jpg"> <!-- ... --> </content> </entry>
So far I’ve only tried that with Feedly and Firefox’ feed renderer and there it worked right away.