From 2ca0182a405dcb60a1158dba853ae641fa7ad9cf Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 17 Jul 2018 23:26:36 +0200
Subject: [PATCH] post metadata cleanup

---
 .prettierignore                               |   1 +
 content/pages/404.md                          |  13 -
 content/pages/styleguide.md                   | 778 ------------------
 content/posts/2005-07-26-beaucarnea-leafs.md  |   4 +-
 content/posts/2005-08-02-snail-on-a-leaf.md   |   4 +-
 content/posts/2006-07-23-electricity.md       |   4 +-
 content/posts/2006-07-23-floating-sky.md      |   4 +-
 content/posts/2006-08-21-new-berlin-bridge.md |   4 +-
 content/posts/2006-09-16-wooden-windmill.md   |   4 +-
 .../posts/2006-10-22-german-chancellery.md    |   4 +-
 content/posts/2007-02-10-macbook-abstract.md  |   4 +-
 ...-adjustment-tool-guide-for-aperture-152.md |   2 +-
 ...canon-canoscan-lide-500f-for-intel-macs.md |  14 +-
 ...s-on-a-mac-for-htaccess-protected-sites.md |   2 +-
 .../2008-03-30-launch-of-kremaliciouscom.md   |   2 +-
 content/posts/2008-03-31-love-the-parallax.md |   4 +-
 ...-web-design-tips-from-leonardo-da-vinci.md |   2 +-
 .../posts/2008-04-04-aperture-file-types.md   |  12 +-
 ...4-london-police-afraid-of-photographers.md |   4 +-
 ...guide-to-icons-how-to-smashing-magazine.md |   2 +-
 ...4-05-first-principles-for-choosing-type.md |   2 +-
 ...announced-various-photographers-awarded.md |   4 +-
 ...ing-the-image-icons-in-mac-os-x-leopard.md |  14 +-
 ...2008-04-09-measuring-the-color-of-light.md |   2 +-
 ...0-the-story-behind-the-pulitzer-picture.md |   2 +-
 ...8-04-11-photographers-strike-back-in-uk.md |   4 +-
 ...ion-helper-for-apples-aperture-released.md |   4 +-
 ...kit-team-introduced-css-based-gradients.md |   4 +-
 ...lever-text-effects-with-css-text-shadow.md | 126 ++-
 ...4-22-apple-releases-sdk-for-aperture-21.md |   4 +-
 ...someness-from-the-webkit-team-css-masks.md |   4 +-
 ...anoscan-lide-500f-with-mac-os-x-leopard.md |  16 +-
 ...can-images-directly-into-apple-aperture.md |  12 +-
 ...7-high-quality-watermarks-with-aperture.md |  52 +-
 ...first-available-aperture-editing-plugin.md |   4 +-
 ...-the-15-best-new-features-of-aperture-2.md |  34 +-
 ...s-beautiful-indiana-jones-desktop-icons.md |   6 +-
 ...tographic-software-to-work-with-leopard.md |   2 +-
 ...perture-adjustment-plugins-have-arrived.md |  30 +-
 ...eases-fisheye-hemi-plug-in-for-aperture.md |   4 +-
 ...05-21-awesome-parallax-optical-illusion.md |   4 +-
 ...-css-parallax-effect-12-creative-usages.md |  72 +-
 ...ew-all-in-one-aperture-plug-in-released.md |   4 +-
 content/posts/2008-06-01-chives.md            |   6 +-
 .../2008-06-02-tweet-im-on-twitter-now.md     |   4 +-
 ...and-the-history-of-the-first-photograph.md |  13 +-
 ...3-niepces-camera-obscura-wallpaper-pack.md |   6 +-
 .../2008-06-04-helvetica-typewriter-keys.md   |   8 +-
 .../2008-06-11-safari-4-developer-preview.md  |  12 +-
 ...tip-borders-titles-plug-in-for-aperture.md |   6 +-
 ...mac-file-server-and-time-machine-volume.md |  95 ++-
 ...-is-edit-for-aperture-now-updated-to-12.md |   4 +-
 ...25-new-canon-stuff-xs-eos-1000-430ex-ii.md |   6 +-
 content/posts/2008-06-30-stone-head.md        |   4 +-
 ...ack-to-normal-on-kremaliciouscom-almost.md |   4 +-
 ...8-new-aperture-plug-ins-jade-and-ptlens.md |   8 +-
 .../2008-07-11-enjoy-kremaliciousiphone.md    |   6 +-
 ...e-plug-in-nik-announces-silver-efex-pro.md |   6 +-
 ...s-25-get-rid-of-that-sluggish-dashboard.md |   4 +-
 content/posts/2008-07-23-leaf-life.md         |   4 +-
 ...ps-for-journalists-reporting-from-china.md |   4 +-
 ...reate-a-mobile-encrypted-aperture-vault.md |  12 +-
 ...ja-finally-available-for-apple-aperture.md |   4 +-
 ...8-08-22-the-kremalicious-marsedit-style.md |   8 +-
 content/posts/2008-08-26-icy-box-icons.md     |   8 +-
 ...rchitect-and-facade-theming-for-leopard.md |   8 +-
 ...-08-28-canon-eos-50d-new-lens-announced.md |   8 +-
 ...1-a-new-browser-is-coming-google-chrome.md |   6 +-
 content/posts/2008-09-23-a-long-time-ago.md   |   4 +-
 ...9-23-futurama-mars-university-wallpaper.md |   4 +-
 content/posts/2008-10-23-coffee-cup-icon.md   |   6 +-
 ...most-incredible-coffee-icons-on-the-web.md |  56 +-
 ...e-guide-to-watermarks-in-apple-aperture.md |  14 +-
 ...a-custom-gravatar-image-in-wordpress-27.md |   6 +-
 ...yling-author-comments-with-wordpress-27.md |   4 +-
 .../posts/2009-01-05-the-mac-in-futurama.md   | 173 +---
 content/posts/2009-02-01-portal-thingy.md     |  16 +-
 content/posts/2009-02-17-out-of-whale-oil.md  |  10 +-
 ...imate-coda-wordpress-share-link-bonanza.md |  20 +-
 content/posts/2009-06-04-twitter-crisp.md     |   6 +-
 content/posts/2009-06-24-adiumeetie.md        |  12 +-
 content/posts/2009-09-05-delibar.md           |   6 +-
 .../2009-12-17-wordpress-post-thumbnails.md   |  16 +-
 content/posts/2010-02-04-ipixelpad.md         |   8 +-
 content/posts/2010-03-27-office-desk.md       |   4 +-
 content/posts/2010-07-03-momcorp.md           |   8 +-
 content/posts/2010-07-18-typeface-condoms.md  |   4 +-
 content/posts/2010-08-07-bonsai.md            |   4 +-
 content/posts/2010-09-01-gdr-helvetica.md     |   4 +-
 content/posts/2010-12-11-iphone-coasters.md   |   4 +-
 ...29-basically-the-monolith-is-on-my-desk.md |   4 +-
 ...29-free-monkey-breath-not-soylent-green.md |   4 +-
 content/posts/2011-01-08-enjoying-paper.md    |   4 +-
 .../posts/2011-01-08-glowing-star-inside.md   |   4 +-
 .../posts/2011-01-18-historic-flood-levels.md |   4 +-
 .../posts/2011-10-11-broken-nexus-s-screen.md |   4 +-
 content/posts/2011-12-15-badged.md            |   6 +-
 content/posts/2012-02-26-mk-v2.md             |  24 +-
 content/posts/2012-03-04-relaxing-cat.md      |   4 +-
 content/posts/2012-04-03-blaue-turme.md       |   4 +-
 content/posts/2012-04-03-skeletor.md          |   4 +-
 .../posts/2012-04-03-train-station-leipzig.md |   4 +-
 .../posts/2012-04-04-android-tab-conundrum.md |  21 +-
 .../posts/2012-04-05-current-sushi-status.md  |   4 +-
 content/posts/2012-04-07-buna.md              |   4 +-
 ...012-04-07-cat-enjoying-a-good-ipad-game.md |   4 +-
 content/posts/2012-04-07-ipad-porn.md         |   4 +-
 content/posts/2012-04-07-opera.md             |   4 +-
 .../2012-04-08-common-kitchen-decoration.md   |   4 +-
 .../2012-04-08-graffiti-old-school-style.md   |   4 +-
 ...2012-04-20-the-origins-of-the-blink-tag.md |   2 +-
 .../posts/2012-04-30-announcing-sketch2.md    |   2 +-
 ...oropen-free-access-to-academic-research.md |   2 +-
 content/posts/2012-05-03-antique-chrome.md    |   4 +-
 .../2012-05-04-world-press-photo-2012.md      |   2 +-
 ...9-media-query-asset-downloading-results.md |   2 +-
 ...5-12-nielsen-vs-clark-theyre-both-wrong.md |   2 +-
 ...sponsive-images-solution-should-you-use.md |   2 +-
 .../2012-05-14-welcome-to-kremalicious2.md    |  14 +-
 content/posts/2012-05-15-wp-icons-template.md |  14 +-
 content/posts/2012-05-21-why-comic-sans.md    |   2 +-
 ...hoo-killed-flickr-and-lost-the-internet.md |   2 +-
 ...-and-web-standards-at-the-turning-point.md |   2 +-
 ...23-like-modern-heating-only-more-badass.md |   4 +-
 .../2012-05-26-html-for-icon-font-usage.md    |   2 +-
 content/posts/2012-05-27-balloon.md           |   4 +-
 ...se-move-past-apples-silly-faux-real-uis.md |   2 +-
 ...012-06-13-retina-icons-in-wordpress-3-4.md |   6 +-
 content/posts/2012-06-27-typography-window.md |   4 +-
 content/posts/2012-06-30-why-files-exist.md   |   2 +-
 .../posts/2012-07-04-newton-reconsidered.md   |   2 +-
 .../2012-07-07-what-makes-twitter-twitter.md  |   2 +-
 ...nd-colliders-the-first-photo-on-the-web.md |   2 +-
 ...your-web-site-to-the-windows-8-metro-ui.md |  10 +-
 ...2012-07-16-using-kbd-for-fun-and-profit.md |   2 +-
 ...puter-generated-graphics-film-from-1963.md |   2 +-
 content/posts/2012-07-20-mmmmh-coffee.md      |   4 +-
 content/posts/2012-08-07-projectpurple.md     |  16 +-
 content/posts/2012-08-08-amazingly-early.md   |   4 +-
 content/posts/2012-08-20-im-joining-ezeep.md  |   4 +-
 content/posts/2012-08-25-so-much-room.md      |   4 +-
 .../posts/2012-09-07-huge-station-is-huge.md  |   4 +-
 content/posts/2012-09-10-subway-firefox.md    |   4 +-
 content/posts/2012-09-12-sweet-typography.md  |   4 +-
 content/posts/2012-09-14-bvg-dos.md           |   4 +-
 .../posts/2012-09-26-designing-with-code.md   |   2 +-
 content/posts/2013-02-17-castle-garden.md     |   4 +-
 .../2013-02-17-ezeep-android-app-design.md    |   2 +-
 content/posts/2013-02-17-ezeep-office-view.md |   2 +-
 content/posts/2013-05-23-ezeep-birds.md       |   2 +-
 content/posts/2013-05-23-ezeep-origami.md     |   2 +-
 ...nology-can-hurt-or-harm-our-inner-state.md |   2 +-
 .../posts/2014-03-10-just-a-normal-sunday.md  |   2 +-
 content/posts/2014-03-15-potsdam.md           |   5 +-
 .../posts/2014-03-17-typographic-diamond.md   |   5 +-
 content/posts/2014-04-26-ai-weiwei-stools.md  |   2 +-
 .../2014-06-07-airfield-reference-point.md    |   2 +-
 ...-anton-henning-heimat-schaffen-simpsons.md |   2 +-
 ...9-thanks-for-the-tip-little-orange-blob.md |   2 +-
 ...-hindu-temple-appears-around-the-corner.md |   2 +-
 .../2015-04-09-most-surprising-dog-i-know.md  |   2 +-
 ...-obligatory-it-s-summer-in-berlin-photo.md |   2 +-
 ...hildhood-toys-hang-painted-in-a-gallery.md |   2 +-
 content/posts/2015-04-25-tiny-tiny-demons.md  |   2 +-
 ...2015-08-02-simple-tor-setup-on-mac-os-x.md |   8 +-
 .../posts/2015-09-13-css-app-store-badges.md  |   2 +-
 ...udi-knows-how-to-impress-with-a-ceiling.md |   2 +-
 .../posts/2016-02-27-streets-of-el-raval.md   |   2 +-
 content/posts/2016-03-02-a-storm-is-coming.md |   2 +-
 ...7-02-13-keith-haring-vandalizing-a-wall.md |   2 +-
 .../posts/2017-02-13-streets-of-el-born.md    |   2 +-
 .../posts/2017-02-14-new-passion-facade.md    |   2 +-
 .../posts/2017-02-16-coolhaven-rotterdam.md   |   2 +-
 content/posts/2017-02-17-behind-the-art.md    |   2 +-
 content/posts/2017-02-19-rotterdam-coats.md   |   2 +-
 ...2017-02-21-david-chipperfield-staircase.md |   2 +-
 content/posts/2017-02-26-eu-gotham-city.md    |   2 +-
 content/posts/2017-02-27-amsterdam-cliche.md  |   2 +-
 .../2017-02-27-its-dark-and-i-dont-exist.md   |   2 +-
 content/posts/2017-02-28-stedelijk-museum.md  |   2 +-
 .../2017-02-28-temple-guardian-rijksmuseum.md |   2 +-
 .../2017-02-28-watching-the-night-watch.md    |   2 +-
 .../2017-04-16-hamburgs-elbphilharmonie.md    |   2 +-
 ...017-07-05-kapaleeshwarar-temple-chennai.md |   2 +-
 ...7-07-08-kochis-streetart-game-is-strong.md |   2 +-
 ...017-07-09-orphaned-elephant-with-friend.md |   2 +-
 .../posts/2017-07-10-kochis-dhobhi-ghat.md    |   2 +-
 ...17-07-13-mumbai-hand-painted-typography.md |   2 +-
 ...17-07-13-obligatory-gate-of-india-photo.md |   2 +-
 ...pati-shivaji-maharaj-vastu-sangrahalaya.md |   2 +-
 .../2017-11-10-acropolis-the-erechtheum.md    |   2 +-
 .../2017-11-10-acropolis-the-parthenon.md     |   2 +-
 .../2017-11-10-acropolis-the-propylaea.md     |   2 +-
 content/posts/2017-12-16-sagrada-familia.md   |   2 +-
 content/posts/2017-12-27-sao-paulo-traffic.md |   2 +-
 ...-01-04-passagem-literaria-da-consolacao.md |   2 +-
 content/posts/2018-01-05-samba-school.md      |   2 +-
 197 files changed, 669 insertions(+), 1633 deletions(-)
 delete mode 100644 content/pages/404.md
 delete mode 100644 content/pages/styleguide.md

diff --git a/.prettierignore b/.prettierignore
index 2667b906..6cddd8e6 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,3 +2,4 @@ node_modules/
 .cache/
 static/
 public/
+content/
diff --git a/content/pages/404.md b/content/pages/404.md
deleted file mode 100644
index 2c5bc8ef..00000000
--- a/content/pages/404.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: page
-title: I'm sorry Dave
----
-
-<div class="hal-9000"></div>
-
-<p class="srverror-title">I'm sorry Dave,</p>
-<p class="srverror-text">I'm afraid I can't do that.</p>
-
-<a href="#" class="js-search-init">How about a nice search?</a>
-
-[Go to homepage](/)
diff --git a/content/pages/styleguide.md b/content/pages/styleguide.md
deleted file mode 100644
index 27c78816..00000000
--- a/content/pages/styleguide.md
+++ /dev/null
@@ -1,778 +0,0 @@
----
-layout: page
-
-title: Style Guide
-sitemap: false
----
-
-The main page title of this guide is an `h1` element.
-
-## Colors
-
-<div class="colors grid grid--gutters grid--full grid-small--third">
-    {% for color in site.data.colors %}
-    <div class="color grid__col">
-        <div class="color__swatch {{ color.name }}"></div>
-        <span class="color__name">${{ color.name }}</span>
-        <span class="color__hex">#{{ color.hex }}</span>
-    </div>
-    {% endfor %}
-</div>
-
-## Typography
-
-<div class="fonts">
-    <p class="font__name font__name--brandon">Brandon Grotesque</p>
-    <p class="font__name font__name--fftisa">FF Tisa Sans Pro</p>
-</div>
-
-
-## Sections
-
-The secondary header above is an `h2` element, which may be used for any form of important page-level header. Consider using an `h2` unless you need a header level of less importance, or as a sub-header to an existing `h2` element.
-
-### Third-Level Header
-
-The header above is an `h3` element, which may be used for any form of page-level header which falls below the `h2` header in a document hierarchy.
-
-#### Fourth-Level Header
-
-The header above is an `h4` element, which may be used for any form of page-level header which falls below the `h3` header in a document hierarchy.
-
-##### Fifth-Level Header
-
-The header above is an `h5` element, which may be used for any form of page-level header which falls below the `h4` header in a document hierarchy.
-
-###### Sixth-Level Header
-
-The header above is an `h6` element, which may be used for any form of page-level header which falls below the `h5` header in a document hierarchy.
-
-
-## Structural Elements
-
-### Paragraphs
-
-All paragraphs are wrapped in `p` tags. Additionally, `p` elements can be wrapped with a `blockquote` element if the `p` element is indeed a quote.
-
-The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.
-
-<p class="text-dimmed">Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.</p>
-
-```html
-<p class="text-dimmed">...</p>
-```
-
-### Blockquotes
-
-The `blockquote` element represents a section that is being quoted from another source:
-
-> Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.
->
-> --- Winston Churchill, in [a speech to the House of Commons](http://hansard.millbanksystems.com/commons/1947/nov/11/parliament-bill#column_206) (11th November 1947)
-
-### Horizontal Rules
-
-The `hr` element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book. The following extract from *Pandora's Star* by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it:
-
-> Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwearth could be appallingly backward at times, not to mention cruel.
->
-> *Maybe it won't be that bad*, he told himself. The lie was comforting enough to get him through the rest of the night's shift.
->
-> * * *
->
-> The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond's winters.
-
-
-## List Elements
-
-### Ordered Lists
-
-The `ol` element denotes an ordered list, and various numbering schemes are available through CSS (including 1,2,3... i,ii,iii... a,b,c... and so on). Each item requires a surrounding `li` tag, to denote individual items within the list.
-
-Here is an example list showing the monarchs of Great Britain and the United Kingdom:
-
-1. House of Stuart
-   1. Anne
-2. House of Hanover
-   1. George I
-   2. George II
-   3. George III
-   4. George IV
-   5. William IV
-   6. Victoria
-3. House of Saxe-Coburg and Gotha
-   1. Edward VII
-4. House of Windsor
-   1. George V
-   2. Edward VIII
-   3. George VI
-   4. Elizabeth II
-
-### Unordered Lists
-
-The `ul` element denotes an unordered list (i.e. a list of loose items that don't require numbering, or a bulleted list). Again, each item requires a surrounding `li` tag, to denote individual items.
-
-Here is an example list showing the constituent parts of the British Isles:
-
-* United Kingdom of Great Britain and Northern Ireland:
-  * England
-  * Scotland
-  * Wales
-  * Northern Ireland
-* Republic of Ireland
-* Isle of Man
-* Channel Islands:
-  * Bailiwick of Guernsey
-  * Bailiwick of Jersey
-
-Sometimes you may want each list item to contain block elements, typically a paragraph or two:
-
-* The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.
-
-* Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.
-
-* The full list of islands in the British Isles includes over 1,000 islands, of which 51 have an area larger than 20 km^2^.
-
-### Definition Lists
-
-The `dl` element is for another type of list called a definition list. Instead of list items, the content of a `dl` consists of `dt` (definition term) and `dd` (definition description) pairs. Though it may be called a "definition list", `dl` can apply to other scenarios where a parent/child relationship is applicable. For example, it may be used for marking up dialogues, with each `dt` naming a speaker, and each `dd` containing his or her words:
-
-Romeo
-: Have not saints lips, and holy palmers too?
-
-Juliet
-: Ay, pilgrim, lips that they must use in prayer.
-
-
-## Table Elements
-
-Tables should be used when displaying tabular data. The `thead`, `tfoot` and `tbody` elements enable you to group rows within each table.
-
-If you use these elements, you must use every element. They should appear in this order: `thead`, `tfoot` and `tbody`, so that browsers can render the foot before receiving all the data. You must use these tags within the `table` element.
-
-Example with Team GB's London 2012 medal table:
-
-<div class="table-responsive">
-<table>
-  <thead>
-    <tr>
-      <th style="text-align: left">Sport</th>
-      <th>Gold</th>
-      <th>Silver</th>
-      <th>Bronze</th>
-      <th>Total</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td style="text-align: left">Athletics</td>
-      <td>4</td>
-      <td>1</td>
-      <td>1</td>
-      <td>6</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Boxing</td>
-      <td>3</td>
-      <td>1</td>
-      <td>1</td>
-      <td>5</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Canoe Slalom</td>
-      <td>1</td>
-      <td>1</td>
-      <td>0</td>
-      <td>2</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Canoe Sprint</td>
-      <td>1</td>
-      <td>0</td>
-      <td>1</td>
-      <td>2</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Cycling - Road</td>
-      <td>1</td>
-      <td>1</td>
-      <td>1</td>
-      <td>3</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Cycling - Track</td>
-      <td>7</td>
-      <td>1</td>
-      <td>1</td>
-      <td>9</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Diving</td>
-      <td>0</td>
-      <td>0</td>
-      <td>1</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Equestrian</td>
-      <td>3</td>
-      <td>1</td>
-      <td>1</td>
-      <td>5</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Gymnastics - Artistic</td>
-      <td>0</td>
-      <td>1</td>
-      <td>3</td>
-      <td>4</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Hockey</td>
-      <td>0</td>
-      <td>0</td>
-      <td>1</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Judo</td>
-      <td>0</td>
-      <td>1</td>
-      <td>1</td>
-      <td>2</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Modern Pentathlon</td>
-      <td>0</td>
-      <td>1</td>
-      <td>0</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Rowing</td>
-      <td>4</td>
-      <td>2</td>
-      <td>3</td>
-      <td>9</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Sailing</td>
-      <td>1</td>
-      <td>4</td>
-      <td>0</td>
-      <td>5</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Shooting</td>
-      <td>1</td>
-      <td>0</td>
-      <td>0</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Swimming</td>
-      <td>0</td>
-      <td>1</td>
-      <td>2</td>
-      <td>3</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Tennis</td>
-      <td>1</td>
-      <td>1</td>
-      <td>0</td>
-      <td>2</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Taekwondo</td>
-      <td>1</td>
-      <td>0</td>
-      <td>1</td>
-      <td>2</td>
-    </tr>
-    <tr>
-      <td style="text-align: left">Triathlon</td>
-      <td>1</td>
-      <td>0</td>
-      <td>1</td>
-      <td>2</td>
-    </tr>
-  </tbody>
-  <tfoot>
-    <tr>
-      <td style="text-align: left">Total</td>
-      <td>29</td>
-      <td>17</td>
-      <td>19</td>
-      <td>65</td>
-    </tr>
-  </tfoot>
-</table>
-</div>
-
-## Media Elements
-
-### Image
-
-The `img` element represents an image:
-
-<img src="/media/obligatory-it-s-summer-in-berlin-photo.jpg" alt="Example image" width="600" height="360" />
-
-
-## Text Formatting Elements
-
-### Links and Anchors
-
-The `a` element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web. Example:
-
-[Go to the home page](/) or [return to the top of this page](#top).
-
-### Stressed Emphasis
-
-The `em` element is used to denote text with stressed emphasis, i.e. something you'd pronounce differently. Where italicizing is required for stylistic differentiation, the `i` element may be preferable. Example:
-
-You simply *must* try the negitoro maki!
-
-### Strong Importance
-
-The `strong` element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the `b` element may be preferable. Example:
-
-**Don't** stick nails in the electrical outlet.
-
-### Italicised
-
-The `i` element is used for text in an alternate voice or mood, or otherwise offset from the normal prose. Examples include taxonomic designations, technical terms, idiomatic phrases from another language, the name of a ship or other spans of text whose typographic presentation is typically italicised. Example:
-
-There is a certain <i>je ne sais quoi</i> in the air.
-
-### Emboldened
-
-The `b` element is used for text stylistically offset from normal prose without conveying extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typographic presentation is typically emboldened. Example:
-
-You enter a small room. Your <b>sword</b> glows brighter. A **rat** scurries past the corner wall.
-
-### Inline Quotes
-
-The `q` element is used for quoting text inline. Example showing nested quotations:
-
-John said, <q>I saw Lucy at lunch, she told me <q>Mary wants you to get some ice cream on your way home</q>. I think I will get some at Ben and Jerry's, on Gloucester Road.</q>
-
-### Abbreviations
-
-The `abbr` element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it's less work and useful (enough) to mark up only the first occurrence of any particular abbreviation on a page, and ignore the rest. Any text in the `title` attribute will appear when the user's mouse hovers the abbreviation (although, notably, this does not work in Internet Explorer for Windows). Example:
-
-Get the latest news from the <abbr title="British Broadcasting Corporation">[BBC](http://www.bbc.co.uk/)</abbr> in Stoke and <abbr title="Staffordshire">Staffs</abbr>.
-
-### Definitions
-
-The `dfn` element is used to highlight the first use of a term. The `title` attribute can be used to describe the term. Example:
-
-Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.
-
-### Citations
-
-The `cite` element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc.). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. Example:
-
-<cite>Universal Declaration of Human Rights</cite>, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).
-
-### Marked or Highlighted Text
-
-The `mark` element is used to represent a run of text marked or highlighted for reference purposes. When used in a quotation it indicates a highlight not originally present but added to bring the reader's attention to that part of the text. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user's current activity. Example:
-
-I also have some ==kitten==s who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a ==kitten==.
-
-### Edits
-
-The `del` element is used to represent deleted or retracted text which still must remain on the page for some reason. Meanwhile its counterpart, the `ins` element, is used to represent inserted text. Example:
-
-As a result, ~~Kodos~~ ++Kang++ was elected president.
-
-### Variables
-
-The `var` element is used to denote a variable in a mathematical expression or programming context, but can also be used to indicate a placeholder where the contents should be replaced with your own value. Example:
-
-If there are <var>n</var> pipes leading to the ice cream factory then I expect at *least* <var>n</var> flavours of ice cream to be available for purchase!
-
-### Superscript and Subscript Text
-
-The `sup` element represents a superscript and the sub element represents a `sub`. These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation. As a guide, only use these elements if their absence^superscript would change the meaning of the content.
-
-Chemical formulas are written using subscripts (e.g. C~6~H~12~O~6~), but atomic isotopes are written using superscripts (e.g. ^13 C, ^131^I, and ^238^U).
-
-### Small Print
-
-The `small` element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as 'small print'). It can also be used for attributions or satisfying licensing requirements. Example:
-
-<small>Copyright (C) 1912-2012 Acme Corporation. All Rights Reserved.</small>
-
-### Time
-
-The `time` element is used to represent either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Example:
-
-Queen Elizabeth II was proclaimed sovereign of each of the Commonwealth realms on <time datetime="1952-02-06">6</time> and <time datetime="1952-02-07">7 February 1952</time>, after the death of her father, King George VI.
-
-### Keyboard Entry
-
-The `kbd` element is used to denote user input (typically via a keyboard, although it may also be used to represent other input methods, such as voice commands). Example:
-
-To take a screenshot on your Mac, press <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>3</kbd>.
-
-### Sample Output
-
-The `samp` element is used to represent (sample) output from a program or computing system. Useful for technology-oriented sites, not so useful otherwise. Example:
-
-The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.
-
-### Pre-Formatted Text
-
-The `pre` element represents a block of pre-formatted text, in which structure is represented by typographic conventions rather than by elements. Here's an example showing the printable characters of ASCII:
-
-      ! " # $ % & ' ( ) * + , - . /
-    0 1 2 3 4 5 6 7 8 9 : ; < = > ?
-    @ A B C D E F G H I J K L M N O
-    P Q R S T U V W X Y Z [ \ ] ^ _
-    a b c d e f g h i j k l m n o p
-    q r s t u v w x y z { | } ~
-
-### Code
-
-The `code` element is used to represent fragments of computer code. Useful for technology-oriented sites, not so useful otherwise. Example:
-
-The [`requestAnimationFrame`](https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame) method in the `window` object tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
-
-### Code Blocks
-
-The `code` element can also be used in conjunction with the `pre` element to represent verbatim text like markup or a fragment of computer code:
-
-```
-function microsoftShuffle(arr) {
-  return arr.slice().sort(function () {
-    return (0.5 - Math.random());
-  });
-}
-```
-
-You may also specify the language of a code block, so that it can be properly highlighted. Below you can find the classic *Hello world* program implemented in different languages.
-
-
-#### JavaScript
-
-```js
-console.log('Hello, world!');
-```
-
-#### HTML
-
-```html
-<h1 class="hello">Hello, world!</h1>
-```
-
-#### CSS
-
-```css
-.hello { font-size: 2rem; }
-```
-
-#### Shell
-
-```shell
-echo 'Hello, world!'
-```
-
-#### Bash
-
-```bash
-# output stuff
-echo 'Hello, world!'
-```
-
-#### PHP
-
-```php
-<?= 'Hello, world!' ?>
-```
-
-#### C
-
-```c
-#include <stdio.h>
-int main(int argc, char *argv[])
-{
-  printf("Hello, world!\n");
-  return 0;
-}
-```
-
-#### C++
-
-```cpp
-#include <iostream>
-using namespace std;
-int main()
-{
-  cout << "Hello, world!" << endl;
-  return 0;
-}
-```
-
-#### C&#35;
-
-```csharp
-using System;
-class Program
-{
-  public static void Main()
-  {
-    Console.WriteLine("Hello, world!");
-  }
-}
-```
-
-#### Clojure
-
-```clj
-(println "Hello, world!")
-```
-
-#### Elixir
-
-```elixir
-IO.puts "Hello World"
-```
-
-#### Erlang
-
-```erlang
-io:format("~s~n", ["Hello, world!"])
-```
-
-#### Go
-
-```go
-package main
-import "fmt"
-func main() {
-  fmt.Println("Hello, world!")
-}
-```
-
-#### Groovy
-
-```groovy
-println "Hello, world!"
-```
-
-#### Haskell
-
-```hs
-main = putStrLn "Hello, world!"
-```
-
-#### Java
-
-```java
-public class HelloWorld {
-  public static void main(String[] args) {
-    System.out.println("Hello, world!");
-  }
-}
-```
-
-#### Lisp
-
-```lisp
-(princ "Hello, world!")
-```
-
-#### Lua
-
-```lua
-print("Hello, World!")
-```
-
-#### Objective-C
-
-```objc
-#import <stdio.h>
-int main(void)
-{
-  printf("Hello, world!\n");
-  return 0;
-}
-```
-
-#### Perl
-
-```perl
-print "Hello, world!";
-```
-
-#### Python
-
-```py
-print "Hello, world!"
-```
-
-#### R
-
-```r
-cat('Hello, world!')
-```
-
-#### Ruby
-
-```rb
-puts "Hello, world!"
-```
-
-#### Scala
-
-```scala
-object HelloWorld extends App {
-  println("Hello, world!")
-}
-```
-
-#### Scheme
-
-```scheme
-(display "Hello, world!")
-```
-
-#### Smalltalk
-
-```smalltalk
-Transcript show: 'Hello, world!'.
-```
-
-## Form Elements
-
-Forms can be used when you wish to collect data from users. The `fieldset` element enables you to group related fields within a form, and each one should contain a corresponding `legend`. The `label` element ensures field descriptions are associated with their corresponding form widgets.
-
-<form action="#">
-  <div class="form-group">
-    <label for="text">Text <abbr title="Required">*</abbr></label>
-    <input class="form-control" type="text" id="text" required="required" />
-  </div>
-  <div class="form-group">
-    <label for="textph">Text with placeholder</label>
-    <input class="form-control" type="text" id="textph" placeholder="Placeholder" />
-  </div>
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input class="form-control" type="password" id="password" />
-  </div>
-  <div class="form-group">
-    <label for="email">Email</label>
-    <input class="form-control" type="email" id="email" />
-  </div>
-  <div class="form-group">
-    <label for="url">URL</label>
-    <input class="form-control" type="url" id="url" />
-  </div>
-  <div class="form-group">
-    <label for="number">Number</label>
-    <input class="form-control" type="number" id="number"
-      min="0" max="10" step="2" value="10" />
-  </div>
-  <div class="form-group">
-    <label for="range">Range</label>
-    <input class="form-control" type="number" id="range"
-      min="0" max="10" step="2" value="10" />
-  </div>
-  <div class="form-group">
-    <label for="date">Date</label>
-    <input class="form-control" type="date" id="date" />
-  </div>
-  <div class="form-group">
-    <label for="datetime">Date + Time</label>
-    <input class="form-control" type="datetime" id="datetime" />
-  </div>
-  <div class="form-group">
-    <label for="search">Search</label>
-    <input class="form-control" type="search" id="search" />
-  </div>
-  <div class="form-group">
-    <label for="searchph">Search with placeholder</label>
-    <input class="form-control" type="search" id="searchph" placeholder="Placeholder" />
-  </div>
-  <div class="form-group">
-    <label for="color">Color</label>
-    <input class="form-control" type="color" id="color" />
-  </div>
-  <div class="form-group">
-    <label for="textarea">Textarea</label>
-    <textarea class="form-control" id="textarea" rows="3"></textarea>
-  </div>
-  <div class="form-group">
-    <label for="textareaph">Textarea with placeholder</label>
-    <textarea class="form-control" id="textareaph" rows="3" placeholder="Placeholder"></textarea>
-  </div>
-  <div class="form-group">
-    <label for="select">Select</label>
-    <select class="form-control" id="select">
-      <optgroup label="Option Group One">
-        <option>Option One</option>
-        <option>Option Two</option>
-        <option>Option Three</option>
-      </optgroup>
-      <optgroup label="Option Group Two">
-        <option>Option Four</option>
-        <option>Option Five</option>
-      </optgroup>
-    </select>
-  </div>
-  <div class="buttons">
-    <button class="btn btn-primary" type="submit">Post Comment</button>
-    <button class="btn">Preview</button>
-  </div>
-</form>
-
-
-## Patterns
-
-Design and mark-up patterns unique to this site.
-
-### Alerts
-
-<div class="alert alert-info">
-    <p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
-    <p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
-</div>
-
-<div class="alert alert-success">
-    <p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
-    <p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
-</div>
-
-<div class="alert alert-error">
-    <p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
-    <p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
-</div>
-
-### Pagination
-
-<nav class="paginator">
-    <a class="paginator__link" href="/">
-        <svg class="icon icon-chevron-left">
-            <use xlink:href="/assets/img/sprite.svg#chevron-left"></use>
-        </svg>
-    </a>
-    <a href="/" class="paginator__link">1</a>
-    <a href="#" class="paginator__link active">2</a>
-    <a class="paginator__link" href="/page/3">3</a>
-    <a class="paginator__link" href="/page/4">4</a>
-    <a class="paginator__link" href="/page/5">5</a>
-    <a class="paginator__link" href="/page/6">6</a>
-    <a class="paginator__link" href="/page/7">7</a>
-    <a class="paginator__link" href="/page/8">8</a>
-    <a class="paginator__link" href="/page/9">9</a>
-    <a class="paginator__link" href="/page/10">10</a>
-    <a class="paginator__link" href="/page/11">11</a>
-    <a class="paginator__link" href="/page/12">12</a>
-    <a class="paginator__link" href="/page/3">
-        <svg class="icon icon-chevron-right">
-            <use xlink:href="/assets/img/sprite.svg#chevron-right"></use>
-        </svg>
-    </a>
-</nav>
diff --git a/content/posts/2005-07-26-beaucarnea-leafs.md b/content/posts/2005-07-26-beaucarnea-leafs.md
index 6101d89c..82638020 100644
--- a/content/posts/2005-07-26-beaucarnea-leafs.md
+++ b/content/posts/2005-07-26-beaucarnea-leafs.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Beaucarnea leafs
-image: img_1820-Version-4.jpg
+image: ../media/img_1820-Version-4.jpg
 author: Matthias Kretschmann
 
 date: 2005-07-26 11:44:49+00:00
-wordpress_id: 1982
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2005-08-02-snail-on-a-leaf.md b/content/posts/2005-08-02-snail-on-a-leaf.md
index 867a980a..eacd0ecc 100644
--- a/content/posts/2005-08-02-snail-on-a-leaf.md
+++ b/content/posts/2005-08-02-snail-on-a-leaf.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Snail on a leaf
-image: schnecke_blatt.jpg
+image: ../media/schnecke_blatt.jpg
 author: Matthias Kretschmann
 
 date: 2005-08-02 11:39:04+00:00
-wordpress_id: 1973
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2006-07-23-electricity.md b/content/posts/2006-07-23-electricity.md
index 87f0fb1e..d9fb0e45 100644
--- a/content/posts/2006-07-23-electricity.md
+++ b/content/posts/2006-07-23-electricity.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Electricity
-image: MG_5885_2006-7-23.jpg
+image: ../media/MG_5885_2006-7-23.jpg
 author: Matthias Kretschmann
 
 date: 2006-07-23 11:36:28+00:00
-wordpress_id: 1970
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2006-07-23-floating-sky.md b/content/posts/2006-07-23-floating-sky.md
index 42983731..92146b95 100644
--- a/content/posts/2006-07-23-floating-sky.md
+++ b/content/posts/2006-07-23-floating-sky.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Floating Sky
-image: floating-sky-1.jpg
+image: ../media/floating-sky-1.jpg
 author: Matthias Kretschmann
 
 date: 2006-07-23 11:32:14+00:00
-wordpress_id: 1964
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2006-08-21-new-berlin-bridge.md b/content/posts/2006-08-21-new-berlin-bridge.md
index e9fef347..e78a6430 100644
--- a/content/posts/2006-08-21-new-berlin-bridge.md
+++ b/content/posts/2006-08-21-new-berlin-bridge.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: New Berlin Bridge
-image: berliner_bruecke1-HDR-16bit.jpg
+image: ../media/berliner_bruecke1-HDR-16bit.jpg
 author: Matthias Kretschmann
 
 date: 2006-08-21 11:22:34+00:00
-wordpress_id: 1958
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2006-09-16-wooden-windmill.md b/content/posts/2006-09-16-wooden-windmill.md
index 249106f0..51b33d8d 100644
--- a/content/posts/2006-09-16-wooden-windmill.md
+++ b/content/posts/2006-09-16-wooden-windmill.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Wooden Windmill
-image: muehle_suhlendorf_HDR_Tonemapped_16bit.jpg
+image: ../media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg
 author: Matthias Kretschmann
 
 date: 2006-09-16 11:47:16+00:00
-wordpress_id: 1985
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2006-10-22-german-chancellery.md b/content/posts/2006-10-22-german-chancellery.md
index 940a5991..c496e720 100644
--- a/content/posts/2006-10-22-german-chancellery.md
+++ b/content/posts/2006-10-22-german-chancellery.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: German Chancellery
-image: bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg
+image: ../media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg
 author: Matthias Kretschmann
 
 date: 2006-10-22 11:43:00+00:00
-wordpress_id: 1979
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2007-02-10-macbook-abstract.md b/content/posts/2007-02-10-macbook-abstract.md
index 4b1c13c4..91438282 100644
--- a/content/posts/2007-02-10-macbook-abstract.md
+++ b/content/posts/2007-02-10-macbook-abstract.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: MacBook abstract
-image: MG_9313_2007-02-10.jpg
+image: ../media/MG_9313_2007-02-10.jpg
 author: Matthias Kretschmann
 
 date: 2007-02-10 12:34:39+00:00
-wordpress_id: 1967
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md
index 4b1d17df..20d46ac8 100644
--- a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md
+++ b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md
@@ -5,7 +5,7 @@ title: Adjustment Tool Guide for Aperture 1.5.2
 author: Matthias Kretschmann
 
 date: 2007-03-01 20:50:32+00:00
-wordpress_id: 1562
+  
 categories:
 - photography
 tags:
diff --git a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md
index f11a8734..5b5509ba 100644
--- a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md
+++ b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md
@@ -3,13 +3,12 @@ layout: post
 title: Finally... a universal scanner driver for the Canon CanoScan LiDE 500F for Intel Macs
 author: Matthias Kretschmann
 date: 2007-06-11 18:44:28+00:00
-wordpress_id: 1563
+
 category: photography
 tags:
   - tutorial
   - osx
   - macos
-published: true
 
 redirect_from:
   - /2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/
@@ -24,25 +23,22 @@ So there were two choices for using the scanner on an Intel-Mac: installing the
 
 So I called the Canon Support two months ago but they could only say sorry and advertise for their new scanner LiDE 600f which has a new Universal-driver and so on. But it hasn't really any new functions. And spending 100$ or so just for a new driver? So what??! They really wanted me to replace my scanner, which isn't a year old. Damn Canon-Support! So I had to keep on searching on all Canon-websites and finally...
 
-
-
 # The solution...
 
-
 [Canon Asia](http://www.canon-asia.com/) (Canon South & Southeast-Asia to be precise) was the solution! They really offer a universal-driver for the CanoScan LiDE 500f on their site which is from June 2007! You have to follow this link and choose your desired device:
 [http://www.canon-asia.com/index.jsp?fuseaction=support∏_type=scanner&country;=SG](http://www.canon-asia.com/index.jsp?fuseaction=support&prod_type=scanner&country=SG)
 
 After choosing the scanner in the dropdown-menu and clicking on "Drivers & Software" you will come to a popup-window where you can find the driver called "LiDE 500F Scanner Driver Ver. 11.2.4.0X (Mac OS X)" in the middle of the site:
 
-![image](/media/canon1.png)
+![image](../media/canon1.png)
 
 And after installing (and rebooting the system) you can use the scanner with Photoshop CS3 on Intel-Macs. The scanner appears in Photoshop under File > Import > CanoScan LiDE 500f.
 
-![image](/media/canon2.png)
+![image](../media/canon2.png)
 
-![image](/media/canon3.png)And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings"  
+![image](../media/canon3.png)And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings"
 
-![image](/media/canon4.png)Another important setting is enabling 16bit per channel scanning under the tab "Scan".
+![image](../media/canon4.png)Another important setting is enabling 16bit per channel scanning under the tab "Scan".
 
 The only problem that remains is that Photoshop really uses 50% of my CPU-Power (2GHz Intel Core2Duo) just when the scan-window is open. But now after six months of waiting i can finally scan my analog photography in acceptable quality. Thanks to Canon for nothing!
 
diff --git a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md
index 02dd9bdc..13c58296 100644
--- a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md
+++ b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md
@@ -5,7 +5,7 @@ title: How to quickly generate encrypted .htpasswd passwords
 author: Matthias Kretschmann
 
 date: 2008-02-26 23:24:17+00:00
-wordpress_id: 12
+  
 category: design
 tags:
     - tutorial
diff --git a/content/posts/2008-03-30-launch-of-kremaliciouscom.md b/content/posts/2008-03-30-launch-of-kremaliciouscom.md
index 734b7bc2..f76cf4c0 100644
--- a/content/posts/2008-03-30-launch-of-kremaliciouscom.md
+++ b/content/posts/2008-03-30-launch-of-kremaliciouscom.md
@@ -5,7 +5,7 @@ title: Launch of kremalicious.com
 author: Matthias Kretschmann
 
 date: 2008-03-30 19:24:21+00:00
-wordpress_id: 14
+  
 categories:
 - personal
 tags:
diff --git a/content/posts/2008-03-31-love-the-parallax.md b/content/posts/2008-03-31-love-the-parallax.md
index 8a572513..23c6ff7d 100644
--- a/content/posts/2008-03-31-love-the-parallax.md
+++ b/content/posts/2008-03-31-love-the-parallax.md
@@ -5,12 +5,12 @@ title: Love the parallax
 author: Matthias Kretschmann
 
 date: 2008-03-31 20:54:45+00:00
-wordpress_id: 15
+  
 categories:
 - design
 ---
 
-![parallax](/media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?
+![parallax](../media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?
 
 I implemented the header effect of those flying black polaroids on kremalicious.com following the original idea by the folks of [clearleft](http://clearleft.com/) on [their silverback teaser page](http://www.silverbackapp.com/)
 
diff --git a/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md
index c3031f91..82217729 100644
--- a/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md
+++ b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md
@@ -6,7 +6,7 @@ linkurl: http://designpepper.com/blog/6-web-design-tips-from-leonardo-da-vinci
 author: Matthias Kretschmann
 
 date: 2008-04-04 18:43:05+00:00
-wordpress_id: 24
+  
 categories:
 - design
 ---
diff --git a/content/posts/2008-04-04-aperture-file-types.md b/content/posts/2008-04-04-aperture-file-types.md
index a9c0a845..0ffd4e9c 100644
--- a/content/posts/2008-04-04-aperture-file-types.md
+++ b/content/posts/2008-04-04-aperture-file-types.md
@@ -1,11 +1,11 @@
 ---
 layout: post
 title: Aperture File Types
-image: "Teaser-Aperture-File-Types.jpg"
-download: aperturefiletypes_by_kremalicious.zip
+image: ../media/Teaser-Aperture-File-Types.jpg
+download: ../media/aperturefiletypes_by_kremalicious.zip
 author: Matthias Kretschmann
 date: 2008-04-04T01:55:54.000Z
-wordpress_id: 21
+
 category: goodies
 coinhive: true
 tags:
@@ -19,9 +19,9 @@ redirect_from:
 
 These icons are free for your personal use and include icons for all file types Apple’s Aperture 2.0 can handle (.jpeg, .gif, .tiff, .png, .pdf, .psd, .arw, .cr2, .crw, .mos, .nef, .raf, .raw, .srw, .tif, .oly, .fff, .3fr, .dng, .mrw, .pef, .srf, .orf).
 
-  * Mac + Win + Linux + iContainer
-  * Leopard ready (512×512)
-  * custom 32px and 16px icons
+- Mac + Win + Linux + iContainer
+- Leopard ready (512×512)
+- custom 32px and 16px icons
 
 Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun.
 
diff --git a/content/posts/2008-04-04-london-police-afraid-of-photographers.md b/content/posts/2008-04-04-london-police-afraid-of-photographers.md
index 4be9efe4..e1e5f484 100644
--- a/content/posts/2008-04-04-london-police-afraid-of-photographers.md
+++ b/content/posts/2008-04-04-london-police-afraid-of-photographers.md
@@ -5,14 +5,14 @@ title: London police afraid of photographers
 author: Matthias Kretschmann
 
 date: 2008-04-04 19:01:09+00:00
-wordpress_id: 25
+  
 categories:
 - photography
 ---
 
 > Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take.
 
-![London cops](/media/londonpolice.jpg)
+![London cops](../media/londonpolice.jpg)
 
 yeah, i'm guilty. i took several photos of cctv cameras:
 [At Agentur Ahron](http://www.agentur-ahron.de/bild_db/details.php?image_id=552)
diff --git a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md
index 946d58f6..3eab07d9 100644
--- a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md
+++ b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md
@@ -6,7 +6,7 @@ linkurl: http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-g
 author: Matthias Kretschmann
 
 date: 2008-04-04 10:47:23+00:00
-wordpress_id: 22
+  
 category: design
 tags:
     - osx
diff --git a/content/posts/2008-04-05-first-principles-for-choosing-type.md b/content/posts/2008-04-05-first-principles-for-choosing-type.md
index 57672256..dc4b0883 100644
--- a/content/posts/2008-04-05-first-principles-for-choosing-type.md
+++ b/content/posts/2008-04-05-first-principles-for-choosing-type.md
@@ -6,7 +6,7 @@ linkurl: http://ilovetypography.com/2008/04/04/on-choosing-type
 author: Matthias Kretschmann
 
 date: 2008-04-05 14:01:51+00:00
-wordpress_id: 26
+  
 categories:
 - design
 tags:
diff --git a/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md
index 6b211928..144e5746 100644
--- a/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md
+++ b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md
@@ -5,12 +5,12 @@ title: Pulitzer Price Winners 2008 announced, various photographers awarded
 author: Matthias Kretschmann
 
 date: 2008-04-08 15:48:14+00:00
-wordpress_id: 31
+  
 categories:
 - photography
 ---
 
-![Pulitzer Price](/media/pulitzer.png)The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography).
+![Pulitzer Price](../media/pulitzer.png)The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography).
 
 In the Breaking News Photography the price was won by Adrees Latif of Reuters [for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007](http://www.pulitzer.org/year/2008/breaking-news-photography/works/).
 
diff --git a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md
index 494c3c43..6b9bd293 100644
--- a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md
+++ b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md
@@ -5,7 +5,7 @@ title: 'HowTo: Changing the image icons in Mac OS X Leopard'
 author: Matthias Kretschmann
 
 date: 2008-04-09 13:13:42+00:00
-wordpress_id: 32
+  
 category: design
 coinhive: true
 tags:
@@ -15,32 +15,32 @@ tags:
     - icon
 ---
 
-[![Aperture File Types](/media/aperturefiletypes.png)](/media/aperturefiletypes.png)After i released my [Aperture File Types icon set](http://www.kremalicious.com/goodies) many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn't as easy as dropping them in [Candybar](http://www.panic.com/candybar) into a well for image icons cause there isn't any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them.
+[![Aperture File Types](../media/aperturefiletypes.png)](../media/aperturefiletypes.png)After i released my [Aperture File Types icon set](http://www.kremalicious.com/goodies) many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn't as easy as dropping them in [Candybar](http://www.panic.com/candybar) into a well for image icons cause there isn't any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them.
 
 
 ## Changing Preview.app icons
 
-[![Open with Preview](/media/openwithpreview.png)](/media/openwithpreview.png)Image icons in Mac OS X doesn't really belong to the system icons. Instead they come from [Preview.app](http://www.apple.com/macosx/features/300.html%23preview) which is the factory default application for viewing images on Mac OS X.
+[![Open with Preview](../media/openwithpreview.png)](../media/openwithpreview.png)Image icons in Mac OS X doesn't really belong to the system icons. Instead they come from [Preview.app](http://www.apple.com/macosx/features/300.html%23preview) which is the factory default application for viewing images on Mac OS X.
 
 And since Preview.app is used to show the icons we can find all file type icons for images in Preview.app > Contents > Resources. You get there by right clicking on Preview in your Applications folder and choosing Show Package Contents from the context menu. There you'll find icons in icns-format for bmp, dng, eps, fax, fpx, gif, icns, ico,jp2, jpeg, openexr, pdf, pict, png, pntg, ps, psd, qtif, radiance, raw, sgi, tga, tiff, xbm.
 
 You can just rename the desired icons from my icon pack in icns-format and replace them in the contents > resources of Preview.app.
 
-![path Preview](/media/pathpreview.png)
+![path Preview](../media/pathpreview.png)
 
 But, as you can see, Preview doesn’t have an unique icon for all RAW file types. Instead it uses just a generic RAW-icon named RAW.icns.
 
-[![RAW](/media/raw.png)](/media/raw.png)So here’s what you can do: Grab your desired RAW-file icon from my icon package in icns-format. Rename it as RAW.icns. Copy it over to Preview.app > Contents > Resources and overwrite the standard icon. Making a backup copy of Preview.app before doing that is a wise thing here.
+[![RAW](../media/raw.png)](../media/raw.png)So here’s what you can do: Grab your desired RAW-file icon from my icon package in icns-format. Rename it as RAW.icns. Copy it over to Preview.app > Contents > Resources and overwrite the standard icon. Making a backup copy of Preview.app before doing that is a wise thing here.
 
 The problem is that from now on every RAW-file is represented by this icon, which is ok if you just use one RAW-format. But it's a problem if you use more than one RAW format.
 
 ## Changing the file type icons of Photoshop
 
-[![Photoshop CR2](/media/PS_CR2FileIcon.png)](/media/PS_CR2FileIcon.png)A solution to this mess is Photoshop. So this solution just works if you have Photoshop installed. Photoshop does have a unique icon for every RAW-format out there. To confirm that you can choose Adobe Photoshop as Standard Application in the Get Info window and the icon of the file should change instantly.
+[![Photoshop CR2](../media/PS_CR2FileIcon.png)](../media/PS_CR2FileIcon.png)A solution to this mess is Photoshop. So this solution just works if you have Photoshop installed. Photoshop does have a unique icon for every RAW-format out there. To confirm that you can choose Adobe Photoshop as Standard Application in the Get Info window and the icon of the file should change instantly.
 
 So here's the trick: The icons from Photoshop are stored in Adobe Photoshop CS3.app > Contents > Resources. the icon e.g. for .cr2-icons is named PS_CR2FileIcon.icns. Just rename the icons in my pack in the naming scheme used in the Photoshop Resources and replace them.
 
-![Path Photoshop](/media/pathphotoshop.png)
+![Path Photoshop](../media/pathphotoshop.png)
 
 Hope this helps you although it's very tricky. But changing icons for images in Mac OS X is a bit out of my control since i don't develop Mac OS X.
 
diff --git a/content/posts/2008-04-09-measuring-the-color-of-light.md b/content/posts/2008-04-09-measuring-the-color-of-light.md
index dc3343b6..2c1f1922 100644
--- a/content/posts/2008-04-09-measuring-the-color-of-light.md
+++ b/content/posts/2008-04-09-measuring-the-color-of-light.md
@@ -6,7 +6,7 @@ linkurl: http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html
 author: Matthias Kretschmann
 
 date: 2008-04-09 17:44:23+00:00
-wordpress_id: 33
+  
 categories:
 - photography
 ---
diff --git a/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md
index edea869f..38d349ef 100644
--- a/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md
+++ b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md
@@ -6,7 +6,7 @@ linkurl: http://blogs.reuters.com/photographers-blog/2008/04/07/the-story-behind
 author: Matthias Kretschmann
 
 date: 2008-04-10 13:16:47+00:00
-wordpress_id: 34
+  
 categories:
 - photography
 ---
diff --git a/content/posts/2008-04-11-photographers-strike-back-in-uk.md b/content/posts/2008-04-11-photographers-strike-back-in-uk.md
index 907689d1..913909c0 100644
--- a/content/posts/2008-04-11-photographers-strike-back-in-uk.md
+++ b/content/posts/2008-04-11-photographers-strike-back-in-uk.md
@@ -6,12 +6,12 @@ linkurl: http://www.pressgazette.co.uk/node/40875
 author: Matthias Kretschmann
 
 date: 2008-04-11 14:16:51+00:00
-wordpress_id: 36
+  
 categories:
 - photography
 ---
 
-[![London police afraid of photographers](/media/londonpolice.jpg)](/media/londonpolice.jpg)Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists?
+[![London police afraid of photographers](../media/londonpolice.jpg)](../media/londonpolice.jpg)Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists?
 
 Now the [PressGazette reports](http://www.pressgazette.co.uk/node/40875) that
 
diff --git a/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md
index ecc10fb4..0faa0990 100644
--- a/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md
+++ b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md
@@ -5,14 +5,14 @@ title: New automation helper for Apple's Aperture released
 author: Matthias Kretschmann
 
 date: 2008-04-14 13:51:39+00:00
-wordpress_id: 37
+  
 category: photography
 coinhive: true
 tags:
 - aperture
 ---
 
-![Aperture Assistent](/media/apassis.png)Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts.
+![Aperture Assistent](../media/apassis.png)Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts.
 
 Although the interface looks and feels a bit buggy (dude, it's a beta!) it looks very promising.
 
diff --git a/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md
index af27b5b4..a881430a 100644
--- a/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md
+++ b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md
@@ -5,14 +5,14 @@ title: WebKit team introduces CSS-based gradients
 author: Matthias Kretschmann
 
 date: 2008-04-15 17:36:34+00:00
-wordpress_id: 38
+  
 categories:
 - design
 tags:
 - css
 ---
 
-![WebKit](/media/webkit.png)Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team:
+![WebKit](../media/webkit.png)Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team:
 
 > WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients.
 
diff --git a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
index 721d3251..e5ee517e 100644
--- a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
+++ b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
@@ -4,8 +4,8 @@ layout: post
 title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow'
 author: Matthias Kretschmann
 
-date: 2008-04-17 01:32:13+00:00
-wordpress_id: 39
+date: "2008-04-17 01:32:13+00:00"
+
 category: design
 tags:
     - css
@@ -17,7 +17,7 @@ redirect_from:
     - /2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
 ---
 
-![CSS](/media/css.png)The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
+![CSS](../media/css.png)The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
 
 Because it's included in Safari since version 1.1(!) Mac users should be aware of various effects done by this property. In fact, most companys and persons with mac users as their main target audience use this effect on their websites.
 
@@ -25,30 +25,28 @@ This article describes how text-shadow works, what you can do with it and which
 
 Here's an overview of the headlines in this article. As you can see it's rather complex and long. Be sure to get a delicious fresh cup of coffee or tea before reading on:
 
-  1. What text-shadow is good for
-  2. Which browsers support it
-  3. Cross-browser compatibility
-  4. How does it work and how to use it
-  5. Examples with code & demos
-  6. Hack: Safari Text Rendering
-  7. More articles and resources
-
+1.  What text-shadow is good for
+2.  Which browsers support it
+3.  Cross-browser compatibility
+4.  How does it work and how to use it
+5.  Examples with code & demos
+6.  Hack: Safari Text Rendering
+7.  More articles and resources
 
 ## 1. What text-shadow is good for
 
-![kremalicious navbar](/media/navbar-kremalicious.png)
+![kremalicious navbar](../media/navbar-kremalicious.png)
 subtle glow in my navigation
 
 The main goal of this property is to give designers and css coders a tool to make text effects, which could only be done before by rendering text as images with all the side effects. Text rendered as an image isn't searchable and therefore very undelicious for search engines. Another side effect is the fact that images can be way more bigger as one small line of code in terms of file size. As you may know most css-files, which contain the whole layout of a website, are smaller than one image on most websites. So it's really clever to use a css function instead of images for reducing unnecessary traffic.
 
-![text-shadow used on apple.com](/media/textshadow-apple.png)
+![text-shadow used on apple.com](../media/textshadow-apple.png)
 text-shadow on Apple.com
 
 Utilizing text-shadow to simulate engraved or stenciled text is widely used on websites. Apple did it everywhere in Mac OS X not just since Leopard (just look at the titlebars). So if you design a website for Mac users you can increase the sexyness of your website, because this particular usage of text-shadow integrates very well with the overall look of Mac OS X. I will explain how to achieve this engraved-text-on-metal effect later on in this article.
 
-
-
 ## 2. Which browsers support it?
+
 In fact, text-shadow is not a new property since it was first defined with [CSS2 in 1998](http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props) but it was just implemented by the KHTML/WebKit-folks. But it's available in [Safari](http://www.apple.com/safari/) since version 1.1 (2003), in [Konqueror](http://www.konqueror.org/features/browser.php) since version 3.4 (I believe, not sure) and [Opera](http://www.opera.com/) 9.5. Furthermore it's also supported by [Firefox](http://www.mozilla.com/en-US/firefox/firefox.html) 3.1/3.5 and finally [Google Chrome](http://www.google.com/chrome) 2 adds full support for the text-shadow property after they had stripped this from the first version of Chrome.
 
 On the Mac platform WebKit is also used in various other programs with a browser included like [Coda](http://www.panic.com/coda/) from Panic, [CSSedit](http://www.macrabbit.com/cssedit/) from MacRabbit or [NetNewsWire](http://www.newsgator.com/NetNewsWire.aspx) from NewsGator. Also every browser which is powered by the WebKit engine is able to render the text-shadow property, like [Shiira](http://shiira.jp/en.php), [OmniWeb](http://www.omnigroup.com/applications/omniweb/) or [Epiphany](http://www.gnome.org/projects/epiphany/) which are either for Mac or Linux.
@@ -57,12 +55,9 @@ But with Safari 3.1, the beta release of Opera 9.5, Firefox 3.1 and Google Chrom
 
 But wait, regarding Safari on Mac OS X there's one more (bad) thing to remember. The Mac OS X 10.5.2 update [resulted in minor changes of the WebKit text-shadow rendering](http://www.islayer.com/blog/?p=255). It seems that with this update text-shadow is finally rendered correctly as WebKit added one extra pixel to the shadow offset on 10.4.11 and 10.5.1.
 
-
-
 ## 3. Any chance of cross-browser compatibility?
 
-
-So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff](http://msdn2.microsoft.com/en-us/library/ms532985(VS.85).aspx) which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included.
+So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff](<http://msdn2.microsoft.com/en-us/library/ms532985(VS.85).aspx>) which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included.
 
 But with Firefox 3.1 including text-shadow all major browsers except Internet Explorer are now supporting it. So you can start using it all around your next projects just with a lot of other techniques which in the end aren't available in Internet Explorer.
 
@@ -70,24 +65,22 @@ One cross-browser trick would be to use conditional tags and serve Internet Expl
 
 Now that you're aware of it's compatibility with the various browsers we can take a look at the syntax of the text-shadow property.
 
-
-
 ## 4. How does it work and how to use it
 
-
-
 When defined in a css-stylesheet the property syntax should look like this:
 
 ```css
-p { text-shadow: 1px 1px 1px #000; }
+p {
+  text-shadow: 1px 1px 1px #000;
+}
 ```
 
 The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:
 
-1. value = The X-ccordinate
-2. value = The Y-coordinate
-3. value = The blur radius
-4. value = The color of the shadow
+1.  value = The X-ccordinate
+2.  value = The Y-coordinate
+3.  value = The blur radius
+4.  value = The color of the shadow
 
 Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontically (first value) and placing the shadow below the text vertically (second value).
 
@@ -96,7 +89,9 @@ The third value, the blur radius, is an optional value which can be specified bu
 Alternatiely, for WebKit-based browsers, you can use rgba values instead of hex code colors as the fourth value. The last number stands for transparency and can be set between 0.0 and 1.0 so you can make the text-shadow more subtle:
 
 ```css
-p { text-shadow: 1px 1px 1px rgba(255,255,255, .5); }
+p {
+  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
+}
 ```
 
 Of course the effects done by this property often depend on the colors of your text and your background, so let's take a look at what we can do with all those combinations.
@@ -105,12 +100,8 @@ Of course the effects done by this property often depend on the colors of your t
 
 I've made up some examples to show you the possibilities of this css property. Every example code follows a text example which is rendered by your browser. Below that you'll find a screenshot of the described effect rendered in Safari 3.1 on Mac OS X 10.5.2 so the n<del>on-WebKit and non-Opera</del> Internet Explorer users can see the effect.
 
-
-
 ## 5.1 Simple drop shadow
 
-
-
 With the following lines of css code you get black text on white background with a smooth black drop shadow.The shadow is placed 2 pixels right and 2 pixels below the text and has a blur radius of 3:
 
 ```css
@@ -121,7 +112,7 @@ text-shadow: 2px 2px 3px #000;
 
 <p style="color: #000;background: #fff;text-shadow: 2px 2px 3px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm a text with a smooth shadow</p>
 
-![image](/media/text-shadow-1.png)
+![image](../media/text-shadow-1.png)
 
 Or you can make it not so smooth but also good looking by ignoring the blur radius and setting a lighter color for the shadow:
 
@@ -133,7 +124,7 @@ text-shadow: 2px 2px #000;
 
 <p style="color: #000;background: #fff;text-shadow: 2px 2px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm a text with no smooth shadow</p>
 
-![image](/media/text-shadow-2.png)
+![image](../media/text-shadow-2.png)
 
 Using some negative values you can make the shadow look like it's lightsource is placed below the text:
 
@@ -147,7 +138,7 @@ text-shadow: 2px -2px 3px #000;
 background: #fff;
 text-shadow: 2px -2px 3px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm a text with a smooth shadow</p>
 
-![image](/media/text-shadow-3.png)
+![image](../media/text-shadow-3.png)
 
 Of course you can make it more funky and horrible to read:
 
@@ -161,7 +152,7 @@ text-shadow: 2px 2px 2px #ff3300;
 background: #fff;
 text-shadow: 2px 2px 2px #ff3300;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm funky colored text</p>
 
-![image](/media/text-shadow-4.png)
+![image](../media/text-shadow-4.png)
 
 ## 5.2 Apple style (engraved text on metal)
 
@@ -177,7 +168,7 @@ text-shadow: 0px 1px 1px #fff;
 background: #666;
 text-shadow: 0px 1px 1px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:bold;padding:0.3em">I'm engraved text</p>
 
-![image](/media/text-shadow-5.png)
+![image](../media/text-shadow-5.png)
 
 This even works the other way around on a black background with grey text by adjusting only the color values:
 
@@ -191,7 +182,7 @@ text-shadow: 0px 1px 0px #ccc;
 background: #000;
 text-shadow: 0px 1px 0px #ccc;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:bold;padding:0.3em">I'm engraved text on black</p>
 
-![image](/media/text-shadow-6.png)
+![image](../media/text-shadow-6.png)
 
 Or you can make this one which looks like the text stands out from the background:
 
@@ -205,7 +196,7 @@ text-shadow: 0px 1px 1px #000;
 background: #666;
 text-shadow: 0px 1px 1px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm on top of the background</p>
 
-![image](/media/text-shadow-7.png)
+![image](../media/text-shadow-7.png)
 
 ## 5.3 Make your text glow
 
@@ -221,7 +212,7 @@ text-shadow: 1px 1px 6px #fff;
 background: #000;
 text-shadow: 1px 1px 6px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm subtle glowing text</p>
 
-![image](/media/text-shadow-8.png)
+![image](../media/text-shadow-8.png)
 
 You can also make the whole text blurry by using the same color for text and shadow with no offset:
 
@@ -235,7 +226,7 @@ text-shadow: 0px 0px 3px #fff;
 background: #666;
 text-shadow: 0px 0px 3px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm also glowing but more blurry</p>
 
-![image](/media/text-shadow-9.png)
+![image](../media/text-shadow-9.png)
 
 We can make it quite mysterious by using the same color for text and background and make the text just visible through text-shadow. Remember that the same color for text and background can be bad for usability...:
 
@@ -249,7 +240,7 @@ text-shadow: 1px 1px 4px #fff;
 background: #000;
 text-shadow: 1px 1px 4px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm pretty mysterious looking text</p>
 
-![image](/media/text-shadow-10.png)
+![image](../media/text-shadow-10.png)
 
 Or the other way around to make it look light and... milky:
 
@@ -263,7 +254,7 @@ text-shadow: 1px 1px 4px#000;
 background: #fff;
 text-shadow: 1px 1px 4px#000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm pretty milky looking text</p>
 
-![image](/media/text-shadow-11.png)
+![image](../media/text-shadow-11.png)
 
 ## 5.4 Duplicate your text
 
@@ -279,7 +270,7 @@ text-shadow: 0px 20px #000;
 background: #fff;
 text-shadow: 0px 20px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">Which line is text, which is shadow?</p>
 
-![image](/media/text-shadow-13.png)
+![image](../media/text-shadow-13.png)
 
 ## 5.5 Multiple shadows
 
@@ -288,22 +279,23 @@ Sadly Safari 3 isn't able to render more than one shadow on one element. It just
 ```css
 color: #000;
 background: #000;
-text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
+text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px
+    #f80, 2px -18px 18px #f20;
 ```
 
 <p style="color: #000;
 background: #000;
 text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.5em">Isn't this awesome?</p>
 
-![image](/media/text-shadow-12.png)
+![image](../media/text-shadow-12.png)
 
 ## 6. Hack: Avoid jagged light-on-dark text rendering in Safari
 
-[![sub-pixel rendering](/media/text-shadow-15.png)](/media/text-shadow-hack.png)
+[![sub-pixel rendering](../media/text-shadow-15.png)](../media/text-shadow-hack.png)
 
 More than a hack than an effect but it addresses the poor light-on-dark text rendering in Safari. This is caused by the [sub-pixel rendering](http://en.wikipedia.org/wiki/Subpixel_rendering) of OS X's Quartz 2D layer as a part of the Core Graphics framework. Also Safari 3.1 on Windows uses sub pixel rendering instead of plain anti-aliasing.
 
-[![anti-alias rendering through text-shadow](/media/text-shadow-14.png)](/media/text-shadow-hack.png)
+[![anti-alias rendering through text-shadow](../media/text-shadow-14.png)](../media/text-shadow-hack.png)
 
 In most situations this improves the legibility and smoothness of all 2D-text rendered throughout the Mac OS X interface which makes everything look so gorgeous. But it has some [rough problems with light text on dark backgrounds in Safari](http://equinox-of-insanity.com/2007/08/osx-text-rendering/) This problem doesn't exist when using anti-aliasing.
 
@@ -324,29 +316,29 @@ But fear not. Rogie King already came up with a solution for this which you can
 
 ## 7. More articles and resources
 
-  * [Description of the text-shadow property](http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows) in: [CSS3 W3C Candidate Recommendation from 14 May 2003](http://www.w3.org/TR/2003/CR-css3-text-20030514)
-text-shadow in-depth
+- [Description of the text-shadow property](http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows) in: [CSS3 W3C Candidate Recommendation from 14 May 2003](http://www.w3.org/TR/2003/CR-css3-text-20030514)
+  text-shadow in-depth
 
-  * [Cross-browser text-shadow by Kilian Valkhof](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/)
-Nice article about trying to make text-shadow cross-browser compatible
+- [Cross-browser text-shadow by Kilian Valkhof](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/)
+  Nice article about trying to make text-shadow cross-browser compatible
 
-  * [CSS Drop Shadows on Design Meme](http://www.designmeme.com/articles/dropshadows/)
-An easy css-hack for cross-browser compatibilty (but without a blur radius)
+- [CSS Drop Shadows on Design Meme](http://www.designmeme.com/articles/dropshadows/)
+  An easy css-hack for cross-browser compatibilty (but without a blur radius)
 
-  * [text-shadow hack for firefox on klog](http://verens.com/archives/2005/02/28/text-shadow/)
-Another hack just for Gecko-based browsers by utilizing javascript
+- [text-shadow hack for firefox on klog](http://verens.com/archives/2005/02/28/text-shadow/)
+  Another hack just for Gecko-based browsers by utilizing javascript
 
-  * [Firefox plugin "A Text Shadow"](http://piro.sakura.ne.jp/xul/_textshadow.html.en)
-A xpi-plugin providing support for text-shadow in Firefox written by Shimoda Hiroshi
+- [Firefox plugin "A Text Shadow"](http://piro.sakura.ne.jp/xul/_textshadow.html.en)
+  A xpi-plugin providing support for text-shadow in Firefox written by Shimoda Hiroshi
 
-  * [Animating css text-shadow with javascript](http://maettig.com/code/css/text-shadow.html)
-The author animates multiple text-shadows with javascript, really incredible. Also various nice examples on this page.
+- [Animating css text-shadow with javascript](http://maettig.com/code/css/text-shadow.html)
+  The author animates multiple text-shadows with javascript, really incredible. Also various nice examples on this page.
 
-  * [Text-Shadow in Safari 1.1](http://whatdoiknow.org/archives/001305.shtml)
-Propably the oldest text-shadow demo originally made for Safari 1.1
+- [Text-Shadow in Safari 1.1](http://whatdoiknow.org/archives/001305.shtml)
+  Propably the oldest text-shadow demo originally made for Safari 1.1
 
-  * [10.5.2 brings WebKit text-shadow rendering changes](http://www.islayer.com/blog/?p=255)
-Blog entry on islayer.com about different text-shadow rendering across different Mac OS X versions
+- [10.5.2 brings WebKit text-shadow rendering changes](http://www.islayer.com/blog/?p=255)
+  Blog entry on islayer.com about different text-shadow rendering across different Mac OS X versions
 
-  * [CSS3 preview on css3.info](http://www.css3.info/preview/)
-"Everything you need to know about CSS3" - get excited before CSS3 becomes final
+- [CSS3 preview on css3.info](http://www.css3.info/preview/)
+  "Everything you need to know about CSS3" - get excited before CSS3 becomes final
diff --git a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md
index 5f2083d0..7fafaf21 100644
--- a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md
+++ b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md
@@ -5,13 +5,13 @@ title: Apple releases plugin-SDK for Aperture 2.1
 author: Matthias Kretschmann
 
 date: 2008-04-22 05:58:41+00:00
-wordpress_id: 42
+  
 categories:
 - photography
 tags:
 - aperture
 ---
 
-![Aperture](/media/aperture97.png)Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding. If you want to know what exactly you can do with it as a programmer you should [read those lines from Apple](http://developer.apple.com/appleapplications/aperturesdk.html).
+![Aperture](../media/aperture97.png)Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding. If you want to know what exactly you can do with it as a programmer you should [read those lines from Apple](http://developer.apple.com/appleapplications/aperturesdk.html).
 
 So it should be just a matter of time before we see another bunch of plugins popping out.
diff --git a/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md
index bc8eeadc..fba976fb 100644
--- a/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md
+++ b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md
@@ -5,7 +5,7 @@ title: 'More awesomeness from the WebKit team: CSS Masks'
 author: Matthias Kretschmann
 
 date: 2008-04-28 12:53:18+00:00
-wordpress_id: 44
+  
 categories:
     - design
 
@@ -13,7 +13,7 @@ tags:
     - css
 ---
 
-![WebKit](/media/webkit.png)They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks.
+![WebKit](../media/webkit.png)They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks.
 
 From the Surfin' Safari Blog:
 
diff --git a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
index 5208d24d..31f6207f 100644
--- a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
+++ b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
@@ -6,7 +6,7 @@ author: Matthias Kretschmann
 
 date: 2008-05-04 16:04:48+00:00
 
-wordpress_id: 45
+  
 category: photography
 coinhive: true
 tags:
@@ -15,7 +15,7 @@ tags:
     - macos
 ---
 
-![Canon CanoScan LiDE 500F](/media/canoscanlide500f.jpg)A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available. But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.
+![Canon CanoScan LiDE 500F](../media/canoscanlide500f.jpg)A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available. But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.
 
 # Finding and downloading the new driver 11.2.5.0X
 
@@ -28,7 +28,7 @@ The changelog says:
 
 So this sounds just right. You can download the new universal scanner driver from [Canon USA](http://www.usa.canon.com/consumer/controller?act=ModelInfoAct&tabact=SupportDetailTabAct&fcategoryid=235&modelid=11011#DownloadDetailAct) or [Canon Asia](http://support-asia.canon-asia.com/contents/ASIA/EN/0900321901.html). Following these links takes you right to the driver download page for this scanner.
 
-[![Driver package contents](/media/canondrivercontents.png)](/media/canondrivercontents.png)You will get a file named lide500fosx11250en.dmg in your downloads folder. Just mount it and double click the package installer inside of the image. If you have a previous version of the driver installed you should remove all parts of it from the system and make a restart to avoid any problems. You can follow my screenshot on the right which shows the contents of the installer package to find all components on your system.
+[![Driver package contents](../media/canondrivercontents.png)](../media/canondrivercontents.png)You will get a file named lide500fosx11250en.dmg in your downloads folder. Just mount it and double click the package installer inside of the image. If you have a previous version of the driver installed you should remove all parts of it from the system and make a restart to avoid any problems. You can follow my screenshot on the right which shows the contents of the installer package to find all components on your system.
 
 After the installation is finished you have to restart your Mac (very Mac-unlike) because the package installed a new Kernel extention.
 
@@ -40,22 +40,22 @@ After a restart you should be able to use the scanner as a TWAIN device all over
 ## Preview / Image Capture
 
 
-[![Scan window Preview](/media/scanwindow_preview.png)](/media/scanwindow_preview.png)Leopard included a new version of Preview, the pdf and image-viewing application by Apple and also a new version of Image Capture. To use it with your scanner just plug in the scanner, open Preview and choose File > Import Image or just open the Image Capture application. A new scan window should open doing an automatic overview scan. In the scan window you have some minor options like resolution, scaling etc. You can even make simple but powerful image corrections down at the bottom (set it to manual).
+[![Scan window Preview](../media/scanwindow_preview.png)](../media/scanwindow_preview.png)Leopard included a new version of Preview, the pdf and image-viewing application by Apple and also a new version of Image Capture. To use it with your scanner just plug in the scanner, open Preview and choose File > Import Image or just open the Image Capture application. A new scan window should open doing an automatic overview scan. In the scan window you have some minor options like resolution, scaling etc. You can even make simple but powerful image corrections down at the bottom (set it to manual).
 
 But the best thing with the new Image Capture is the feature of setting the bit depth of the scanner to 16 bits. This was just possible before through the Canon software ScanGear in Photoshop.
 
 ## Scanning right into Apple Aperture?
 
-[![Aperture Scanning](/media/aperturescan.png)](/media/aperturescan.png) Wouldn't that be great? Although the scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. Maybe someone will code a generic scanning plugin for Aperture like VueScan for Aperture or something like that. But I guess this is something just Canon is able to do that and they won't.
+[![Aperture Scanning](../media/aperturescan.png)](../media/aperturescan.png) Wouldn't that be great? Although the scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. Maybe someone will code a generic scanning plugin for Aperture like VueScan for Aperture or something like that. But I guess this is something just Canon is able to do that and they won't.
 
 But using Preview/Image Capture and Automator you can bypass this limitation. If you want to know how you can do that have a look at my article [Scan images directly into Apple Aperture](http://www.kremalicious.com/2008/05/scan-images-directly-into-apple-aperture/).
 
 
 ## Adobe Photoshop CS3
 
-[![ScanGear Scan Window](/media/scangearwindow.png)](/media/scangearwindow.png)Just like with Creative Suite 2 you can use Photoshop to import images with your Scanner by using the Canon ScanGear software which indeed is just the scan window in Photoshop. Just chose File > Import > CanoScan LiDE 500F in Photoshop. If you have installed the driver for the first time the scan window in Photoshop defaults to Simple Mode. But if you want it simple you better chose a Preview/Image Capture workflow. So in Photoshop you should head over to Advanced Mode and check the preferences button down at the bottom first.
+[![ScanGear Scan Window](../media/scangearwindow.png)](../media/scangearwindow.png)Just like with Creative Suite 2 you can use Photoshop to import images with your Scanner by using the Canon ScanGear software which indeed is just the scan window in Photoshop. Just chose File > Import > CanoScan LiDE 500F in Photoshop. If you have installed the driver for the first time the scan window in Photoshop defaults to Simple Mode. But if you want it simple you better chose a Preview/Image Capture workflow. So in Photoshop you should head over to Advanced Mode and check the preferences button down at the bottom first.
 
-[![ScanGear Color Settings](/media/scangear_color.png)](/media/scangear_color.png)Under the Color Settings tab you should set your preferred color management options.
+[![ScanGear Color Settings](../media/scangear_color.png)](../media/scangear_color.png)Under the Color Settings tab you should set your preferred color management options.
 
 Under the Scan tab you should enable 48/16 bit Output to enable scanning your images with a depth of 16 bit just like the RAW images from your dslr or digital camera. Click OK to save your preferences.
 
@@ -63,6 +63,6 @@ Another task you should do before scanning the first time with this driver is ca
 
 Now you can set your scanning preferences and start scanning into Photoshop. Don't forget to chose Color(48Bit) in the Color Mode dropdown menu for 16 bit scanning.
 
-![Color Mode](/media/scangear48bit.png)
+![Color Mode](../media/scangear48bit.png)
 
 The advantage of this last workflow with Photoshop and ScanGear is more control over the scanner and therefore more control of the way your images will look right after the scan. If you want simplicity do it the OSX way by using Preview/Image Capture and simply automate it with Automator to serve your scanned images to your preferred application.
diff --git a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md
index 0d9fbe39..d7f8732a 100644
--- a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md
+++ b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md
@@ -5,7 +5,7 @@ title: Scan images directly into Apple Aperture
 author: Matthias Kretschmann
 
 date: 2008-05-05 04:15:11+00:00
-wordpress_id: 46
+  
 category: photography
 coinhive: true
 tags:
@@ -15,24 +15,24 @@ tags:
     - macos
 ---
 
-![Aperture Scanning](/media/aperturescan.png)Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps.
+![Aperture Scanning](../media/aperturescan.png)Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps.
 
 In the Image Capture scan window you can define an automatic task which will follow the scan process. It defaults to Preview meaning that the scanned image will open as a new Preview document after the scan. But we can make the images import to Aperture after the scan just with tools which are build into Mac OS X and come with every Mac (besides Aperture).
 
 # 1. Make an Automator action
 
-![Automator](/media/automator.png)Open up Automator and click on the photos library item. Find the Aperture action "Import Photos" and drag and drop it on the workflow field. Then you can chose your desired project or a new project for the scanned images to appear. I have a project for all new images called @Review so I chose that one as my target project. You can set a referenced import or the deletion of your source images as well. If you want to chose the desired project or any of the other preferences every time you're scanning you have to activate "Show this action when the workflow runs" in the Options of this action.
+![Automator](../media/automator.png)Open up Automator and click on the photos library item. Find the Aperture action "Import Photos" and drag and drop it on the workflow field. Then you can chose your desired project or a new project for the scanned images to appear. I have a project for all new images called @Review so I chose that one as my target project. You can set a referenced import or the deletion of your source images as well. If you want to chose the desired project or any of the other preferences every time you're scanning you have to activate "Show this action when the workflow runs" in the Options of this action.
 
 To make it a bit cooler we can assign one or more keywords to our scanned images automatically. Just drag and drop the "Assign keywords to images" action and add a keyword like "Scan" or something like that. Finally we can set some usual IPTC-tags with the "Set IPTC Tags" action. In the end you should have something like this (click to zoom):
 
-[![Aperture Import Workflow](/media/apertureimport_automator.png)](/media/apertureimport_automator.png)
+[![Aperture Import Workflow](../media/apertureimport_automator.png)](../media/apertureimport_automator.png)
 
 # 2. Save it as a plug-in for Image Capture
 
-[![Aperture Import Workflow2](/media/apertureimportplugin.png)](/media/apertureimportplugin.png)Now we're going to save the whole workflow we clicked together. But instead of saving it as a general workflow chose File > Save as Plug-in. Type in a name like "Import to Aperture" and chose Image Capture from the dropdown menu and click save. Now your workflow has become a freshly new plug-in of the Image Capture application. If you ever want to delete, edit or just backup your Image Capture Plugins you can find them in your user folder library under /Workflows/Applications/Image Capture.
+[![Aperture Import Workflow2](../media/apertureimportplugin.png)](../media/apertureimportplugin.png)Now we're going to save the whole workflow we clicked together. But instead of saving it as a general workflow chose File > Save as Plug-in. Type in a name like "Import to Aperture" and chose Image Capture from the dropdown menu and click save. Now your workflow has become a freshly new plug-in of the Image Capture application. If you ever want to delete, edit or just backup your Image Capture Plugins you can find them in your user folder library under /Workflows/Applications/Image Capture.
 
 # 3. Scanning and have fun
 
-[![Aperture Import Workflow3](/media/apertureimport_automatic.png)](/media/apertureimport_automatic.png)Plug in your scanner and open up Image Capture. A new scan window should open with your connected scanner as source. Now we have to define our freshly created plug-in as a task which will run after the image was scanned. Just chose your freshly created workflow from the Automatic Task dropdown menu and there you have it. So after you hit the scan button our freshly created workflow will run after the scan.
+[![Aperture Import Workflow3](../media/apertureimport_automatic.png)](../media/apertureimport_automatic.png)Plug in your scanner and open up Image Capture. A new scan window should open with your connected scanner as source. Now we have to define our freshly created plug-in as a task which will run after the image was scanned. Just chose your freshly created workflow from the Automatic Task dropdown menu and there you have it. So after you hit the scan button our freshly created workflow will run after the scan.
 
 Just be creative with Automator. You can set up a lot of workflows for every thinkable scanning task and you can even backup your scanned images before or after importing them to Aperture by copying them into a new burn folder or make an archive from them which also could be automatically saved to a web server and so on...
diff --git a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md
index e0019992..e6504bbe 100644
--- a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md
+++ b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md
@@ -3,10 +3,10 @@ layout: post
 
 title: 'HowTo: Use high-quality watermarks in your images with Aperture 2.1'
 author: Matthias Kretschmann
-image: watermark_aperture.jpg
+image: ../media/watermark_aperture.jpg
 
 date: 2008-05-07 03:27:25+00:00
-wordpress_id: 48
+  
 categories:
 - photography
 tags:
@@ -23,42 +23,40 @@ Since version 1.0 Aperture is able to render images on export with a graphic ove
 
 The steps for this magic involves 4 simple steps:
 
-  1. Create a watermark image in Photoshop
-  2. Render different sizes of the watermark image
-  3. Define the watermark image inside an export preset in Aperture
-  4. Make even more...
-
+1.  Create a watermark image in Photoshop
+2.  Render different sizes of the watermark image
+3.  Define the watermark image inside an export preset in Aperture
+4.  Make even more...
 
 ## 1. Create a watermark image in Photoshop
 
-
 Open up Photoshop and load a photo taken with your camera in full size (pixel size of course, not file size). If you have photos with different pixel sizes you should use a photo with the biggest pixel size you're going to export from your Aperture library.
 
 To illustrate the process I will use a picture taken by me. Create a new layer on top of the background layer and call it "watermark" or anything you like.
 
-![Aperture Watermark example 1](/media/watermark_1.png)
+![Aperture Watermark example 1](../media/watermark_1.png)
 
 If you want it simple you can start with the Text tool right now but I prefer to add a background so our text is always readable no matter if the photo is dark or light. With the select tool draw a rectangle on the bottom of the image. Then select the Paintbucket tool, chose a foreground color of white and click on the selection in the image so the rectangle selection is filled with white.
 
-![Aperture Watermark example 2](/media/watermark_2.png)
+![Aperture Watermark example 2](../media/watermark_2.png)
 
 Add some inner shadow by double clicking on the watermark layer and adjusting the values for inner shadow (just have a german speaking Photoshop version while writing this article but i guess you can identify the values visually):
 
-![Aperture Watermark example 3](/media/watermark_3.png)
+![Aperture Watermark example 3](../media/watermark_3.png)
 
 Adjust the Fill of the layer to 40%. This will just make the fill color transparent while the opacity of the layer styles are preserved. You should end up with something like this:
 
-![Aperture Watermark example 4](/media/watermark_4.png)
+![Aperture Watermark example 4](../media/watermark_4.png)
 
 Next select the Text tool, chose a black color in the tool preferences and click on the image. A new layer will be automatically created and you can type in the text you want to use in your watermark. For this tutorial I just used the copyright sign (opt + g) with a year and the word "Watermark". I used Helvetica Neue Ultra Light as font face.
 
-Place the text at the bottom right and be sure to add some space to the right and to the bottom. Next set the layer mode of the text layer to "Overlay". Finally I've added a logo and set it's opacity to 80%. So  now you should end up with something like this:
+Place the text at the bottom right and be sure to add some space to the right and to the bottom. Next set the layer mode of the text layer to "Overlay". Finally I've added a logo and set it's opacity to 80%. So now you should end up with something like this:
 
-![Aperture Watermark example 5](/media/watermark_5.png)
+![Aperture Watermark example 5](../media/watermark_5.png)
 
 Now delete the Background layer. You should see the transparent grid. Next chose Image > Trim from the menu bar, select transparent pixels and click ok. The result should look like this:
 
-![Aperture Watermark example 6](/media/watermark_6.png)
+![Aperture Watermark example 6](../media/watermark_6.png)
 
 Although Aperture is able to render all layers even with their layer styles correctly it has some problems with text layers and their styles. So to be on the save side you should flatten the layers by selecting them all (with command + click on the name of the layers) and pressing command + e which will merge all layers into one. After this step you won't be able to edit your layers so maybe you want to save your document BEFORE this step as an editable psd template file. Be sure that the background of your canvas remains transparent.
 
@@ -74,37 +72,27 @@ If you want to have full control and the highest quality you should repeat the a
 
 Now you can close Photoshop or let it open if you have enough RAM.
 
-
-
 ## 3. Define the watermark image inside an export preset
 
-
-
 Now we're going to make the watermark image part of an export preset inside Aperture. Open up Aperture and chose Aperture > Presets > Image Export from the menubar. In the Export Presets dialogue add a new preset by clicking on the little plus sign at the bottom left of the dialogue and give it a name:
 
-![Aperture Watermark example 7](/media/watermark_7.png)
-
-
+![Aperture Watermark example 7](../media/watermark_7.png)
 
 Now adjust your desired values before the "Show Watermark" part at the right. After you've finished click on the checkbox beside "Show Watermark" to activate watermarks for this export preset. For our example we will set the position of the image to Lower Right. Either drag your freshly created watermark.psd onto the drop field or chose it via Aperture's file inspector by clicking on the Choose Image button. The watermark image is automatically copied over to the Library folder of the user under /Application Support/Aperture/WatermarkImages. Just keep that in mind when you want to update your watermark images.
 
-
-
 As said before you can adjust the opacity of your watermark image but since we have included some different transparencies in our file we have to set it to an opacity of 1,0.
 
 Finally you can activate the "Scale watermark" checkbox if you want to use your big sized watermark image once and let Aperture scale it down for you. If you have created different sized watermark images you want to leave this deactivated and create a unique export preset for every size you want to export to. In this example we end up with those values:
 
-![Aperture Watermark example 8](/media/watermark_8.png)
-
-
+![Aperture Watermark example 8](../media/watermark_8.png)
 
 If you're done just click OK and select an image you want to export. Select File > Export > Versions from the menubar or press shift + command + e. In the Aperture file dialogue chose your destination and select your freshly created preset from the Export Preset dropdown menu and click OK.
 
-![Aperture Watermark example 9](/media/watermark_9.png)
+![Aperture Watermark example 9](../media/watermark_9.png)
 
 Your image is rendered in the background and you should end up with something like this. Click on it to zoom to the full sized version or open the link to the full image in a new browser window. (the full view image is scaled down with a 1024x1024px preset):
 
-![Aperture Watermark example final](/media/watermarkexample_final.jpg)
+![Aperture Watermark example final](../media/watermarkexample_final.jpg)
 
 You can also have a look at the psd file by downloading it here:
 
@@ -116,11 +104,11 @@ Here are some quick examples by me:
 
 You can be a bit more subtle:
 
-![Aperture Watermark example v2](/media/watermarkexample_v2.jpg)
+![Aperture Watermark example v2](../media/watermarkexample_v2.jpg)
 
 Or use a subtle colorful spectrum:
 
-![Aperture Watermark example v3](/media/watermarkexample_v3.jpg)
+![Aperture Watermark example v3](../media/watermarkexample_v3.jpg)
 
 ## 4. Make even more...
 
@@ -130,7 +118,7 @@ Just create a watermark image which has exactly the same size as your exported i
 
 And maybe you end up with something like this grunge old look just done with the watermark feature of Aperture:
 
-![Aperture Watermark example v4](/media/watermarkexample_v4.jpg)
+![Aperture Watermark example v4](../media/watermarkexample_v4.jpg)
 
 And that's it. Hope this article helped you mastering the watermark feature of Aperture.
 
diff --git a/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md
index 1adf131b..47b0769e 100644
--- a/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md
+++ b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md
@@ -5,14 +5,14 @@ title: Nik ships Viveza as an Aperture editing plugin
 author: Matthias Kretschmann
 
 date: 2008-05-07 19:21:34+00:00
-wordpress_id: 49
+  
 categories:
 - photography
 tags:
 - aperture
 ---
 
-![Viveza](/media/viveza.png)Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza).
+![Viveza](../media/viveza.png)Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza).
 
 With Viveza photographers are able to select areas from their images and adjust them separately from the rest of the picture by defining so called Color Control Points.
 
diff --git a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
index 81f80152..1287be75 100644
--- a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
+++ b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
@@ -3,10 +3,10 @@ layout: post
 
 title: The 15 best new features of Aperture 2
 author: Matthias Kretschmann
-image: aperture15_7.png
+image: ../media/aperture15_7.png
 
 date: 2008-05-07 19:22:49+00:00
-wordpress_id: 50
+  
 categories:
 - photography
 tags:
@@ -19,7 +19,7 @@ There are already some lists like this available on the web and they are always
 
 # 15. The "New" toolbar icon
 
-[![New toolbar icon](/media/aperture15_1.png)](/media/aperture15_1.png)
+[![New toolbar icon](../media/aperture15_1.png)](../media/aperture15_1.png)
 
 A handy dropdown icon with the most common create tasks you can do in Aperture 2. This causes Aperture 2 to have a delightful clean toolbar by default.
 
@@ -27,31 +27,31 @@ A handy dropdown icon with the most common create tasks you can do in Aperture 2
 
 # 14. Skimming through your projects
 
-[![Skimming](/media/aperture15_2.png)](/media/aperture15_2.png)
+[![Skimming](../media/aperture15_2.png)](../media/aperture15_2.png)
 
 The Library item has a new child item: All Photos. Clicking on it displays all your projects like the Event view known from iPhoto 08. By hovering the mouse over the key photo (which you can define for yourself too) you "skim" through the project and quickly see all images contained in this project. Perfect for visually finding that non-keyworded photo you remember you've taken it but don't know where it is.
 
 # 13. Search for adjustments
 
-[![Search for adjustments](/media/aperture15_3.png)](/media/aperture15_3.png)
+[![Search for adjustments](../media/aperture15_3.png)](../media/aperture15_3.png)
 
 With Aperture 2 you can define a search query based on the adjustments you've made to an image in your library. So you can quickly identify all your images which have the monochrome mixer applied to them or maybe all your images which have _no_ edge sharpening applied and so on.
 
 # 12. The Retouch tool
 
-[![Retouch tool](/media/aperture15_4.png)](/media/aperture15_4.png)
+[![Retouch tool](../media/aperture15_4.png)](../media/aperture15_4.png)
 
 No more fiddling around with the poor results of the spot & patch tool when you just want to remove some sensor dust from your image. The repair mode of this tool is just perfect for that kind of task. The clone mode pretty much functions the same way as the clone tool in Photoshop. You define a clone source in your image by pressing option + click in your image and then pasting that source onto the imperfection by clicking on it.
 
 # 11. Double click behavior
 
-[![Double click behavior](/media/aperture15_5.png)](/media/aperture15_5.png)
+[![Double click behavior](../media/aperture15_5.png)](../media/aperture15_5.png)
 
 The behavior of double clicking on images can now be set in Aperture's preferences. Either you can make Aperture show or hide the Viewer or set it to enter full screen mode with the double clicked image in focus.
 
 # 10. Book Layout
 
-[![Book layout](/media/aperture15_6.png)](/media/aperture15_6.png)
+[![Book layout](../media/aperture15_6.png)](../media/aperture15_6.png)
 
 The photobook layout capabilities of Aperture became much powerful with version 2. Now you can create your own book templates where you have much freedom for lay-outing it. In fact you have a powerful Desktop Publishing Program built right into Aperture. Be sure to listen to the [Inside Aperture Podcast about the book layout tool in Aperture](http://digitalmedia.oreilly.com/2008/05/06/aperture-layout-application-schorr.html).
 
@@ -59,7 +59,7 @@ The photobook layout capabilities of Aperture became much powerful with version
 
 # 9. The V- and W-cycle
 
-[![HUD](/media/aperture15_8.png)](/media/aperture15_8.png)
+[![HUD](../media/aperture15_8.png)](../media/aperture15_8.png)
 
 By pressing V on your keyboard you can quickly cycle through different viewer modes. In previous versions of Aperture the V-key just showed/hid the big viewer.
 
@@ -69,49 +69,49 @@ By pressing W on your keyboard you can cycle through the tabbed Inspector on the
 
 # 8. The tabbed Inspector/HUD
 
-[![HUD](/media/aperture15_7.png)](/media/aperture15_7.png)
+[![HUD](../media/aperture15_7.png)](../media/aperture15_7.png)
 
 An addition to the W-cycle: The overall inspector get polished by Apple which results in a completely new clean interface. But the best thing is you can access all those inspector tabs in full screen mode too by hitting the H-key. You can cycle through the tabs of the HUD in full screen mode just like you can do in the Aperture window by pressing the W-key. In fact the tabbed HUD will make you never want to leave full screen mode.
 
 # 7. .Mac Web Gallery
 
-![Quick Preview](/media/aperture15_8.jpg)
+![Quick Preview](../media/aperture15_8.jpg)
 
 Create easy updatable password protected galleries for different clients in no time. Your clients are even able to download the master files from your good looking .Mac web gallery.
 
 # 6. Definition adjustment slider
 
-[![Recovery and Black Point sliders](/media/aperture15_11.png)](/media/aperture15_11.png)
+[![Recovery and Black Point sliders](../media/aperture15_11.png)](../media/aperture15_11.png)
 
 It's a bit hard to describe. In short the slider adds more detail to the midtones of your image. But you just have to see it in action. You can get crisp and sharp images without the need of any sharpening tool.
 
 # 5. Recovery + Black Point sliders
 
-![Recovery and Black Point sliders](/media/aperture15_10.png)
+![Recovery and Black Point sliders](../media/aperture15_10.png)
 
 Although the Highlights & Shadow tool already produced reasonable results, the new Recovery and Black Point sliders are much more powerful and can reveal a lot of detail either in your blown out highlights or your underexposed shadows. Tip: While moving either the Recovery or the Black Point slider hold down the command key at the same time to see just an overlay of your hot & cold areas in your image.
 
 # 4. Quick Preview
 
-![Quick Preview](/media/aperture15_12.png)
+![Quick Preview](../media/aperture15_12.png)
 
 Perfect for first selections of your images during import. Aperture uses either a preview embedded by your camera in the RAW-file, the corresponding jpg-file if you shoot RAW+JPG or it uses the previews rendered by Aperture itself.
 
 # 3. Color Picker
 
-[![Color Picker](/media/aperture15_13.png)](/media/aperture15_13.png)
+[![Color Picker](../media/aperture15_13.png)](../media/aperture15_13.png)
 
 Inside the Color adjustment brick you can now directly pick the color you want to alter from your image by selecting it with the little eye dropper. So you aren't bound to the standard colors when adjusting the colors of your image separately.
 
 # 2. Spe(eeee)ed
 
-[![Speed](/media/aperture15_14.jpg)](/media/aperture15_14.jpg)
+[![Speed](../media/aperture15_14.jpg)](../media/aperture15_14.jpg)
 
 Now you can "scroll like butter" (I bet you know who said that) through your whole library fro real. I don't know what exactly causes Aperture 2 to be so much more responsive and speedier than previous versions but the development team have done magic with this. In combination with the quick preview mode quickly browsing through thousands of photos even in full screen mode is now a snap.
 
 # 1. RAW 2.0
 
-[![RAW power](/media/raw20.png)](/media/raw20.png)
+[![RAW power](../media/raw20.png)](../media/raw20.png)
 
 The best new feature to me just because the whole purpose of Aperture should be producing the best looking images from your RAW files. While the first RAW 1.0 often rendered terrible pictures, the RAW 1.1 algorithm did it a lot better. But now we have a massive improvement to the RAW 1.1 algorithm with crisp highlights and more details in dark areas with less chromatic aberration by default. To me Aperture is now close and sometimes better than the quality of PhaseOne or CameraRAW. Of course Aperture 2 leaves all your old adjustments made in previous versions of Aperture alone and you can optionally migrate them all at once or separately.
 
diff --git a/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md
index eb5eb299..9237d8fa 100644
--- a/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md
+++ b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md
@@ -5,14 +5,14 @@ title: The Iconfactory presents beautiful Indiana Jones desktop icons
 author: Matthias Kretschmann
 
 date: 2008-05-08 15:47:48+00:00
-wordpress_id: 51
+  
 category: design
 tags:
 - icon
 ---
 
-[![Indiana Jones Iconset by Iconfactory](/media/indianajones_first.png)](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie.
+[![Indiana Jones Iconset by Iconfactory](../media/indianajones_first.png)](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie.
 
 The icons are available from the [special Iconfactory site](http://iconfactory.com/indianajones/) as an icontainer or mac and windows icon files. If you download the iContainer for use in [Candybar](http://www.panic.com/candybar/) you also get a new Mac OS X dock created by [David Lanham](http://dlanham.com/). All icons are free for your personal use only and there are already some nice placeholders for more icon sets inspired by the other movies. All of them will be released during May.
 
-[![Indiana Jones Dock by David Lanham](/media/indianajones_dock.png)](/media/indianajones_dock.png)
+[![Indiana Jones Dock by David Lanham](../media/indianajones_dock.png)](../media/indianajones_dock.png)
diff --git a/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md
index 6ee73c1b..f75ba3cb 100644
--- a/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md
+++ b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md
@@ -5,7 +5,7 @@ title: Canon updates photographic software to work with Leopard
 author: Matthias Kretschmann
 
 date: 2008-05-14 10:01:15+00:00
-wordpress_id: 53
+  
 category: photography
 ---
 
diff --git a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md
index 909fa621..e75d24be 100644
--- a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md
+++ b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md
@@ -5,7 +5,7 @@ title: 'Update: First overview: Aperture 2.1 adjustment plugins have arrived'
 author: Matthias Kretschmann
 
 date: 2008-05-18 05:00:01+00:00
-wordpress_id: 54
+  
 categories:
 - photography
 tags:
@@ -14,7 +14,7 @@ tags:
 coinhive: true
 ---
 
-![Aperture](/media/aperture97.png)With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow.
+![Aperture](../media/aperture97.png)With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow.
 
 # Dfx digital filters plugin from Tiffen
 
@@ -22,7 +22,7 @@ coinhive: true
 
 The first one is the [Dfx digital filters plug-in from Tiffen](http://www.tiffen.com/products.html?tablename=dfx) which was already available as an image editing plugin for Photoshop on Windows and Mac. It's an award winning set of [94 individual filters](http://www.tiffen.com/dfx_filter_effects_ig.html) for adjusting and altering your images in Aperture 2.1 and above.
 
-[![Tiffen Dfx digital filters plugin Tiffen](/media/tiffen_aperture.jpg)](/media/tiffen_aperture.jpg)
+[![Tiffen Dfx digital filters plugin Tiffen](../media/tiffen_aperture.jpg)](../media/tiffen_aperture.jpg)
 
 Tiffen made the plugin available in May 2008. You can download a [free 15-day trial](http://www.tiffen.com/dfx_downloads.html) too or you can purchase it from the Tiffen-website for US$299. Also don't forget to have a look [at the user guide](http://www.tiffen.com/userimages/Dfx-v1-Photo-UserGuide.pdf) for this plugin.
 
@@ -34,15 +34,15 @@ Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/aper
 
 [Power Stroke 1.0](http://www.digitalfilmtools.com/powerstroke/index.htm) is an image editing plugin for making targeted adjustments by intuitive handling with strokes. You can make multiple corrections and effects with one stroke such as color correction, recoloring or desaturation, colorization of black and white images, blur, fill light for dimly lit image areas and Diffusion/Glow.
 
-[![Power Stroke 1.0](/media/dft-powerstroke_uis.jpg)](/media/dft-powerstroke_uis.jpg)
+[![Power Stroke 1.0](../media/dft-powerstroke_uis.jpg)](../media/dft-powerstroke_uis.jpg)
 
 [Light! 3.5](http://www.digitalfilmtools.com/light/) is a plugin for adding Light effects with defined patterns which are created by Gamproducts.
 
-[![Light! 3.5](/media/dft-light_ui.jpg)](/media/dft-light_ui.jpg)
+[![Light! 3.5](../media/dft-light_ui.jpg)](../media/dft-light_ui.jpg)
 
 [Ozone 2.5](http://www.digitalfilmtools.com/ozone/) is an adjustment plugin for selective adjustments of colors. It' based on the Digital Zone System, which divides a picture into 11 discrete zones where you can adjust each zone separately.
 
-[![Ozone 2.5](/media/dft-ozone_ui.jpg)](/media/dft-ozone_ui.jpg)
+[![Ozone 2.5](../media/dft-ozone_ui.jpg)](../media/dft-ozone_ui.jpg)
 
 
 All plugins are available now and can be [purchased fom the Digital Film Tools website](http://www.digitalfilmtools.com/buy/home.php?cat=38) as a Super Bundle with all three plugins included for US$ 175 or separately for US$ 50 (Light and Ozone) or US$ 120 (Power Stroke). There are also trial versions for the [Power Stroke](http://www.digitalfilmtools.com/powerstroke/media.htm), [Light](http://www.digitalfilmtools.com/light/media.htm) and [Ozone](http://www.digitalfilmtools.com/ozone/media.htm) plugin available from DFT's website which will watermark the edited images in demo mode.
@@ -53,13 +53,13 @@ Nik Software [announced the availabilty of Viveza](http://www.niksoftware.com/vi
 
 On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for Aperture 2.1](http://www.kremalicious.com/2008/05/nik-ships-viveza-as-the-first-available-aperture-editing-plugin/). You can grab a [15-day trial version](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=257) of the plugin too.
 
-[![Nik Viveza](/media/viveza_aperture_ui.jpg)](/media/viveza_aperture_ui.jpg)
+[![Nik Viveza](../media/viveza_aperture_ui.jpg)](../media/viveza_aperture_ui.jpg)
 
 # dvGarage dpMatte & HDR Toner
 
 [DpMatte](http://www.dvgarage.com/prod/prod.php?prod=dpmatte) is a plugin for greenscreen keying for photographers. You can easily composite two images together, like adding another background for a portrait. It is available since April 22 and costs you US$ 69.
 
-[![dpMatte](/media/dpmatte_index1.jpg)](/media/dpmatte_index1.jpg)
+[![dpMatte](../media/dpmatte_index1.jpg)](../media/dpmatte_index1.jpg)
 
 The folks at dvGarage are also working on an Aperture plugin called HDRToner for high dynamic range images which will cost US$ 69 too and is expected to be available on June 15 2008.
 
@@ -67,15 +67,15 @@ The folks at dvGarage are also working on an Aperture plugin called HDRToner for
 
 Image Trends announced three plugins coming for Aperture 2.1. First one is the the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) which can remap images taken with fisheye lenses. If you're using a Fisheye lens you will love this plugin. According to Image Trends' Michael K. Conley the plugin should be available on May 19, 2008 and will cost US$ 29.95. But if you already purchased the Photoshop version Image Trends will give you 50% discount.
 
-[![Fisheye-Hemi](/media/imagetrends_hemi_10.jpg)](/media/imagetrends_hemi_10.jpg)
+[![Fisheye-Hemi](../media/imagetrends_hemi_10.jpg)](../media/imagetrends_hemi_10.jpg)
 
 The [PearlyWhites](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) plugin, which is intended to automatically whiten and brighten teeth in your images should be available within the next 60 days.
 
-[![PearlyWhites](/media/imagetrends_pearlywhite.png)](/media/imagetrends_pearlywhite.png)
+[![PearlyWhites](../media/imagetrends_pearlywhite.png)](../media/imagetrends_pearlywhite.png)
 
 And the [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) plugin, which removes shine from faces and skin should be available within the next 60 days too.
 
-[![ShineOff](/media/imagestrends_shieoff.jpg)](/media/imagestrends_shieoff.jpg)
+[![ShineOff](../media/imagestrends_shieoff.jpg)](../media/imagestrends_shieoff.jpg)
 
 # Picturecode Noise Ninja
 
@@ -83,7 +83,7 @@ Well known for it's awesome noise reduction capabilities, Picturecode's [Noise N
 
 According to Picturecode we can expect the plugin "sometimes next month" (June) and maybe there will be a beta version available before the final release. Definitely there will be a trial version of the plugin available from Picturecode's website.
 
-[![Noise Ninja](/media/noiseninja.png)](/media/noiseninja.png)
+[![Noise Ninja](../media/noiseninja.png)](../media/noiseninja.png)
 
 You can have a first look at an early alpha version of the plugin running in Aperture 2.1 in an [in-depth article by Rob Galbraith](http://www.robgalbraith.com/bins/content_page.asp?cid=7-9308-9356).
 
@@ -91,11 +91,11 @@ You can have a first look at an early alpha version of the plugin running in Ape
 
 [Hydra](http://www.creaceed.com/hydra/) is a neat application for High Dynamic Range (HDR) image processing. With the release of Hydra 1.5, Creaceed made an Aperture plugin available with it too. It has a limited feature set compared to Photomatix or Photoshop but creating HDR images within Aperture is possible right now with this plugin. You can purchase Hydra for US$ 59.95 to get the included plugin or test it out by downloading the trial version (it will expire on July 1, 2008). But remember that the plugin is in beta stage at the moment.
 
-![Hydra](/media/creaceed_hydra.png)
+![Hydra](../media/creaceed_hydra.png)
 
 # Kekus LensFix CI
 
-![Kekus LensFix CI](/media/lensfix_ci.png)The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30.
+![Kekus LensFix CI](../media/lensfix_ci.png)The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30.
 
 You can read a first review of the beta plugin for Aperture [over at trick77.com](http://www.trick77.com/2008/05/18/review-lens-correction-plug-in-kekus-lensfix-for-aperture-2/).
 
@@ -103,7 +103,7 @@ You can read a first review of the beta plugin for Aperture [over at trick77.com
 
 This plugin is a whole bundle of 11 different modules for more than 4000 effects like denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of. The whole bundle will cost you US$ 299.95 or US$ 69.95 for each module.
 
-[![Human Software ApertureEdit](/media/apertureedit_interface.jpg)](/media/apertureedit_interface.jpg)
+[![Human Software ApertureEdit](../media/apertureedit_interface.jpg)](../media/apertureedit_interface.jpg)
 
 # More information
 
diff --git a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md
index 88c3eb9f..b5381503 100644
--- a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md
+++ b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md
@@ -5,14 +5,14 @@ title: Image Trends releases Fisheye-Hemi plug-in for Apple Aperture
 author: Matthias Kretschmann
 
 date: 2008-05-19 13:05:23+00:00
-wordpress_id: 55
+  
 categories:
 - photography
 tags:
 - aperture
 ---
 
-[![Fisheye-Hemi](/media/imagetrends_hemi_10.jpg)](/media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you.
+[![Fisheye-Hemi](../media/imagetrends_hemi_10.jpg)](../media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you.
 
 From the press release:
 
diff --git a/content/posts/2008-05-21-awesome-parallax-optical-illusion.md b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md
index b1741ae6..98eeb574 100644
--- a/content/posts/2008-05-21-awesome-parallax-optical-illusion.md
+++ b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md
@@ -5,14 +5,14 @@ title: 'Awesome parallax optical illusion: Make a horse move'
 author: Matthias Kretschmann
 
 date: 2008-05-21 13:02:00+00:00
-wordpress_id: 58
+  
 categories:
 - design
 tags:
 - css
 ---
 
-![Parallax](/media/parallax_illusion_css.png)As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it.
+![Parallax](../media/parallax_illusion_css.png)As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it.
 
 But now Marco Kuiper from [marcofolio.net](http://www.marcofolio.net) adds another usage for it. He created a cool optical illusion with just plain css/html and some pictures. You can see a [demo of this effect](http://demo.marcofolio.net/a_parallax_illusion_with_css/) in action on Marco's website. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. Marco has written [some words about it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html) too and you can download the demo. He has also [done a nice tutorial](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) how to achieve this optical illusion. Very cool!
 
diff --git a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md
index 0f3402bc..a527e0aa 100644
--- a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md
+++ b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md
@@ -3,10 +3,10 @@ layout: post
 
 title: 'Showcasing the CSS Parallax Effect: 12+1 Creative Usages'
 author: Matthias Kretschmann
-image: parallax-visualization_big.png
+image: ../media/parallax-visualization_big.png
 
 date: 2008-05-22 20:01:12+00:00
-wordpress_id: 59
+  
 categories:
     - design
 
@@ -19,7 +19,7 @@ redirect_from:
 
 Been so in love with the parallax effect that I have to post another article about it. It's time for a first showcase of websites using this effect. At the end of this article you'll find some tutorials for making this effect too.
 
-For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](http://scifipedia.scifi.com/index.php/Parallax_(DC)).
+For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](<http://scifipedia.scifi.com/index.php/Parallax_(DC)>).
 
 I mean [Parallax Scrolling](http://en.wikipedia.org/wiki/Parallax_scrolling) which is a technique often used in good ol' arcade and video games like [Moon Patrol](http://en.wikipedia.org/wiki/Moon_Patrol) or [Sonic the Hedgehog](http://en.wikipedia.org/wiki/Sonic_the_Hedgehog_%28video_game%29). In such 2D games parallax scrolling was used to create an illusion of three dimensional depth.
 
@@ -35,59 +35,49 @@ So here are the examples. Just start clicking, resizing and goggling!
 
 The undeniable Kings of the Parallax, designed by Paul Annett. The Silverback guys made the effect so popular and inspired me too:
 
-[![Silverback app](/media/parallax_001.jpg)](http://www.silverbackapp.com/)  
-
+[![Silverback app](../media/parallax_001.jpg)](http://www.silverbackapp.com/)
 
 [Starry Night](http://css-tricks.com/examples/StarryNight/)
 
 An example by Chris Coyier from css-tricks.com. This one works vertically too and he made a [tutorial out of it](http://css-tricks.com/3d-parralax-background-effect/):
 
-[![Starry Night](/media/parallax_002.jpg)](http://css-tricks.com/examples/StarryNight/)  
-
+[![Starry Night](../media/parallax_002.jpg)](http://css-tricks.com/examples/StarryNight/)
 
 [Percentage Backgrounds](http://www.sitepoint.com/examples/stretchy/test.php)
 
 Probably the first css-based usage of this effect by Alex Walker over at Sitepoint. And probably the funniest one:
 
-[![Sitepoint's Percentage Backgrounds](/media/parallax_003.jpg)](http://www.sitepoint.com/examples/stretchy/test.php)  
-
+[![Sitepoint's Percentage Backgrounds](../media/parallax_003.jpg)](http://www.sitepoint.com/examples/stretchy/test.php)
 
 [The Horse in Motion](http://demo.marcofolio.net/a_parallax_illusion_with_css/)
 
 Marco Kuiper created a cool optical illusion with just plain css/html and some pictures. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. You can read [here how he made it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html).
 
-[![The Horse in Motion](/media/parallax_004.jpg)](http://demo.marcofolio.net/a_parallax_illusion_with_css/)  
-
+[![The Horse in Motion](../media/parallax_004.jpg)](http://demo.marcofolio.net/a_parallax_illusion_with_css/)
 
 [We all hate Quickbooks, Do You?](http://weallhatequickbooks.com/)
 
 Nice fire parallax on this sort of aggregating website. It displays all Tweets with the word "quickbooks" in it:
 
-[![We all hate Quickbooks, Do You?](/media/parallax_005.jpg)](http://weallhatequickbooks.com/)  
-
+[![We all hate Quickbooks, Do You?](../media/parallax_005.jpg)](http://weallhatequickbooks.com/)
 
 [Dumago](http://dumago.net/)
 
 More mysterious (Oh my god, what is it??) than the Silverback app and with frosty stars instead of jungle leaves:
 
-[![Dumago](/media/parallax_006.jpg)](http://dumago.net/)  
-
+[![Dumago](../media/parallax_006.jpg)](http://dumago.net/)
 
 [Dromaeo](http://dromaeo.com/)
 
 Another funky name and a nice parallax too. This one uses little dinosaurs. Something like "Oh, so cute" or "How adorable!" should come to your mind:
 
-[![Dromaeo](/media/parallax_007.jpg)](http://dromaeo.com/)  
-
+[![Dromaeo](../media/parallax_007.jpg)](http://dromaeo.com/)
 
 [cdev.ru](http://www.cdev.ru/)
 
 A russian site with an awesome making-webdesign-in-jungle parallax (thanks [egot](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-104)!). They even have different parallax headers on every page. Just click through the top menu:
 
-[![cdev.ru](/media/parallax_013.jpg)](http://www.cdev.ru/)  
-
-
-
+[![cdev.ru](../media/parallax_013.jpg)](http://www.cdev.ru/)
 
 # More Scripts and Interaction, please
 
@@ -97,64 +87,55 @@ All the showcased sites above need to be resized in the browser to see the effec
 
 Very cool cloud effect which becomes visible just by scrolling down the page. I think this is the future and next step of the parallax effect in Web-Design since scrolling is way more common than resizing the browser window:
 
-[![Parallax Backgrounds - a multi–layered javascript experiment](/media/parallax_008.jpg)](http://inner.geek.nz/javascript/parallax/)  
-
+[![Parallax Backgrounds - a multi–layered javascript experiment](../media/parallax_008.jpg)](http://inner.geek.nz/javascript/parallax/)
 
 [Fly + Parallax Scrolling Effect](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm)
 
 Similar to the Starry Night example from css-tricks. But this example uses JavaScript to achieve this effect without resizing your browser window. It almost looks like it's done with Flash:
 
-[![Fly + Parallax Scrolling Effect](/media/parallax_009.jpg)](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm)  
-
+[![Fly + Parallax Scrolling Effect](../media/parallax_009.jpg)](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm)
 
 [40 Jaar Sire](http://www.umaghetzeggen.nl/)
 
 Whatever this site is about (Help me dutch speaking folks! edit: [anna knows it!](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-102)) it creates a shaky effect controlled by your mouse pointer:
 
-[![40 Jaar Sire](/media/parallax_010.jpg)](http://www.umaghetzeggen.nl/)  
-
+[![40 Jaar Sire](../media/parallax_010.jpg)](http://www.umaghetzeggen.nl/)
 
 [CSS combined with Scriptaculous's Morph effect](http://offtheline.net/examples/parallax/)
 
 Same graphics as on Silverback but with a Morph effect assembled with Scriptaculous. The parallax effect becomes visible by shrinking and unshrinking which is controlled by your mouse clicks:
 
-[![CSS combined with Scriptaculous's Morph effect](/media/parallax_011.jpg)](http://offtheline.net/examples/parallax/)  
-
+[![CSS combined with Scriptaculous's Morph effect](../media/parallax_011.jpg)](http://offtheline.net/examples/parallax/)
 
 [WeblogR demo](http://www.weblogr.fr/demo/09052008/)
 
 Same graphics as on Silverback too but this Parallax follows your mouse pointer. This is done with jQuery:
 
-[![WeblogR demo](/media/parallax_012.jpg)](http://www.weblogr.fr/demo/09052008/)
-
-
-
+[![WeblogR demo](../media/parallax_012.jpg)](http://www.weblogr.fr/demo/09052008/)
 
 # How-Tos and Tutorials
 
-  * [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax)
+- [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax)
 
-  * [In the Lab: Doing strange things to CSS Backgrounds](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/)
+- [In the Lab: Doing strange things to CSS Backgrounds](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/)
 
-  * [Starry Night: Incredible 3D Background Effect with Parallax](http://css-tricks.com/3d-parralax-background-effect/)
+- [Starry Night: Incredible 3D Background Effect with Parallax](http://css-tricks.com/3d-parralax-background-effect/)
 
-  * [Your own CSS parallax illusion 3d image](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html)
+- [Your own CSS parallax illusion 3d image](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html)
 
-  * [Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/)
-
-  * [How to Make the Parallax Effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
+- [Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/)
 
+- [How to Make the Parallax Effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
 
 Hope you enjoyed this little showcase. Please share it on your favorite social website or vote for it. Your vote is always highly appreciated! And if you know any other websites using this effect (the non-flash versions) feel free to post them in the comments beneath this article.
 
 **Update 05/29/2008:** [Dylan Bathurst](http://www.dylanbathurst.com/) wrote an article [How to make the Parallax effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) which includes his own "Keep out of the Rain" example and a sticky, Hulk style Parallax footer:
 
-[![Dylan Bathurst](/media/parallax_015.png)](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
+[![Dylan Bathurst](../media/parallax_015.png)](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
 
 And he has found another Parallax effect on the [website of the Rissington Podcast](http://therissingtonpodcast.co.uk/). Cool!
 
-[![The Rissington Podcast](/media/parallax_014.png)](http://therissingtonpodcast.co.uk/)  
-
+[![The Rissington Podcast](../media/parallax_014.png)](http://therissingtonpodcast.co.uk/)
 
 **Update 2 06/02/2008:** Nice commentators [routine](http://www.weaintplastic.com/) and [Jorge Epuñan](http://www.csslab.cl/) made some more interactive Parallax examples:
 
@@ -162,11 +143,10 @@ And he has found another Parallax effect on the [website of the Rissington Podca
 
 A star parallax which follows your mouse pointer. Done with jQuery and with heavy CPU load.
 
-[![Sonus:portals](/media/parallax_017.jpg)](http://www.sonus-game.com/)  
-
+[![Sonus:portals](../media/parallax_017.jpg)](http://www.sonus-game.com/)
 
 [Parallax con Mootools](http://www.csslab.cl/ejemplos/parallax_mootools/)
 
 My personal favorite for now in terms of usability. If you are able to understand spanish, [read his explanation](http://www.csslab.cl/2008/05/29/parallax-en-uso-real/).
 
-[![Parallax con Mootools](/media/parallax_016.jpg)](http://www.csslab.cl/ejemplos/parallax_mootools/)
+[![Parallax con Mootools](../media/parallax_016.jpg)](http://www.csslab.cl/ejemplos/parallax_mootools/)
diff --git a/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md
index 53968310..c78ad5fb 100644
--- a/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md
+++ b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md
@@ -5,7 +5,7 @@ title: New all-in-one Aperture plug-in released
 author: Matthias Kretschmann
 
 date: 2008-05-28 15:29:56+00:00
-wordpress_id: 60
+  
 categories:
 - photography
 tags:
@@ -14,7 +14,7 @@ tags:
 coinhive: true
 ---
 
-![ApertureEdit](/media/apertureedit_logo.png)Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture.
+![ApertureEdit](../media/apertureedit_logo.png)Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture.
 
 The ApertureEdit plug-in is a bundle of 11 different modules for denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of.
 
diff --git a/content/posts/2008-06-01-chives.md b/content/posts/2008-06-01-chives.md
index 66dc012d..0727e68e 100644
--- a/content/posts/2008-06-01-chives.md
+++ b/content/posts/2008-06-01-chives.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Chives
-image: Teaser-Chives.jpg
-download: chives_by_kremalicious.zip
+image: ../media/Teaser-Chives.jpg
+download: ../media/chives_by_kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2008-06-01 18:43:40+00:00
-wordpress_id: 64
+  
 categories:
     - goodies
 tags:
diff --git a/content/posts/2008-06-02-tweet-im-on-twitter-now.md b/content/posts/2008-06-02-tweet-im-on-twitter-now.md
index 1cbad2ff..310d8e5d 100644
--- a/content/posts/2008-06-02-tweet-im-on-twitter-now.md
+++ b/content/posts/2008-06-02-tweet-im-on-twitter-now.md
@@ -5,14 +5,14 @@ title: Tweet! I'm on Twitter now.
 author: Matthias Kretschmann
 
 date: 2008-06-02 18:26:37+00:00
-wordpress_id: 65
+  
 categories:
 - personal
 tags:
 - twitter
 ---
 
-![Twitter](/media/twitter.png)In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious).
+![Twitter](../media/twitter.png)In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious).
 
 If you like, you can follow me now on Twitter while I try to find some advantages of this curious Twitter thing. The plan for now is to post about background updates of this website and about whatever I will throw into the Cloud on other places. But damn, just 140 characters. Feels like writing like it's 1999.
 
diff --git a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
index fda1f6b6..f4e9812c 100644
--- a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
+++ b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Niépce's Camera Obscura And The History Of The First Photograph
-image: Teaser-Camera-Obscura-Icons.jpg
-download: niepces_camera_obscura_by_kremalicious.zip
+image: ../media/Teaser-Camera-Obscura-Icons.jpg
+download: ../media/niepces_camera_obscura_by_kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2008-06-03 14:34:03+00:00
-wordpress_id: 67
+  
 
 categories:
     - goodies
@@ -36,8 +36,7 @@ There's a fascinating story behind these icons which is nothing more than the st
 
 ## Nicéphore Niépce and The First Photograph
 
-
-![Nicéphore Niépce, ca. 1795](/media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795
+![Nicéphore Niépce, ca. 1795](../media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795
 
 Niépce was a multitasking French inventor who became famous for his experiments trying to preserve the projected image inside of the Camera Obscura. The Camera Obscura uses a well known optical phenomenon which is known to mankind for quite a long time.
 
@@ -106,7 +105,7 @@ In addition to these icons you can download the [associated wallpapers for your
 
 # How to use these icons
 
-![Niépce's Camera Obscura in use](/media/cameraobscura_inuse.png)These desktop icons are free for your personal and non-commercial use. They were intended to be replacement icons for Apple's Aperture and iPhoto applications. Of course, you can use it for every other application instead or use the folder icon for your picture collection.
+![Niépce's Camera Obscura in use](../media/cameraobscura_inuse.png)These desktop icons are free for your personal and non-commercial use. They were intended to be replacement icons for Apple's Aperture and iPhoto applications. Of course, you can use it for every other application instead or use the folder icon for your picture collection.
 
 The easiest way to change and apply icons in Mac OS X involves the awesome application [Candybar](http://www.panic.com/candybar) from [Panic Software](http://www.panic.com/). In case you don't have it you can change your icons by following these steps:
 
@@ -118,6 +117,6 @@ These desktop icons are free for you personal and non-commercial use. All other
 
 # Final Words
 
-<a href="http://krlc.us/givecoffee">![Oh no!](/media/coffee-cup-empty.png)</a>
+<a href="http://krlc.us/givecoffee">![Oh no!](../media/coffee-cup-empty.png)</a>
 
 Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](https://kremalicious.com/feed/) or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
diff --git a/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md
index 61124ea0..da57a257 100644
--- a/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md
+++ b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Niépce's Camera Obscura Wallpaper Pack
-image: Teaser-Camera-Obscura-Walls.jpg
-download: niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip
+image: ../media/Teaser-Camera-Obscura-Walls.jpg
+download: ../media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2008-06-03 13:32:24+00:00
-wordpress_id: 66
+  
 categories:
 - goodies
 tags:
diff --git a/content/posts/2008-06-04-helvetica-typewriter-keys.md b/content/posts/2008-06-04-helvetica-typewriter-keys.md
index eaaf3e9a..caa894a3 100644
--- a/content/posts/2008-06-04-helvetica-typewriter-keys.md
+++ b/content/posts/2008-06-04-helvetica-typewriter-keys.md
@@ -1,16 +1,16 @@
 ---
 layout: photo
 
-slug: helvetica-typewriter-keys
 title: Helvetica Typewriter Keys
-image: MG_1735-Version-2.jpg
+image: ../media/MG_1735-Version-2.jpg
 author: Matthias Kretschmann
 
 date: 2008-06-04 11:41:01+00:00
-wordpress_id: 1976
+  
 categories:
 - photos
-tags: typography
+tags:
+- typography
 ---
 
 [Photo on 500px](http://500px.com/photo/5630073) [Photo on flickr](http://www.flickr.com/photos/krema/6965165687)
diff --git a/content/posts/2008-06-11-safari-4-developer-preview.md b/content/posts/2008-06-11-safari-4-developer-preview.md
index 5b774c34..6f09d812 100644
--- a/content/posts/2008-06-11-safari-4-developer-preview.md
+++ b/content/posts/2008-06-11-safari-4-developer-preview.md
@@ -5,7 +5,7 @@ title: 'Safari 4 Developer Preview - Better Performance, Overhauled Web Inspecto
 author: Matthias Kretschmann
 
 date: 2008-06-11 10:37:07+00:00
-wordpress_id: 70
+  
 category: design
 tags:
     - osx
@@ -13,21 +13,21 @@ tags:
     - css
 ---
 
-![Safari](/media/safari-logo.png)Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector.
+![Safari](../media/safari-logo.png)Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector.
 
 You can access Safari's Web Inspector through Develop > Show Web Inspector (you have to check the "Show Develop menu" box in the Preferences first to enable it). The Web Inspector, like the Firebug plug-in for Firefox, is a cool tool especially for Web Developers to inspect various elements of the website you're browsing.
 
 The Navigation inside the Web Inspector is now moved from left to the top and there's a new "Databases" section and something like a browsing benchmarking "Profiles" section. All navigation tabs got new icons too.
 
-![Web Inspector](/media/webinspector_3.png)
+![Web Inspector](../media/webinspector_3.png)
 
 The "Resources" section got a slight overhaul too. With it you can see in which time the elements on your website were loaded with a nice graphical timeline.
 
-![Web Inspector](/media/webinspector_2.png)
+![Web Inspector](../media/webinspector_2.png)
 
 Among the visible new features in the Safari 4 Developer Preview is the ability to save websites as desktop applications or site-specific browsers (SSB) called Web Applications (File > Save as Web Application) and some more options for new windows or tabs in the General Preferences:
 
-![Safari 4 New Windows And Tabs](/media/safari_4_tabs.png)
+![Safari 4 New Windows And Tabs](../media/safari_4_tabs.png)
 
 In terms of web standards and performance the Safari 4 Developer Preview passes the [Acid3 performance test](http://acid3.acidtests.org/) with 100/100 and is way more faster at rendering web pages.
 
@@ -37,7 +37,7 @@ Finally there seem to be a new css version implemented since Safari 4 now render
 
 Another new feature is the new full page zoom for zooming on web pages which was already implemented in the WebKit nightlies but [had to be manually activated](http://www.macosxhints.com/article.php?story=20080606045109546). In old Safari versions pressing Command + or - increased or decreased just the text size, sometimes destroying the whole layout of the page. The Safari 4 Developer Preview behaves just like the recent Firefox 3 RC1 and zooms out or zooms in the whole page layout and not just the text.
 
-[![Web Inspector](/media/safari4_zoom_thumb.png)](/media/safari4_zoom.png)
+[![Web Inspector](../media/safari4_zoom_thumb.png)](../media/safari4_zoom.png)
 
 And while Apple just [states in their press release](http://www.apple.com/pr/library/2008/06/09snowleopard.html) that Safari 4 delivers "the fastest implementation of JavaScript ever, increasing performance by 53 percent", other sources like [MacRumors](http://www.macrumors.com/2008/06/10/apple-seeds-safari-4-to-developers/) or [Macworld UK](http://www.macworld.co.uk/macsoftware/news/index.cfm?newsid=21625&pagtype=allchandate) expect this increased JavaScript performance to be based on the implementation of the freshly new [SquirrelFish JavaScript engine](http://webkit.org/blog/189/announcing-squirrelfish/).
 
diff --git a/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md
index d150440a..7d709bc4 100644
--- a/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md
+++ b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md
@@ -5,19 +5,19 @@ title: 'Quick Tip: Borders & Titles Plug-In for Aperture'
 author: Matthias Kretschmann
 
 date: 2008-06-17 15:21:57+00:00
-wordpress_id: 73
+  
 categories:
 - photography
 tags:
 - aperture
 ---
 
-![Aperture](/media/aperture128.png)Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first?
+![Aperture](../media/aperture128.png)Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first?
 
 There's a simple editing plug-in available for this task called [Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html) and as the name says you can add simple borders and text to your images within Aperture 2.1. It's a sample plug-in provided by Apple and it's fully functional. You can download it from Apple's Developer Connection website without registration:
 
 [Aperture Edit Plugin - Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html)
 
-[![Borders & Titles](/media/aperture_bt_thumb.png)](/media/aperture_bt.png)
+[![Borders & Titles](../media/aperture_bt_thumb.png)](../media/aperture_bt.png)
 
 The downlaod package includes the source code too so you can adjust the plug-in if you're able to code Cocoa. After downloading put the BordersAndTitles.ApertureEdit plug-in into /Library/Application Support/Aperture/Plug-Ins and access the plug-in from Aperture.
diff --git a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
index 212cdcba..100d73fa 100644
--- a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
+++ b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
@@ -1,15 +1,14 @@
 ---
 layout: post
 
-slug: ubuntu-as-mac-file-server-and-time-machine-volume
 title: 'HowTo: Make Ubuntu A Perfect Mac File Server And Time Machine Volume'
 author: Matthias Kretschmann
-image: ubuntu_mac_feature.jpg
+image: ../media/ubuntu_mac_feature.jpg
 
 date: 2008-06-19 03:08:11+00:00
 updated: 2016-06-12 14:29:11+00:00
 
-wordpress_id: 75
+  
 category: design
 tags:
     - tutorial
@@ -41,23 +40,23 @@ Personally I use a fresh installation of Ubuntu 8.04 Hardy Heron Desktop version
 
 Here are the steps involved in setting up your Ubuntu box as a Mac file server:
 
-  1. Modify and install Netatalk (Open Source AFP implementation)
-  2. Configure Netatalk
-  3. Configure shared volumes (and Time Machine volume)
-  4. Install Avahi (Open Source Bonjour implementation)
-  5. Configure Avahi and advertise services
-  6. Configure TimeMachine
-  7. Conclusion, Problems and more informations
-  8. Downloading and using the Server Display Icons
-  9. Translations Of This Article
+1.  Modify and install Netatalk (Open Source AFP implementation)
+2.  Configure Netatalk
+3.  Configure shared volumes (and Time Machine volume)
+4.  Install Avahi (Open Source Bonjour implementation)
+5.  Configure Avahi and advertise services
+6.  Configure TimeMachine
+7.  Conclusion, Problems and more informations
+8.  Downloading and using the Server Display Icons
+9.  Translations Of This Article
 
 # 1. Modify and install Netatalk
 
-![Netatalk icon](/media/netatalk.png)[Netatalk](http://netatalk.sourceforge.net/) is the Open Source implementation of AFP. Mac OS X requires encryption to work properly but the standard package of netatalk provided in the Ubuntu repositories doesn't include this feature. So we have to build our own netatalk package from the sources with the encryption feature enabled.
+![Netatalk icon](../media/netatalk.png)[Netatalk](http://netatalk.sourceforge.net/) is the Open Source implementation of AFP. Mac OS X requires encryption to work properly but the standard package of netatalk provided in the Ubuntu repositories doesn't include this feature. So we have to build our own netatalk package from the sources with the encryption feature enabled.
 
 First you have to enable the Source Code repositories via System > Administration > Software Sources under the Ubuntu Software tab. Check the Source Code Box, click Close and choose Reload in the next dialogue.
 
-![Source Code Repositories](/media/ubuntuserver1.png)
+![Source Code Repositories](../media/ubuntuserver1.png)
 
 Alessandro has built [a nice .deb package for i386 machines](http://dl.getdropbox.com/u/187424/netatalk_2.0.3-brando0_i386.deb). Although written in italian you can follow the necessary code snippets for installing this package [in his blog post.](http://gpz500.wordpress.com/2008/09/27/lairone-al-servizio-del-leopardo/) If the install package works for you just skip the following self compiling process and head over to the [Configure Netatalk section.](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#netatalk2)
 
@@ -68,7 +67,7 @@ sudo apt-get build-dep netatalk
 sudo apt-get install cracklib2-dev fakeroot libssl-dev
 sudo apt-get source netatalk
 cd netatalk-2*
-````
+```
 
 Now you have downloaded the source code of Netatalk to your home folder, installed some required packages for building Netatalk and changed the directory to the downloaded folder.
 
@@ -80,11 +79,10 @@ sudo DEB_BUILD_OPTIONS=ssl dpkg-buildpackage -rfakeroot
 
 Depending on your hardware this may take a while but you can enjoy the geeky build output in your Terminal:
 
-![Building Netatalk](/media/ubuntuserver2.png)
+![Building Netatalk](../media/ubuntuserver2.png)
 
 If everything went through without errors (except the signing warnings, can be ignored) you can install the recently created package:
 
-
 ```shell
 sudo dpkg -i ~/netatalk_2*.deb
 ```
@@ -99,7 +97,7 @@ Now you have successfully build and installed your custom Netatalk package which
 
 # 2. Configure Netatalk
 
-![Netatalk icon](/media/netatalk.png)First you should deactivate services provided by Netatalk which are not needed if you just want to use your Ubuntu box for file sharing. This will speed up the response and startup time of Netatalk dramatically. For instance Netatalk starts the old AppleTalk protocol by default which is just needed for pre OS X systems. So we're going to use the graphical editor vi for stopping unneeded services:
+![Netatalk icon](../media/netatalk.png)First you should deactivate services provided by Netatalk which are not needed if you just want to use your Ubuntu box for file sharing. This will speed up the response and startup time of Netatalk dramatically. For instance Netatalk starts the old AppleTalk protocol by default which is just needed for pre OS X systems. So we're going to use the graphical editor vi for stopping unneeded services:
 
 ```shell
 sudo vi /etc/default/netatalk
@@ -134,7 +132,7 @@ Press Ctrl + S to save the document or choose File > Save.
 
 # 3. Configure shared Volumes
 
-![Time Machine Volume icon](/media/timemachinedisk97.png)Now we have to tell the afpd daemon what Volumes to share. This is defined in the AppleVolumes.default file inside /etc/netatalk/. The following line will open this file in vim with superuser privileges (required for saving) where we can define our shared volumes:
+![Time Machine Volume icon](../media/timemachinedisk97.png)Now we have to tell the afpd daemon what Volumes to share. This is defined in the AppleVolumes.default file inside /etc/netatalk/. The following line will open this file in vim with superuser privileges (required for saving) where we can define our shared volumes:
 
 ```shell
 sudo vi /etc/netatalk/AppleVolumes.default
@@ -173,7 +171,7 @@ Although we now have a fully configured AFP file server it will not show up in t
 
 # 4. Install Avahi
 
-![Bonjour icon](/media/bonjour97.png)So the Avahi daemon will advertise all defined services across your network just like Bonjour do. So let's install the avahi daemon and the mDNS library used for imitating the Bonjour service. When fully configured this will cause all Macs in your network to discover your Ubuntu box automatically:
+![Bonjour icon](../media/bonjour97.png)So the Avahi daemon will advertise all defined services across your network just like Bonjour do. So let's install the avahi daemon and the mDNS library used for imitating the Bonjour service. When fully configured this will cause all Macs in your network to discover your Ubuntu box automatically:
 
 ```shell
 sudo apt-get install avahi-daemon
@@ -196,7 +194,7 @@ Press Ctrl + S to save the document or choose File > Save.
 
 # 5. Configure Avahi and advertise services
 
-![Bonjour icon](/media/bonjour97.png)Next we have to tell Avahi which services it should advertise across the network. In our case we just want to advertise AFP sharing. This is done by creating a xml-file for each service inside /etc/avahi/services/ following a special syntax. Let's create a xml-file for the afpd service with the following line:
+![Bonjour icon](../media/bonjour97.png)Next we have to tell Avahi which services it should advertise across the network. In our case we just want to advertise AFP sharing. This is done by creating a xml-file for each service inside /etc/avahi/services/ following a special syntax. Let's create a xml-file for the afpd service with the following line:
 
 ```shell
 sudo vi /etc/avahi/services/afpd.service
@@ -233,19 +231,19 @@ Now you have configured the Avahi daemon to advertise AFP sharing across your ne
 
 Now you're done with setting up AFP file sharing on your Ubuntu box and advertising it across the network for Finder's sidebar. Check if everything works as intended by clicking on your Ubuntu server in Finder and clicking on the "Connect As" button. Enter your username and password (the ones you're using on your Ubuntu machine) and you should see the Volumes we defined earlier with the AppleVolumes.default file:
 
-![Netatalk shares](/media/ubuntuserver3.png)
+![Netatalk shares](../media/ubuntuserver3.png)
 
 Another side effect of using AFP is that your Ubuntu box will show up as a nice Apple Cinema Display icon instead of the BSOD windows icon. Here you see my Ubuntu server showing up in Finder as [Rockhopper](http://en.wikipedia.org/wiki/Southern_Rockhopper_Penguin):
 
-![Ubuntu box in Finder](/media/ubuntuserver4.png)
+![Ubuntu box in Finder](../media/ubuntuserver4.png)
 
 update: If you've followed the revised version of this article your Linux box should now be represented by a Xserve icon in Finder:
 
-![Ubuntu box as Xserver in Finder](/media/ubuntuserver4a.png)
+![Ubuntu box as Xserver in Finder](../media/ubuntuserver4a.png)
 
 # 6. Configure Time Machine
 
-![Time Machine icon](/media/timemachine97.png)**update 07/14/2008:** On the Mac side you have to enable the option to use network volumes as Time Machine drives first. Without it your freshly shared and advertised network volume won't show up in the disk selection dialogue in Time Machine. This is a hidden option not accessible via the graphical user interface so you have to copy & paste this in Terminal (it's one line):
+![Time Machine icon](../media/timemachine97.png)**update 07/14/2008:** On the Mac side you have to enable the option to use network volumes as Time Machine drives first. Without it your freshly shared and advertised network volume won't show up in the disk selection dialogue in Time Machine. This is a hidden option not accessible via the graphical user interface so you have to copy & paste this in Terminal (it's one line):
 
 ```shell
 defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1
@@ -257,7 +255,7 @@ Now just mount the "TimeMachine" Volume first and choose it as a backup disk in
 
 When your first Time Machine backup is done you can remove all Volumes and the next time Time Machine starts it will automagically mount the disk image from your TimeMachine volume on your Ubuntu box without mounting the whole TimeMachine volume:
 
-![Finder sidebar](/media/ubuntuserver5.png)
+![Finder sidebar](../media/ubuntuserver5.png)
 
 # 7. Conclusion, Problems and more informations
 
@@ -291,7 +289,7 @@ The secret number Time Machine adds to your computer name is nothing more than t
 
 In the field volume name write Backup of computername. Now FIRST chose sparse bundle disk image as the image format and THEN adjust the volume size to the size of your internal harddrive (minimum, choose more if you like) afterwards. Remember that Disk Utility won't let you make a bigger image file as you have physical hard drive space available if you don't chose sparse bundle disk image as the image format first. For reference have a look at this screenshot:
 
-![Time Machine sparse bundle disk image](/media/tm-sparsebundle.png)
+![Time Machine sparse bundle disk image](../media/tm-sparsebundle.png)
 
 Select your Desktop as destination and click create. After the creation is finished drag the created disk image to your mounted Time Machine volume (you can delete the disk image on your desktop when copy is finished). Finally go to Time Machine preferences and start your backup again and everything should work as expected now. After the first backup (this can take a long time depending on your harddrive) you can unmount your Time Machine volume and the next time Time Machine starts it will grab and mount the sparse bundle disk image automatically (with "Backup of computername" as the volume name).
 
@@ -304,17 +302,17 @@ In short you have to allow communications over port 548 and 5353.
 ## "Connection Failed"
 
 If you get one of those errors:
+````
+
+Connection Failed - There was an error connection to the server. Check the server name or IP address and try again
+
+```
+or
+```
+
+There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator.
 
 ````
-Connection Failed - There was an error connection to the server. Check the server name or IP address and try again
-```
-
-or
-
-```
-There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator.
-```
-
 you should first be sure you have either no firewall on your Ubuntu box in use or have it configured to allow AFP communications as suggested in the above paragraph.
 
 Remember that this error can be caused by a myriad of problems and just a lot of other configurations on your side. So you should try a minimal way: On my Ubuntu boxes I have no other file sharing protocol like samba or NFS enabled (even not installed) so the samba hostname and the AFP hostname can't interfere with each other. Also I've left the Workgroup field blank under System > Administration > Network > General tab.
@@ -323,7 +321,7 @@ If you still can't connect to your Ubuntu box you can edit your /etc/hosts file
 
 ```shell
 sudo vi /etc/hosts
-```
+````
 
 Add the following two lines at the very top of the file.
 
@@ -374,22 +372,21 @@ In the forum you'll also find some links to various patches to avoid problems wi
 
 ## More Articles
 
-  * In case you want to connect your iPhone via AFP: [An AFP Server on your iPhone](http://www.eecs.berkeley.edu/~job/afpd/AFP_File_Server_on_your_iPhone.html). This uses the Netatalk package too
-  * [Netatalk 2.0 manual](http://netatalk.sourceforge.net/2.0/htmldocs/)
-  * [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html)
-  * [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour)
-  * [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673)
-  * [How-to: Get files off a Time Machine backup without using your Mac](http://carsonbaker.org/2008/06/23/time-machine-restore/): In case you have to access Time Machine backups from Ubuntu or any other Linux system
-  * [Using NetBSD, with guest account](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143): [Johannes](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143) laid down the steps to use NetBSD instead of Ubuntu.
-
+- In case you want to connect your iPhone via AFP: [An AFP Server on your iPhone](http://www.eecs.berkeley.edu/~job/afpd/AFP_File_Server_on_your_iPhone.html). This uses the Netatalk package too
+- [Netatalk 2.0 manual](http://netatalk.sourceforge.net/2.0/htmldocs/)
+- [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html)
+- [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour)
+- [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673)
+- [How-to: Get files off a Time Machine backup without using your Mac](http://carsonbaker.org/2008/06/23/time-machine-restore/): In case you have to access Time Machine backups from Ubuntu or any other Linux system
+- [Using NetBSD, with guest account](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143): [Johannes](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143) laid down the steps to use NetBSD instead of Ubuntu.
 
 # 8. Downloading and using the Server Display Icons
 
-![Ubuntu Server Display](/media/ubuntuserver97.png)I've quickly crafted a custom icon for your Ubuntu server. It's the Apple Cinema Display with the default wallpaper of Ubuntu 8.04 called Hardy Heron. Additionally I've included an icon with the default Leopard and the default Vista wallpaper to represent your Leopard and Windows server too (The default Mac server icon uses the old Tiger wallpaper).
+![Ubuntu Server Display](../media/ubuntuserver97.png)I've quickly crafted a custom icon for your Ubuntu server. It's the Apple Cinema Display with the default wallpaper of Ubuntu 8.04 called Hardy Heron. Additionally I've included an icon with the default Leopard and the default Vista wallpaper to represent your Leopard and Windows server too (The default Mac server icon uses the old Tiger wallpaper).
 
 Here you can see the icons included in the Server Displays icon pack:
 
-![Server Displays](/media/serverdisplays.jpg)
+![Server Displays](../media/serverdisplays.jpg)
 
 Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:
 
@@ -413,13 +410,13 @@ As for the Windows Vista server icon: Just rename the Windows Server.icns file t
 
 ```
 /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources
-````
+```
 
 Now drag & drop the renamed file into this path and replace the generic icon (making a backup before doing that is a good idea) and after a logout all your Windows servers should be displayed with the new icon.
 
 update: A solution for the icon problem is here: [Simon Wheatley figured out](http://www.simonwheatley.co.uk/2008/04/06/avahi-finder-icons/trackback/) how to assign a different icon to your avahi advertised Linux box. All you have to do is assigning a device info part at the end of the avahi service file for AFP. I've updated this article to include this part. Please head back to the Configure Avahi and advertise services part in this article and edit your afpd.service file again if you've followed the first revision of this article.
 
-<a href="http://krlc.us/givecoffee">![Oh no!](/media/coffee-cup-empty.png)</a>
+<a href="http://krlc.us/givecoffee">![Oh no!](../media/coffee-cup-empty.png)</a>
 
 Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
 
diff --git a/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md
index e79e0a91..3b724215 100644
--- a/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md
+++ b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md
@@ -5,14 +5,14 @@ title: ApertureEdit is Edit for Aperture now, updated to 1.2
 author: Matthias Kretschmann
 
 date: 2008-06-25 15:29:22+00:00
-wordpress_id: 77
+  
 categories:
 - photography
 tags:
 - aperture
 ---
 
-![Edit for Aperture logo](/media/apertureedit_logo2.png)The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes.
+![Edit for Aperture logo](../media/apertureedit_logo2.png)The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes.
 
 The ApertureEdit plug-in is a bundle of 12 different modules for denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once and according to Human Software Edit offers more than 4000 professional effects. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of.
 
diff --git a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md
index 617bd564..4af18d20 100644
--- a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md
+++ b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md
@@ -6,13 +6,13 @@ title: 'New Canon stuff: Digital Rebel XS/EOS 1000D/Kiss F And Speedlite 430EX I
 author: Matthias Kretschmann
 
 date: 2008-06-25 16:41:59+00:00
-wordpress_id: 78
+  
 categories:
 - photography
 ---
 
-![Digital Rebel XS/EOS 1000D ](/media/canon1000d.png)After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D.
+![Digital Rebel XS/EOS 1000D ](../media/canon1000d.png)After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D.
 
 With this DSLR Canon seems to open up a new class in their EOS system which is somehow below the former entry level cameras (XT/350D, XTi/400D) and the latest entry-level XSi/450D. It's priced 200$ below Canons current or former entry-level DSLR XSi/450D and you can find a nice first review of this new DSLR [over at Digital Photography Review](http://www.dpreview.com/previews/Canon_1000D/).
 
-[![Speedlite 430EX II](/media/speedlite430exii.jpg)](/media/speedlite430exii.jpg)Canon also introduced the new midrange Speedlite 430EX II, replacing the 430EX flash unit. This new Speedlite is now fully configurable with the Camera's LCD menu and it got now a metal shoe. According to [Canon](http://www.canon.co.uk/press_centre/press_releases/cameras_accessories/speedlite_430ex_ii_press_release.asp) the  430EX II also boasts 20% faster recycling times and is more silent while doing this. In Europe and in the USA the Speedlite should be available from the end of July.
+[![Speedlite 430EX II](../media/speedlite430exii.jpg)](../media/speedlite430exii.jpg)Canon also introduced the new midrange Speedlite 430EX II, replacing the 430EX flash unit. This new Speedlite is now fully configurable with the Camera's LCD menu and it got now a metal shoe. According to [Canon](http://www.canon.co.uk/press_centre/press_releases/cameras_accessories/speedlite_430ex_ii_press_release.asp) the  430EX II also boasts 20% faster recycling times and is more silent while doing this. In Europe and in the USA the Speedlite should be available from the end of July.
diff --git a/content/posts/2008-06-30-stone-head.md b/content/posts/2008-06-30-stone-head.md
index e40e4a2d..374c1523 100644
--- a/content/posts/2008-06-30-stone-head.md
+++ b/content/posts/2008-06-30-stone-head.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Stone Head
-image: stonehead.jpg
+image: ../media/stonehead.jpg
 author: Matthias Kretschmann
 
 date: 2008-06-30 11:26:14+00:00
-wordpress_id: 1961
+  
 categories:
 - photos
 ---
diff --git a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md
index d5c198b2..bbcb731e 100644
--- a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md
+++ b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md
@@ -5,14 +5,14 @@ title: Everything Back To Normal On Kremalicious.com (Almost)
 author: Matthias Kretschmann
 
 date: 2008-07-01 16:39:02+00:00
-wordpress_id: 80
+  
 categories:
 - personal
 tags:
     - wordpress
 ---
 
-![Server screwed](/media/xserve_screwed.png)As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it.
+![Server screwed](../media/xserve_screwed.png)As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it.
 
 It all started with a move of my whole website to new and shiny servers with PHP 5 running by my host. I didn't heard of any incompatibilities between the latest Wordpress version running on PHP 5 and in fact Wordpress loves to use PHP 5. But somehow I wasn't able to update my site neither over http or ftp. Since I can contact my host admins directly ([thank you jpBerlin/Heinlein-Support!](http://www.jpberlin.de/)) this problem was addressed rather quickly. They just neglected to tell me that the server address for login also changed (I should have think of this too). So all my changes were applied to my Wordpress installation on the old server. Problem solved I thought.
 
diff --git a/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md
index eab8925e..6633599a 100644
--- a/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md
+++ b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md
@@ -5,7 +5,7 @@ title: 'New Aperture Plug-Ins: Jade And PTLens'
 author: Matthias Kretschmann
 
 date: 2008-07-08 19:19:54+00:00
-wordpress_id: 84
+  
 categories:
 - photography
 tags:
@@ -14,19 +14,19 @@ tags:
 
 Last week two new image editing plug-ins were announced for Aperture 2.1: The PTLens plug-in for correcting barrel distortion, vignetting, chromatic aberration, and perspective and the Jade plug-in for automatic correction of color, levels and exposure.
 
-![image](/media/aperture-plugin128.png)
+![image](../media/aperture-plugin128.png)
 
 The [PTLens plug-in](http://epaperpress.com/ptlens/) from [ePaperPress](http://epaperpress.com/) was available as a Photoshop plug-in in the past and is well known for its lens pincushion, barrel distortion, vignetting, chromatic aberration, and perspective correction abilities based on a lens model database similiar to [Kekus' LensFix CI plug-in](http://www.kekus.com/software/plugin.html).
 
 While I love the plug-ins ability to correct perspectives the Aperture plug-in doesn't work with RAW files(!), just with tiff and jpeg files which is one more way to compromise the way Aperture works (In my opinion the whole plug-in architecture of Aperture does that). And while I would love to show you the plug-ins user interface in Aperture PTLens refused to open either JPEG or TIFF files. So here's just a screenshot of the standalone application:
 
-[![PTLens UI](/media/ptlens_ui_thumb.jpg)](/media/ptlens_ui.png)
+[![PTLens UI](../media/ptlens_ui_thumb.jpg)](../media/ptlens_ui.png)
 
 So to me the PTLens plug-in for Aperture isn't finished yet. But you can download a [trial version from the plug-ins website](http://epaperpress.com/ptlens/media.html).
 
 The second plug-in recently released is the [Jade plug-in](http://jade.datamind.biz/) from Datamind. Because of its speed also on consumer Macs, Aperture 2 became popular among amateur photographers too. [Datamind](http://datamind.biz) targets it's first Aperture plug-in [Jade](http://jade.datamind.biz/) at this group. The former standalone application for Mac and Windows is now an Aperture adjustment plug-in for correcting your pictures colors, levels and exposure automatically with Dataminds own algorithm. And its user interface is very clean and uncluttered:
 
-[![PTLens UI](/media/jade_ui_thumb.jpg)](/media/jade_ui.png)
+[![PTLens UI](../media/jade_ui_thumb.jpg)](../media/jade_ui.png)
 
 While I have to say Jade produces very reasonable results it lacks a lot of controls and fails with complicated pictures where Aperture's adjustment controls wouldn't. So I would say this plug-in would be better as an iPhoto plug-in. Do you really want a blown up photoshop or tiff file for every photo you're going to correct in Aperture?
 
diff --git a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md
index 1ea50ab1..f54b50ba 100644
--- a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md
+++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md
@@ -5,14 +5,14 @@ title: Enjoy Kremalicious{iPhone}
 author: Matthias Kretschmann
 
 date: 2008-07-11 00:20:22+00:00
-wordpress_id: 85
+  
 categories:
 - personal
 tags:
     - wordpress
 ---
 
-![](/media/kremaliciousiphone_thumb.png)I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?
+![](../media/kremaliciousiphone_thumb.png)I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?
 
 When the website detects an iPhone or iPod Touch it will automatically switch to another freshly created theme which is absolutely seamless to the user. This detection is done by the wonderful slim iPhone Wordpress plug-in from ContentRobot which was slightly modified by me.
 
@@ -43,7 +43,7 @@ There's neither an active nor a hover state for links on the iPhone which makes
 
 # Home Screen Icon
 
-![image](/media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section:
+![image](../media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section:
 
 {% highlight html %}
 <link rel="apple-touch-icon" href="/i/apple-touch-icon.png" />
diff --git a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md
index c0593c33..b2e3100c 100644
--- a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md
+++ b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md
@@ -5,15 +5,15 @@ title: 'New Aperture Plug-In: Nik announces Silver Efex Pro'
 author: Matthias Kretschmann
 
 date: 2008-07-11 19:13:16+00:00
-wordpress_id: 86
+  
 categories:
 - photography
 tags:
 - aperture
 ---
 
-![image](/media/aperture-plugin128.png)Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image.
+![image](../media/aperture-plugin128.png)Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image.
 
-[![Nik Silver Efex Pro UI](/media/nik_silverefex_thumb.png)](/media/nik_silverefex.png)
+[![Nik Silver Efex Pro UI](../media/nik_silverefex_thumb.png)](../media/nik_silverefex.png)
 
 You can get a [15-day trial from Nik's website](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=262). It can be purchased through Nik's online store for US$199.95.
diff --git a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md
index e248a8c6..c76cde38 100644
--- a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md
+++ b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md
@@ -5,7 +5,7 @@ title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard'
 author: Matthias Kretschmann
 
 date: 2008-07-15 14:04:46+00:00
-wordpress_id: 87
+  
 
 categories:
 - design
@@ -14,7 +14,7 @@ tags:
 - wordpress
 ---
 
-![Wordpress Logo by kremalicious](/media/wordpress-logo.png)Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
+![Wordpress Logo by kremalicious](../media/wordpress-logo.png)Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
 
 I've searched for a simple way of disabling those feeds, plugins etc. stuff the Wordpress Dashboard tries to fill but it seems you can't disable these from the backend. But there's a quick way for doing this which involves editing your /wp-admin/index-extra.php and uncomment some lines there. This will leave your Dashboard intact while it stops Wordpress from connecting to various sources to screw your blog up when you just want to quickly write something.
 
diff --git a/content/posts/2008-07-23-leaf-life.md b/content/posts/2008-07-23-leaf-life.md
index d76b96c0..4c38ceca 100644
--- a/content/posts/2008-07-23-leaf-life.md
+++ b/content/posts/2008-07-23-leaf-life.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Leaf Life
-image: MG_1920.jpg
+image: ../media/MG_1920.jpg
 author: Matthias Kretschmann
 
 date: 2008-07-23 20:38:57+00:00
-wordpress_id: 1908
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md
index db372b6f..cd6917ab 100644
--- a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md
+++ b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md
@@ -5,12 +5,12 @@ title: Tips for Journalists Reporting From China
 author: Matthias Kretschmann
 
 date: 2008-08-03 17:10:25+00:00
-wordpress_id: 95
+  
 categories:
 - photography
 ---
 
-![Jingjing and Chacha are watching you](/media/jingjing_chacha_kremalicious.jpg)
+![Jingjing and Chacha are watching you](../media/jingjing_chacha_kremalicious.jpg)
 As you may know there's a huge Internet censorship going on in China. Contrary to promises made by chinese authorities and the International Olympic Committee (IOC) this Internet censorship is active during the Olympic Games [even in the international media centre](http://news.bbc.co.uk/2/hi/asia-pacific/7532338.stm). And the [IOC shares the current ideas of censorship in China](http://www.rsf.org/article.php3?id_article=26461).
 
 And as in every political system with totalitarian elements there's a good chance you will meet some angry lackeys if you're going to report about topics the chinese authorities don't want you to report. But more important they will threat your sources if their identity gets revealed. So if you want to report about [the water shortage in the villages around Beijing](http://www.voanews.com/english/2008-06-27-voa10.cfm), the [massive air pollution in Beijing](http://english.chosun.com/w21data/html/news/200807/200807300031.html) or about all the forced resettlements going on in China you should consider some security precautions to protect you and your sources.
diff --git a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
index 75d28c57..f9ea6435 100644
--- a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
+++ b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
@@ -5,7 +5,7 @@ title: 'HowTo: Create A Mobile Encrypted Aperture Vault'
 author: Matthias Kretschmann
 
 date: 2008-08-22 18:50:31+00:00
-wordpress_id: 142
+  
 category: photography
 tags:
     - aperture
@@ -16,7 +16,7 @@ tags:
 coinhive: true
 ---
 
-![Niepce's Aperture Vault](/media/niepces_aperture_vault256.png)When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software.
+![Niepce's Aperture Vault](../media/niepces_aperture_vault256.png)When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software.
 
 So in this quick tutorial I will show you how to create an encrypted Aperture Vault by using Sparse Bundle Disk Images and by utilizing tools built into Mac OS X. All this can be done in two simple steps.
 
@@ -26,7 +26,7 @@ First you have to create the encrypted disk image where the Aperture Vault will
 
 Be sure there is no device or volume selected in the sidebar and click on the New Image icon in the toolbar. Set a file name of the disk image and the Volume Name (the name of the mounted disk image on your desktop). Change all the settings as seen in the following screenshot. Be sure to select sparse bundle disk image as the Image Format before changing the volume size. This way you can set a bigger volume size than your physical disk space available on your hard drive. After creation the disk image won't be as big as you have set it with volume size. It will grow as you write files to it. For maximum security (but slower performance) select 256-bit AES encryption in the Encryption drop down menu:
 
-![](/media/securevault3.png)
+![](../media/securevault3.png)
 
 Finally set the destination where you want to have the disk image created. To make it all mobile choose your mobile hard drive as destination. After clicking Create you will be asked to provide a password for encrypting the disk image. Be sure to click on the little key icon to use Mac OS X built in password generator. Generate a new extra long password. Type in your new password manually in the Verify field and be sure to check "Remember password in my keychain". This is the only time you have to provide the password since it will be saved in your keychain after clicking OK.
 
@@ -40,15 +40,15 @@ Now your newly created sparse bundle disk image ahould be mounted on your deskto
 
 Now go to Aperture, choose the Projects tab and click on the little gear wheel at the bottom of the sidebar and choose "Add Vault" from the opened menu.
 
-![](/media/securevault2.png)
+![](../media/securevault2.png)
 
 In the opened dialogue select your mounted disk image under the devices section in your sidebar, give it a name and click Add.
 
-![](/media/securevault4.png)
+![](../media/securevault4.png)
 
 The new Vault will be added to your Vault list and is now to ready to be updated.
 
-![](/media/securevault5.png)
+![](../media/securevault5.png)
 
 Just click the little iSync-style arrow beside your Vault and the Vault be written to your encrypted disk image. When finished you can eject the disk image. It can now be mounted again just with the correct password which is stored in your keychain so won't even recognize the encryption. Of course, when you try to mount this disk image on another mac you have to type in the password or import the entry from your keychain.
 
diff --git a/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md
index eee80418..5bb58ed5 100644
--- a/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md
+++ b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md
@@ -5,14 +5,14 @@ title: Noise Ninja finally available for Apple Aperture
 author: Matthias Kretschmann
 
 date: 2008-08-22 14:51:02+00:00
-wordpress_id: 120
+  
 categories:
 - photography
 tags:
 - aperture
 ---
 
-![image](/media/aperture-plugin128.png)Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above.
+![image](../media/aperture-plugin128.png)Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above.
 
 The results are just as amazing as they are with the Photoshop plug-in. But the Aperture plug-in uses a streamlined interface which differs from the photoshop version. But the functionality is the same.
 
diff --git a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md
index 79515d82..262577e6 100644
--- a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md
+++ b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md
@@ -5,22 +5,22 @@ title: The Kremalicious MarsEdit Style
 author: Matthias Kretschmann
 
 date: 2008-08-22 17:04:19+00:00
-wordpress_id: 122
+  
 categories:
 - goodies
 ---
 
-![The Kremalicious MarsEdit Style](/media/marsedit_kremalicious.png)Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable.
+![The Kremalicious MarsEdit Style](../media/marsedit_kremalicious.png)Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable.
 
 A while ago I've made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website:
 
-[![The Kremalicious MarsEdit Style](/media/marsedit_kremalicious_big.png)](/media/marsedit_kremalicious_big.png)
+[![The Kremalicious MarsEdit Style](../media/marsedit_kremalicious_big.png)](../media/marsedit_kremalicious_big.png)
 
 Here's how to apply the style for your blog preview in MarsEdit:
 
 In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog where you want to have my style applied to and choose Edit Preview Template. The Preview Template editor should open where you can customize the style of the preview with the css instructions in the header.
 
-Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](/media/marsedit_kremalicious.txt):
+Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](../media/marsedit_kremalicious.txt):
 
 
 {% highlight html %}
diff --git a/content/posts/2008-08-26-icy-box-icons.md b/content/posts/2008-08-26-icy-box-icons.md
index e1478526..52643aaa 100644
--- a/content/posts/2008-08-26-icy-box-icons.md
+++ b/content/posts/2008-08-26-icy-box-icons.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Icy Box Icons
-image: Teaser-Icy-Box.jpg
-download: icybox_by_kremalicious.zip
+image: ../media/Teaser-Icy-Box.jpg
+download: ../media/icybox_by_kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2008-08-26 19:16:38+00:00
-wordpress_id: 146
+  
 categories:
 - goodies
 tags:
@@ -32,4 +32,4 @@ The whole package includes 7 icons either packed in a nice tagged iContainer for
   * Leopard ready (512x512)
   * including 7 icons with 2 Time Machine versions
 
-[![Icy Box Icons](/media/icybox_teaser2_small.png)](/media/icybox_teaser2.jpg)
+[![Icy Box Icons](../media/icybox_teaser2_small.png)](../media/icybox_teaser2.jpg)
diff --git a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md
index 8bd04701..92eb8394 100644
--- a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md
+++ b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md
@@ -5,20 +5,20 @@ title: 'Architect and Façade: Theming For Leopard'
 author: Matthias Kretschmann
 
 date: 2008-08-28 09:54:06+00:00
-wordpress_id: 156
+  
 category: design
 tags:
     - osx
     - macos
 ---
 
-![Architect icon](/media/architect-icon.jpg)There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue.
+![Architect icon](../media/architect-icon.jpg)There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue.
 
 [SlightlyPretentious](http://www.slightlypretentious.com/) announced its "Theming made easy"-application Architect is coming as a public beta <strike>next sunday (is it 08/31 or 09/07?)</strike> on Wednesday, September 3rd. Icon Designer Laurent Baumann already posted [a new sweet application icon](http://www.flickr.com/photos/avetenebrae/2669353476/) for this app a while ago and we can expect a nice and good looking solution for theming and customization in Leopard.
 
 Head over to [the Screencast](http://www.slightlypretentious.com/) and see Architect and its UI in action.
 
-![Architect UI](/media/architect-ui.png)
+![Architect UI](../media/architect-ui.png)
 
 While Architect will help you customizing Leopards UI and building themes out of your modifications, Façade ([Laurent's icon of it](http://www.flickr.com/photos/avetenebrae/2665823420/in/photostream/)) will help you switch (and manage?) the themes. But currently there's no word on the [SlightlyPretentious](http://www.slightlypretentious.com/) website about this application.
 
@@ -29,4 +29,4 @@ Still no sight of Façade anywhere except the [note of a Lead Developer change](
 
 But meanwhile another theme manager was released: [Magnifique](http://magnifique.pcwizcomputer.com/), available as a free download.
 
-![Magnifique UI](/media/magnifique-ui.png)
+![Magnifique UI](../media/magnifique-ui.png)
diff --git a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md
index 0297efd6..fb9ee98a 100644
--- a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md
+++ b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md
@@ -5,12 +5,12 @@ title: Canon EOS 50D And New Lens Officially Announced
 author: Matthias Kretschmann
 
 date: 2008-08-28 11:28:33+00:00
-wordpress_id: 168
+  
 categories:
 - photography
 ---
 
-[![EOS 50D back](/media/eos_50D_front_thumb.png)](/media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says.
+[![EOS 50D back](../media/eos_50D_front_thumb.png)](../media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says.
 
 The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality. 
 
@@ -18,12 +18,12 @@ The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 me
 
 The "EOS Integrated Cleaning Systems" gets a new fluorine layer and now works in three steps to clean the sensor. With 35 metering zones and 9 cross type Autofocus zones the Autofocus specifications are the same as found in the EOS 40D.
 
-[![EOS 50D back](/media/eos_50D_back_thumb.png)](/media/eos_50D_back.png)The basic ISO range goes from 100 - 3200 while those values can be "boosted" to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode.
+[![EOS 50D back](../media/eos_50D_back_thumb.png)](../media/eos_50D_back.png)The basic ISO range goes from 100 - 3200 while those values can be "boosted" to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode.
 
 The EOS 50D is prized at US$1399 (1299€) for just the body and it will be available as a kit with the EF 28-135 3.5-5.6 IS USM for US$1599.
 
 If you're interested in all the details and specifications have a look at [Bob Atkins article about the official announcement of the EOS 50D](http://www.bobatkins.com/photography/digital/canon_eos_50D.html).
 
-[![EF-S 18-200/3.5-5.6 IS](/media/efs_18-200_thumb.png)](/media/efs_18-200.png)Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US$699 (599€).
+[![EF-S 18-200/3.5-5.6 IS](../media/efs_18-200_thumb.png)](../media/efs_18-200.png)Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US$699 (599€).
 
 All the specifications for this new lens are available in [an article by Bob Atkins](http://www.bobatkins.com/photography/reviews/canon_efs_18-200_is.html) too.
diff --git a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
index 6432f01a..be3f3f82 100644
--- a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
+++ b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
@@ -3,10 +3,10 @@ layout: post
 
 title: 'A New Browser Is Coming: Google Chrome'
 author: Matthias Kretschmann
-image: googlechrome.png
+image: ../media/googlechrome.png
 
 date: 2008-09-01 20:40:38+00:00
-wordpress_id: 197
+  
 
 categories:
 - design
@@ -30,7 +30,7 @@ Update 2: Google Chrome can now be downloaded for Windows from [google.com/chrom
 
 Update 3: Google Chrome seems to have problems with some of my transparent PNGs:
 
-![Chrome UI](/media/chrome-ui.png)
+![Chrome UI](../media/chrome-ui.png)
 
 Update 4: There are some nice articles about various aspects of Chrome available in the web:
 
diff --git a/content/posts/2008-09-23-a-long-time-ago.md b/content/posts/2008-09-23-a-long-time-ago.md
index 9fcacc44..1c7b41bc 100644
--- a/content/posts/2008-09-23-a-long-time-ago.md
+++ b/content/posts/2008-09-23-a-long-time-ago.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: A Long Time Ago...
-image: A-Long-Time-Ago.jpg
+image: ../media/A-Long-Time-Ago.jpg
 author: Matthias Kretschmann
 
 date: 2008-09-23 20:33:48+00:00
-wordpress_id: 1905
+  
 category: photos
 tags:
     - mac
diff --git a/content/posts/2008-09-23-futurama-mars-university-wallpaper.md b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md
index 9209a493..3181563b 100644
--- a/content/posts/2008-09-23-futurama-mars-university-wallpaper.md
+++ b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md
@@ -2,11 +2,11 @@
 layout: post
 
 title: Futurama Mars University Wallpaper
-image: Teaser-Mars-U.jpg
+image: ../media/Teaser-Mars-U.jpg
 author: Matthias Kretschmann
 
 date: 2008-09-23 23:22:16+00:00
-wordpress_id: 256
+  
 category: goodies
 tags:
     - wallpaper
diff --git a/content/posts/2008-10-23-coffee-cup-icon.md b/content/posts/2008-10-23-coffee-cup-icon.md
index fb97e297..9a617d7c 100644
--- a/content/posts/2008-10-23-coffee-cup-icon.md
+++ b/content/posts/2008-10-23-coffee-cup-icon.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Coffee Cup Icon
-image: Teaser-Coffee-Cup-Icon.jpg
-download: coffee_cup_by_kremalicious.zip
+image: ../media/Teaser-Coffee-Cup-Icon.jpg
+download: ../media/coffee_cup_by_kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2008-10-23 14:59:23+00:00
-wordpress_id: 1817
+  
 categories:
 - goodies
 tags:
diff --git a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
index d2ea267e..1ad8d914 100644
--- a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
+++ b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
@@ -3,10 +3,10 @@ layout: post
 
 title: The Finest Coffee Cups - Most Incredible Coffee Icons On The Web
 author: Matthias Kretschmann
-image: coffee-cup-icon-kremalicious.png
+image: ../media/coffee-cup-icon-kremalicious.png
 
 date: 2008-10-23 02:23:39+00:00
-wordpress_id: 277
+  
 categories:
 - design
 ---
@@ -23,7 +23,7 @@ Please note that these icons are the property of their respective owners and you
 
 A bunch of colorful cups of coffee.
 
-[![Coffee Cup icons by Susumo Yoshida](/media/coffee-showcase-susumo.png)](http://www.mcdodesign.com/?page_id=22)
+[![Coffee Cup icons by Susumo Yoshida](../media/coffee-showcase-susumo.png)](http://www.mcdodesign.com/?page_id=22)
 
 
 
@@ -32,7 +32,7 @@ A bunch of colorful cups of coffee.
 
 A hyperrealistic icon from Vegrafik
 
-[![CoffeeCon icon by Vegrafik](/media/coffee-showcase-vegrafik.png)](http://macthemes2.net/forum/viewtopic.php?id=16789993)
+[![CoffeeCon icon by Vegrafik](../media/coffee-showcase-vegrafik.png)](http://macthemes2.net/forum/viewtopic.php?id=16789993)
 
 
 
@@ -41,7 +41,7 @@ A hyperrealistic icon from Vegrafik
 
 In a fit of megalomania I declared my icon as incredible and included it here. Originally I've made the coffee cup for the donations button on kremalicious.com.
 
-[![Coffee Cup Icon by kremalicious](/media/coffee-showcase-kretschmann.png)](/coffee-cup-icon)
+[![Coffee Cup Icon by kremalicious](../media/coffee-showcase-kretschmann.png)](/coffee-cup-icon)
 
 
 
@@ -50,7 +50,7 @@ In a fit of megalomania I declared my icon as incredible and included it here. O
 
 The one and only Mac OS X system replacement icon set has some coffee folders too.
 
-[![Coffee folders from Agua Icons by David Lanham](/media/coffee-showcase-lanham.png)](http://dlanham.com/art/agua/)
+[![Coffee folders from Agua Icons by David Lanham](../media/coffee-showcase-lanham.png)](http://dlanham.com/art/agua/)
 
 
 
@@ -59,14 +59,14 @@ The one and only Mac OS X system replacement icon set has some coffee folders to
 
 Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack with bigger sizes so it's just 128px.
 
-[![Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla](/media/coffee-showcase-brasgalla.png)](http://iconfactory.com/freeware/preview/woa3)
+[![Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla](../media/coffee-showcase-brasgalla.png)](http://iconfactory.com/freeware/preview/woa3)
 
 
 
 ## Starbucks coffee icon by Rok Benedik
 
 
-[![Starbucks coffee icon by Benedik](/media/coffee-showcase-benedik.png)](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293)
+[![Starbucks coffee icon by Benedik](../media/coffee-showcase-benedik.png)](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293)
 
 
 
@@ -75,7 +75,7 @@ Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack wit
 
 Also Jonas used coffee as the metaphor for the work folder (supposedly) and made clear he likes very big coffee cups.
 
-[![Coffee folders from the Maji sets by Jonas Rask](/media/coffee-showcase-rask1.png)](http://www.jonasraskdesign.com/medias/medias.html)
+[![Coffee folders from the Maji sets by Jonas Rask](../media/coffee-showcase-rask1.png)](http://www.jonasraskdesign.com/medias/medias.html)
 
 
 
@@ -84,14 +84,14 @@ Also Jonas used coffee as the metaphor for the work folder (supposedly) and made
 
 Does this application need any introduction? Although not released yet the new web-coding application from MacRabbit drew a lot of attention. The icon is one of the reasons for that.
 
-[![Espresso icon by MacRabbit](/media/coffee-showcase-macrabbit.png)](http://macrabbit.com/espresso/)
+[![Espresso icon by MacRabbit](../media/coffee-showcase-macrabbit.png)](http://macrabbit.com/espresso/)
 
 ## Coffee folders from the Pry system sets by Jonas Rask
 
 
 Another folder-combined-with-coffee icon by Jonas.
 
-[![Coffee folders from the Pry system sets by Jonas Rask](/media/coffee-showcase-rask2.png)](http://www.jonasraskdesign.com/medias/medias.html)
+[![Coffee folders from the Pry system sets by Jonas Rask](../media/coffee-showcase-rask2.png)](http://www.jonasraskdesign.com/medias/medias.html)
 
 
 
@@ -100,7 +100,7 @@ Another folder-combined-with-coffee icon by Jonas.
 
 A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) on the web. Created for Windows so the icons are just 256px in size.
 
-[![Coffee icons from Office Space icon set by VisualPharm](/media/coffee-showcase-visualpharm.png)](http://www.visualpharm.com/office_space.html)
+[![Coffee icons from Office Space icon set by VisualPharm](../media/coffee-showcase-visualpharm.png)](http://www.visualpharm.com/office_space.html)
 
 
 
@@ -109,14 +109,14 @@ A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop
 
 An icon set made in collaboration between [Alejandro Lopez](http://www.dimensionofdeskmod.net/medias/) & [Sergio Ruiz](http://www.camtessadesign.com/descargas/ver/the_coffee_shop) with icons related to a coffee shop.
 
-[![The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz](/media/coffee-showcase-lopezruiz.png)](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309)
+[![The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz](../media/coffee-showcase-lopezruiz.png)](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309)
 
 
 
 ## Espresso icon by Iiro Jäppinen
 
 
-[![Espresso icon by Iiro Jäppinen](/media/coffee-showcase-jaeppinen.png)](http://iirojappinen.com/medias.html)
+[![Espresso icon by Iiro Jäppinen](../media/coffee-showcase-jaeppinen.png)](http://iirojappinen.com/medias.html)
 
 
 
@@ -125,7 +125,7 @@ An icon set made in collaboration between [Alejandro Lopez](http://www.dimension
 
 Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would make a good one. The detail of the cup is stunning.
 
-[![Coffee Wallpaper by Michael Flarup](/media/coffee-showcase-flarup.png)](http://pixelresort.com/wallpapers/)
+[![Coffee Wallpaper by Michael Flarup](../media/coffee-showcase-flarup.png)](http://pixelresort.com/wallpapers/)
 
 
 
@@ -134,7 +134,7 @@ Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would
 
 Bean is a free word processor for Mac OS X and Laurent Baumann included a nice coffee cup in the application icon for it.
 
-[![Bean icon by Laurent Baumann](/media/coffee-showcase-baumann.png)](http://www.bean-osx.com/Bean.html)
+[![Bean icon by Laurent Baumann](../media/coffee-showcase-baumann.png)](http://www.bean-osx.com/Bean.html)
 
 
 
@@ -143,7 +143,7 @@ Bean is a free word processor for Mac OS X and Laurent Baumann included a nice c
 
 Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 128px size maximum. Maybe you can [persuade mat-u to update this icon with bigger sizes.](http://www.mat-u.com/)
 
-[![Have A Break icons by mat-u](/media/coffee-showcase-matu.png)](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598)
+[![Have A Break icons by mat-u](../media/coffee-showcase-matu.png)](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598)
 
 
 
@@ -152,7 +152,7 @@ Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 12
 
 Apple uses a nice coffee cup in their Java applications which can be found in the Utilities folder. Thanks to [David](http://dlanham.com/) for pointing this out.
 
-![Java Application icons by Apple](/media/coffee-showcase-apple.png)
+![Java Application icons by Apple](../media/coffee-showcase-apple.png)
 
 
 
@@ -161,7 +161,7 @@ Apple uses a nice coffee cup in their Java applications which can be found in th
 
 Trevor Kay made the new icon for Caffeine. This application prevents your Mac from automatically going to sleep. Trevor also made [some additional icons for Caffeine](http://God-X.deviantart.com/art/Caffeine-Replacement-Icons-75619389) although the coffee cup looks pretty much the same as the one from Apple's Java application icons.
 
-[![Caffeine icon by Trevor Kay](/media/coffee-showcase-kaycaffeine.png)](http://lightheadsw.com/caffeine/)
+[![Caffeine icon by Trevor Kay](../media/coffee-showcase-kaycaffeine.png)](http://lightheadsw.com/caffeine/)
 
 
 
@@ -170,7 +170,7 @@ Trevor Kay made the new icon for Caffeine. This application prevents your Mac fr
 
 Some comic style icons which deviate from the realism of all the other coffee icons. Sadly just available in 128px size.
 
-[![Coffee and Tea icons by Kate England](/media/coffee-showcase-england.png)](http://iconfactory.com/freeware/preview/cofe)
+[![Coffee and Tea icons by Kate England](../media/coffee-showcase-england.png)](http://iconfactory.com/freeware/preview/cofe)
 
 
 
@@ -179,7 +179,7 @@ Some comic style icons which deviate from the realism of all the other coffee ic
 
 Dave made an icon set for the Iconfactory inspired by the classic sci-fi television series of the 70's and included a Moon Coffee cup. Also just in 128px size.
 
-[![Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla](/media/coffee-showcase-brasgalla2.png)](http://iconfactory.com/freeware/preview/1999)
+[![Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla](../media/coffee-showcase-brasgalla2.png)](http://iconfactory.com/freeware/preview/1999)
 
 
 
@@ -188,7 +188,7 @@ Dave made an icon set for the Iconfactory inspired by the classic sci-fi televis
 
 Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times](http://www.acrylicapps.com/times/) uses a gorgeous icon made by Mikio Inose.
 
-[![Times Application Icon by Mikio Inose](/media/coffee-showcase-times.png)](http://www.mikworks.com/clientwork/times/)
+[![Times Application Icon by Mikio Inose](../media/coffee-showcase-times.png)](http://www.mikworks.com/clientwork/times/)
 
 
 
@@ -197,7 +197,7 @@ Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times](
 
 One delicious full and one empty cappuccino cup re available in this icon set made by Creative 9 Design. Available just in 256px from their [blog](http://www.c9-d.com/blog/view/63).
 
-[![Do you love Cappuccino? by Creative 9 Design](/media/coffee-showcase-lovecappu.png)](http://www.c9-d.com/blog/view/63)
+[![Do you love Cappuccino? by Creative 9 Design](../media/coffee-showcase-lovecappu.png)](http://www.c9-d.com/blog/view/63)
 
 
 
@@ -206,7 +206,7 @@ One delicious full and one empty cappuccino cup re available in this icon set ma
 
 Not a coffee cup but also very coffee related is this awesome Cappuccino machine icon (although it shows an Espresso machine) made by [Sofa](http://www.madebysofa.com) for the Cappuccino framework.
 
-[![Cappuccino Framework Icon by Sofa](/media/coffee-showcase-cappuccinosofa.png)](http://cappuccino.org/)
+[![Cappuccino Framework Icon by Sofa](../media/coffee-showcase-cappuccinosofa.png)](http://cappuccino.org/)
 
 
 
@@ -217,16 +217,16 @@ Not a coffee cup but also very coffee related is this awesome Cappuccino machine
 
 Finally here're some nice high quality tutorials for you to help you build your own coffee cup.
 
-  * ![](/media/coffee-showcase-tut-psdtuts.png)[Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/)
+  * ![](../media/coffee-showcase-tut-psdtuts.png)[Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/)
 Collis from [psdtuts](http://psdtuts.com) made a nice tutorial with a similar perspective as found in [my Coffee Cup Icon](http://www.kremalicious.com/goodies/).
 
-  * ![](/media/coffee-showcase-tut-houle.png)[Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/)
+  * ![](../media/coffee-showcase-tut-houle.png)[Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/)
 Photoshop tutorial by Andrew Houle for creating a coffee cup icon.
 
-  * ![](/media/coffee-showcase-tut-vectuts.png)[Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/)
+  * ![](../media/coffee-showcase-tut-vectuts.png)[Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/)
 Peter Anglea with a nice vector tutorial using the open source vector app Inkscape.
 
-  * ![](/media/coffee-showcase-tut-abduzeedo.png)[Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps)
+  * ![](../media/coffee-showcase-tut-abduzeedo.png)[Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps)
 Not an icon tutorial but Fabio Sasso achieves some awesome light effects combined with the coffee cup from the [Office Space icon set](http://www.visualpharm.com/office_space.html).
 
 
diff --git a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md
index 4b57f1ed..70879947 100644
--- a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md
+++ b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md
@@ -3,10 +3,10 @@ layout: post
 
 title: The Definite Guide To Watermarks In Apple Aperture
 author: Matthias Kretschmann
-image: watermark_aperture.jpg
+image: ../media/watermark_aperture.jpg
 
 date: 2008-10-26 16:05:58+00:00
-wordpress_id: 318
+  
 categories:
 - photography
 tags:
@@ -27,7 +27,7 @@ In this article I will lay out every way I've found to add watermarks to your im
 
 Aperture has built-in support for watermarking your images on export. But you have to create a watermark image in a bitmap graphic editor like [Photoshop](http://www.adobe.com/products/photoshop/photoshop/), [Pixelmator](http://www.pixelmator.com/) or [Acorn](http://flyingmeat.com/acorn/) before you can start adding watermarks. But I've written a detailed article about how to use this feature of Aperture back in May 2008 named [HowTo: Use high-quality watermarks in your images with Aperture 2.1](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/). In short, you have to create your watermark image first and then define it in a new export preset. In the end all images exported with this preset will have your defined watermark image on them. If you want to watermark your images the Aperture way be sure to [check out my tutorial](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/).
 
-![Aperture Watermark](/media/watermark_8.png)
+![Aperture Watermark](../media/watermark_8.png)
 
 This way is perfect if you want to watermark a lot of images at once or if your copyright info doesn't change often. And this works with Aperture's Web Journal or Web Page feature if you add a watermark image to the export presets for that. Also this works with any other export plug-in in Aperture which utilizes the export presets, like the [FlickrExport](http://connectedflow.com/flickrexport/aperture/) plug-in. You just have to create e.g. a flickr export preset, define your watermark image there and chose it inside of FlickrExport from the export preset dropdown list.
 
@@ -57,7 +57,7 @@ Because of Aperture's workflow design you're always free to open up your image i
 
 Now you can just right click or ctrl + click on every image to open the context menu and choose Edit With whereas the first entry will be your external editor set in the preferences. Aperture will automatically render your image creating a new file and opens that up. Just add a new text layer in your external editor, type in your preferred text and save the file from there. Aperture will update with the changes accordingly.
 
-![Aperture Watermark example 5](/media/watermark_5.png)
+![Aperture Watermark example 5](../media/watermark_5.png)
 
 
 
@@ -83,7 +83,7 @@ But since Aperture always creates a psd or tiff file for that you will end up wi
 
 But it has some powerful features in terms of watermarking: It can read out some IPTC fields to use the text as your copyright text, it is capable of saving presets and you can open several images at once in the plug-in window. So it works similar to Aperture's built-in watermarking feature but gives you full control over the watermark look without leaving Aperture.
 
-![Aperture BorderFX](/media/aperture_borderfx.png)
+![Aperture BorderFX](../media/aperture_borderfx.png)
 
 
 
@@ -101,7 +101,7 @@ But you can't see your changes made in the plug-in on the images in your library
 
 With the release of Aperture 2.1 and its Edit Plug-In architecture Apple also released some sample plug-ins which aren't included in Aperture (just the Dodge & Burn plug-in is). But you can easily [download it from Apple’s Developer Connection website without registration](http://developer.apple.com/samplecode/BordersAndTitles/index.html) for free.
 
-![Borders & Titles](/media/aperture_bt.png)
+![Borders & Titles](../media/aperture_bt.png)
 
 
 
@@ -118,7 +118,7 @@ As with every Edit Plug-In every time you fire up an image with this plug-in Ape
 
 [Impression](http://www.bluecrowbar.com/software/impressionaperture/) is an Aperture Edit Plug-In from [Blue Crowbar Software](http://www.bluecrowbar.com) released in Sept. 2009. The developer claims it's mainly targeted for those people who want to have a copy of their watermarked image within Aperture. Also there's a nice blog post by the developer lining out [why he thinks this plug-in beats Aperture's builtin watermarks.](http://www.bluecrowbar.com/blog/posts/impression-for-aperture.html)
 
-![Impression Watermark Plug-In](/media/aperture-impression.png)
+![Impression Watermark Plug-In](../media/aperture-impression.png)
 
 This plug-in is pretty powerful and probably the best choice for watermarking your images in Aperture through an Edit Plug-In workflow. Watermarking multiple photos at once is also possible and you can use existing PSD or PNG images as a watermark image as well as from a RTF text file. Apart from the functionality it also has a quite beautiful UI with the controls laying over your image.
 
diff --git a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md
index 513be3ce..0dc3120a 100644
--- a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md
+++ b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md
@@ -5,7 +5,7 @@ title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+'
 author: Matthias Kretschmann
 
 date: 2008-12-11 22:59:06+00:00
-wordpress_id: 344
+  
 
 categories:
 - design
@@ -19,7 +19,7 @@ redirect_from:
     - /2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/
 ---
 
-![Wordpress Logo by kremalicious](/media/wordpress-logo.png)
+![Wordpress Logo by kremalicious](../media/wordpress-logo.png)
 Sure enough I've upgraded immediately when [Wordpress 2.7 was released](http://wordpress.org/development/2008/12/coltrane/). Among all the other things that changed in this new version the comments functions got a massive overhaul. But the [new comment loop](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#The_Comments_Loop) with the [new function `<?php wp_list_comments(); ?>`](http://codex.wordpress.org/Template_Tags/wp_list_comments) lacks the ability to quickly set a custom default gravatar or avatar image. But with some help of the functions.php file we can set the default gravatar image in the Discussion settings in the Wordpress backend.
 
 Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file:
@@ -55,7 +55,7 @@ But we can use the functions.php file in your template directory and add some li
 
 Just set a name for your custom Gravatar image to show up beside the image in the Wordpress back-end. The code above assumes you have your custom default gravatar image inside a folder called images inside your template directory. Change it to your environment if neccessary. After that a new entry in the Wordpress backend under Settings > Discussions will appear with the custom image specified:
 
-![custom gravatar](/media/custom-gravatar.jpg)
+![custom gravatar](../media/custom-gravatar.jpg)
 
 And you can adjust the displayed size of the gravatar image by adding a parameter to `<?php wp_list_comments(); ?>` function in your comments.php file:
 
diff --git a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md
index c59a8f7a..9994cae4 100644
--- a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md
+++ b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md
@@ -5,7 +5,7 @@ title: 'HowTo: Styling Author Comments With Wordpress 2.7+'
 author: Matthias Kretschmann
 
 date: 2008-12-13 16:47:43+00:00
-wordpress_id: 360
+  
 
 categories:
 - design
@@ -16,7 +16,7 @@ tags:
 coinhive: true
 ---
 
-![Wordpress Logo by kremalicious](/media/wordpress-logo.png)
+![Wordpress Logo by kremalicious](../media/wordpress-logo.png)
 Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff. As [I've written before](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/), the comment functionality changed dramatically with Wordpress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again. Beside other things this includes [Gravatar styling](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/) and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with Wordpress 2.7 and above.
 
 Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code:
diff --git a/content/posts/2009-01-05-the-mac-in-futurama.md b/content/posts/2009-01-05-the-mac-in-futurama.md
index 2147d0f7..485e74bb 100644
--- a/content/posts/2009-01-05-the-mac-in-futurama.md
+++ b/content/posts/2009-01-05-the-mac-in-futurama.md
@@ -5,7 +5,7 @@ title: The Mac in Futurama
 author: Matthias Kretschmann
 date: 2009-01-05 03:14:45+00:00
 
-image: futurama-mac-teaser.png
+image: ../media/futurama-mac-teaser.png
 category: design
 tags:
     - futurama
@@ -13,8 +13,7 @@ tags:
 
 coinhive: true
 
-slug: the-mac-in-futurama
-wordpress_id: 440
+  
 ---
 
 Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).
@@ -25,232 +24,120 @@ For orientation: I've followed the original four season production cycle and not
 
 _All screens (C) 1999 by Twentieth Century Fox Film Corp._
 
-
-
 ## Season 1
 
-
 ## 1ACV02 - The Series Has Landed
 
-
-
 The moon farmer introduces his three robot daughters. One of them is named "Daisy May 128k" as a reference to the first [Macintosh 128k](http://en.wikipedia.org/wiki/Macintosh_128K).
-![Daisy May 128k](/media/futurama-mac-01.png)
-
-
+![Daisy May 128k](../media/futurama-mac-01.png)
 
 ## 1ACV05 - Fear Of A Bot Planet
 
-
-
 Indeed the episode with the most Mac references. The Planet Express crew have to deliver a package to a planet settled by separatist robots. And guess what their favorite OS is?
 
 The sound to start the daily human hunt is the [Mac startup chime](http://musicthing.blogspot.com/2005/05/tiny-music-makers-pt-4-mac-startup.html) composed by [Jim Reekes ](http://en.wikipedia.org/wiki/Jim_Reekes) and first used in 1991 on the [Macintosh Quadra 700](http://en.wikipedia.org/wiki/Macintosh_Quadra_700). Maybe the [Chime of Death](http://en.wikipedia.org/wiki/Chimes_of_Death) would be more suitable for that.
-![Mac startup chime](/media/futurama-mac-02.png)
+![Mac startup chime](../media/futurama-mac-02.png)
 
 The judge is a not so friendly Macintosh 128k with a classic Mac OS Finder face. It uses Mac OS interface elements while judging and freezing at it.
-![Macintosh 128k judge](/media/futurama-mac-03.png)
+![Macintosh 128k judge](../media/futurama-mac-03.png)
 
 But the robots have some cool computer voodoo to get him back judging without the need of a restart.
-![Macintosh 128k judge freeze](/media/futurama-mac-04.png)
-
-This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). ![Robot elders iBook colors](/media/futurama-mac-05.png)
-
+![Macintosh 128k judge freeze](../media/futurama-mac-04.png)
 
+This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). ![Robot elders iBook colors](../media/futurama-mac-05.png)
 
 ## 1ACV10 A Flight to Remember
 
-
-
 The robot guy on the bar mixes sad Bender a drink out of Jägermeister and some Pennzoil product. He is named iZac as a reference to the Apple iMac or more generally for the "i"-brand. Beside that iZac is written in kind of the same font (variant of [ITC Garamond](http://new.myfonts.com/fonts/itc/garamond/), thanks [Schoschie](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-48831)) as in [Apple's Think Different tagline and campaigns](http://web.archive.org/web/20010228171255/www.apple.com/thinkdifferent/). Furthermore (but non-Mac related) iZac is also a reference to Isaac the bartender from the TV series love boat from 1977, as ["yeah" pointed out in the comments](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-37416). Thanks yeah!
-![iZac](/media/futurama-mac-06.png)
-
-
+![iZac](../media/futurama-mac-06.png)
 
 ## 1ACV11 Mars University
 
-
-
-The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. ![spying at a Macintosh 128k](/media/futurama-mac-07.png)
-
-
+The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. ![spying at a Macintosh 128k](../media/futurama-mac-07.png)
 
 ## 1ACV12 - When Aliens Attack
 
-
-
-The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. ![Single Female Lawyer](/media/futurama-mac-08.png)
-
-
+The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. ![Single Female Lawyer](../media/futurama-mac-08.png)
 
 ## Season 2
 
-
-
-
-
 ## 2ACV09 A Bicyclops Built For Two
 
+Bender choses a disguise while being in the Internet. He does this with a Mac style menu. ![Internet disguise](../media/futurama-mac-09.png)
 
-
-Bender choses a disguise while being in the Internet. He does this with a Mac style menu. ![Internet disguise](/media/futurama-mac-09.png)
-
-Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. ![Alcasar](/media/futurama-mac-10.png)
-
-
+Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. ![Alcasar](../media/futurama-mac-10.png)
 
 ## 2ACV15 The Problem With Popplers
 
-
-
-Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. ![Searching Popplers](/media/futurama-mac-11.png)
-
-
+Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. ![Searching Popplers](../media/futurama-mac-11.png)
 
 ## 2ACV17 War Is The H-Word
 
-
-
-Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. ![iHawk](/media/futurama-mac-12.png)
-
-
+Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. ![iHawk](../media/futurama-mac-12.png)
 
 ## Season 3
 
-
-
-
-
 ## 3ACV04 The Luck Of The Fryrish
 
-
-
-Again the crew searches the Internet with a classic Mac OS interface. ![Internet Mac OS style](/media/futurama-mac-13.png)
-
-
+Again the crew searches the Internet with a classic Mac OS interface. ![Internet Mac OS style](../media/futurama-mac-13.png)
 
 ## 3ACV06 Bendless Love
 
-
-
-The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. ![Mac OS Bending School](/media/futurama-mac-14.png)
-
-
+The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. ![Mac OS Bending School](../media/futurama-mac-14.png)
 
 ## 3ACV15 I Dated A Robot
 
-
-
 Sure enough, Prof. Farnsworth's blank robots are Mac formatted.
-![Internet Mac OS style](/media/futurama-mac-15.png)
-
-Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. ![Downloading Monroe-Bot](/media/futurama-mac-16.png)
-
+![Internet Mac OS style](../media/futurama-mac-15.png)
 
+Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. ![Downloading Monroe-Bot](../media/futurama-mac-16.png)
 
 ## Futurama 3ACV21 Future Stock
 
-
-
-Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI).  ![1984 ad parody](/media/futurama-mac-19.png)
-
-
+Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). ![1984 ad parody](../media/futurama-mac-19.png)
 
 ## Season 4
 
-
-
-
-
 ## 4ACV06 Bender Should Not Be Allowed On TV
 
-
-
 The president of the TV network (who seems to be just a plain non-Mac laptop), has some sort of QuickTime Player running on him.
-![President of Fox](/media/futurama-mac-17.png)
-
-
+![President of Fox](../media/futurama-mac-17.png)
 
 ## 4ACV08 Crimes Of The Hot
 
-
-
-iZac again. ![iZac on Galapagos Princess](/media/futurama-mac-18.png)
-
-
+iZac again. ![iZac on Galapagos Princess](../media/futurama-mac-18.png)
 
 ## Season 5
 
-
-
-
-
 ## 5ACV01 Bender's Big Score Part 1
 
+Bender is infected by the Scammers' obedience virus called iObey. ![iObey Obedience Virus](../media/futurama-mac-20.png)
 
+## 5ACV15 Into The Wild Green Yonder Part 4
 
-Bender is infected by the Scammers' obedience virus called iObey. ![iObey Obedience Virus](/media/futurama-mac-20.png)
-
-
-
-##  5ACV15 Into The Wild Green Yonder Part 4
-
-
-
-The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. ![iZac in audience](/media/futurama-mac-21.png)
-
-
-
+The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. ![iZac in audience](../media/futurama-mac-21.png)
 
 ## Futurama Stuff For Your Mac
 
-
-
-
-
-![Futurama Vol. 1-6 by Gedeon Maheux](/media/futurama_gedeon.png)[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1)
+![Futurama Vol. 1-6 by Gedeon Maheux](../media/futurama_gedeon.png)[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1)
 Amazing icons made by Iconfactory's [Gedeon Maheux](http://gedblog.com/). The recent [Volume 6 release](http://iconfactory.com/freeware/preview/fut6) also comes with some nice wallpapers showing silhouettes of the Planet Express crew members. [Vol.2](http://iconfactory.com/freeware/preview/fut2), [Vol.3](http://iconfactory.com/freeware/preview/fut3), [Vol.4](http://iconfactory.com/freeware/preview/fut4), [Vol.5](http://iconfactory.com/freeware/preview/fut5), [Vol.6](http://iconfactory.com/freeware/preview/fut6)
 Also [a search for Futurama in the freeware section on Iconfactory.com](http://iconfactory.com/search/freeware/futurama) is always a good idea...
 
-
-
-
-
-![What If? Machine Terminal Icon by Mark Hawkins](/media/futurama_hawkins1.png)[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726)
+![What If? Machine Terminal Icon by Mark Hawkins](../media/futurama_hawkins1.png)[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726)
 A nice icon intended as a Terminal replacement icon made by [Mark Hawkins](http://scartissuemark.deviantart.com/).
 
-
-
-
-
-![Futurama: Trash Replacement by Mark Hawkins](/media/futurama_hawkins2.png)[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045)
+![Futurama: Trash Replacement by Mark Hawkins](../media/futurama_hawkins2.png)[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045)
 A nice icon showing a big bucket of Fishy Joe's Popplers. Made by [Mark Hawkins](http://scartissuemark.deviantart.com/) too.
 
-
-
-
-
-![Futurama Random Quote Generator by rawpixels](/media/futurama_rawpixels.png)[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html)
+![Futurama Random Quote Generator by rawpixels](../media/futurama_rawpixels.png)[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html)
 A Dashboard widget for Mac OS X giving you random quotes from Futurama. Made by [rawpixels](http://www.rawpixels.com/).
 
-
-
-
-
-![Futurama Mars University Wallpaper by Matthias Kretschmann/kremalicious.com](/media/futurama_kremalicious.png)[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/)
+![Futurama Mars University Wallpaper by Matthias Kretschmann/kremalicious.com](../media/futurama_kremalicious.png)[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/)
 And there's my Futurama Mars University Wallpaper for Desktop and iPhone available in the [Goodies section](http://www.kremalicious.com/goodies) on this website.
 
-
-
-
-
-![Futurama: Out Of Whale Oil Wallpaper Pack by Matthias Kretschmann/kremalicious.com](/media/out_of_whale_oil_detail.png)[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/)
+![Futurama: Out Of Whale Oil Wallpaper Pack by Matthias Kretschmann/kremalicious.com](../media/out_of_whale_oil_detail.png)[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/)
 And finally there's my Futurama: Out Of Whale Oil Wallpaper pack for Desktop and iPhone also available in the [Goodies section](http://www.kremalicious.com/goodies) on this website. Vivid green and pink Feminista versions included.
 
-
-
-
-
 And that's it folks. Hope you enjoyed this fun article. If you know of more Mac or Apple references in Futurama or links to nice Futurama icons, wallpapers or application resources feel free to post them in the comments.
 
 As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee.
diff --git a/content/posts/2009-02-01-portal-thingy.md b/content/posts/2009-02-01-portal-thingy.md
index 29a78151..018fe12a 100644
--- a/content/posts/2009-02-01-portal-thingy.md
+++ b/content/posts/2009-02-01-portal-thingy.md
@@ -2,17 +2,17 @@
 layout: post
 
 title: 'Portal Thingy: matthiaskretschmann.com'
-image: 
+image: ../media/
 author: Matthias Kretschmann
 
 date: 2009-02-01 06:01:28+00:00
-wordpress_id: 504
+  
 categories:
 - personal
 ---
 
 
-[![matthiaskretschmann.com](/media/vcardsite-mk.png)](http://matthiaskretschmann.com)
+[![matthiaskretschmann.com](../media/vcardsite-mk.png)](http://matthiaskretschmann.com)
 Just some self reference here. I've launched a slick new site under [matthiaskretschmann.com](http://matthiaskretschmann.com) today which has an absolute simple concept. It's kind of a digital business card site for being digitally present under my name. Beside that it has Links to my social media stuff so it's easier for you to stalk me. In the 90's we probably would have called it a Portal.
 
 As you can read in the sliding Colophon at the bottom of the site, it is written in valid XHTML 1.1 and CSS3 code and makes heavy use of jQuery. But, of course, it is fully functional without JavaScript enabled. Even the tab interface remains intact in such a case which is done by some PHP magic. Just the print and text-size buttons in the lower right will be gone without JavaScript. But that's ok because their functionality can be implemented just with JavaScript anyway.
@@ -39,23 +39,23 @@ If you find a bug or have any additions feel free to [contact me](/contact), pos
 
 With the concept of this little site I've kinda jumped on the bandwagon which obviously was started by [Tim van Damme's excellent small site under timvandamme.com](http://timvandamme.com/).
 
-[![timvandamme.com](/media/vcardsite-tim.png)](http://timvandamme.com)
+[![timvandamme.com](../media/vcardsite-tim.png)](http://timvandamme.com)
 
 I was just blown away by the smart concept when first seeing this site last year and immediately made some rough sketches and drafts for my own implementation of this concept. But sadly time was too short for a new personal side project so everything laid down until last week.
 
 Another great version based on Tim's concept was crafted by [Mr. Foliage-O-Meter Rogie King](http://www.komodomedia.com/) under [rogieking.com](http://rogieking.com/) and there was also a nice little discussion about inspiration in [Rogie's blog](http://www.komodomedia.com/blog/2009/01/timvandammecom/) after he had launched his site.
 
-[![rogieking.com](/media/vcardsite-rogie.png)](http://rogieking.com)
+[![rogieking.com](../media/vcardsite-rogie.png)](http://rogieking.com)
 
 Finally I find it very interesting to compare the jQuery code of the three sites afterwards. We all have some sort of tab interface with fancy stuff going on when the tabs change. But we wrote three completely different versions of code for that purpose but all with the same JavaScript library. Oh mighty flexible jQuery!
 
 ## More Business Card Style Sites
 
-![lbaumann.com](/media/vcardsite-laurent.png)
+![lbaumann.com](../media/vcardsite-laurent.png)
 [Icon- and UI-Designer Laurent Baumann](http://lbaumann.com/)
 
-![maximilianschoening.com](/media/vcardsite-maximilian.png)
+![maximilianschoening.com](../media/vcardsite-maximilian.png)
 [Interface-Designer Maximilian Schöning](http://www.maximilianschoening.com/)
 
-![arefjdey.com](/media/vcardsite-arefjdey.png)
+![arefjdey.com](../media/vcardsite-arefjdey.png)
 [Consultant & Blogger Aref Jdey (Design & Code by yours truly)](http://www.arefjdey.com/)
diff --git a/content/posts/2009-02-17-out-of-whale-oil.md b/content/posts/2009-02-17-out-of-whale-oil.md
index e719c907..2bc5676f 100644
--- a/content/posts/2009-02-17-out-of-whale-oil.md
+++ b/content/posts/2009-02-17-out-of-whale-oil.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: We Are Out Of Whale Oil
-image: Teaser-Out-Of-Whale-Oil.jpg
-download: out-of-whale-oil-wall-by-kremalicious.zip
+image: ../media/Teaser-Out-Of-Whale-Oil.jpg
+download: ../media/out-of-whale-oil-wall-by-kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2009-02-17 20:11:55+00:00
-wordpress_id: 533
+  
 
 featured: true
 category: goodies
@@ -23,7 +23,7 @@ redirect_from:
 
 Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest Futurama movie Into The Wild Green Yonder. This pack includes 4 versions of the Planet Express ship whale oil indicator in 2 different sizes for desktop and iPhone use. Vivid pink Feminista versions included too.
 
-![Futurama: Out Of Whale Oil Wallpaper Detail](/media/out_of_whale_oil_detail.png)Here're the details for the whole pack:
+![Futurama: Out Of Whale Oil Wallpaper Detail](../media/out_of_whale_oil_detail.png)Here're the details for the whole pack:
 
   * 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
   * 2 iPhone versions with empty and full whale oil indicator (320x480)
@@ -31,7 +31,7 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F
   * 2 Feminista iPhone versions with empty and full whale oil indicator (320x480)
   * Icon folder files for this wallpaper release
 
-[![Futurama: Out Of Whale Oil Wallpaper Pack by kremalicious](/media/out-of-whale-oil-overview.png)](http://www.kremalicious.com/goodies/#wall)
+[![Futurama: Out Of Whale Oil Wallpaper Pack by kremalicious](../media/out-of-whale-oil-overview.png)](http://www.kremalicious.com/goodies/#wall)
 
 Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie.
 
diff --git a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
index 85f8dd5e..71637545 100644
--- a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
+++ b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
@@ -2,11 +2,11 @@
 layout: post
 
 title: Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else
-download: share-link-bonanza-coda-clips.zip
+download: ../media/share-link-bonanza-coda-clips.zip
 author: Matthias Kretschmann
 
 date: 2009-03-29 23:12:15+00:00
-wordpress_id: 576
+  
 
 categories:
     - design
@@ -17,7 +17,7 @@ tags:
 coinhive: true
 ---
 
-![Coda Clips Teaser](/media/codaclips-teaser.png)
+![Coda Clips Teaser](../media/codaclips-teaser.png)
 Ever wanted to include those sharing links to social or bookmarking sites so users can easily submit your content to these sites in a Wordpress site or any other platform? Then you might have experienced a rather time consuming search odyssey to get those links. But fear no more! In this article I've provided a huge collection of all the links to your favorite social sites compiled in two handy Coda Clip files in a plain and a Wordpress version. And the non-Coda users can download an html file with all the links included.
 
 Additionally you'll find a huge list within this article with the separated links in two versions for each site. And finally I've put together a quick tutorial for using buttons or icons with these links. This way you can easily add content submit/sharing links to your sites in no time.
@@ -42,7 +42,7 @@ _
 
 ## Bonus: Coda Clips Icon
 
-![Coda Clips Icon](/media/codaclips-icon128.png)There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons.
+![Coda Clips Icon](../media/codaclips-icon128.png)There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons.
 
 If you download the above Coda Clip files this icon is already applied on the clip files but here're just the icon files (icns, folder, iContainer, PNGs):
 
@@ -50,11 +50,11 @@ If you download the above Coda Clip files this icon is already applied on the cl
 
 ## 2. Usage
 
-![Coda Clips HUD](/media/codaclips-hud.png)Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it.
+![Coda Clips HUD](../media/codaclips-hud.png)Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it.
 
-That's because both collections have their placeholder selection (the ![Coda Clips Placeholder](/media/codaclips-placeholder.png)) located where the link text would be:
+That's because both collections have their placeholder selection (the ![Coda Clips Placeholder](../media/codaclips-placeholder.png)) located where the link text would be:
 
-{% highlight html %}<a href="" title="">![Coda Clips Placeholder](/media/codaclips-placeholder.png)</a>{% endhighlight %}
+{% highlight html %}<a href="" title="">![Coda Clips Placeholder](../media/codaclips-placeholder.png)</a>{% endhighlight %}
 
 As you can see I've also included the link title value usually with the name of the specific social site. Also I've already encoded all the entities so there shouldn't be any (X)HTML validation errors when using these links in your projects.
 
@@ -74,7 +74,7 @@ Apart from that some sites allow you to add and submit more informations than ju
 
 ## 2.2 Share Links (Wordpress Edition)
 
-![Wordpress logo by kremalicious](/media/wordpress-logo.png)The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are:
+![Wordpress logo by kremalicious](../media/wordpress-logo.png)The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are:
 
 * `<?php the_permalink();?>` to create the URL dynamically depending on the article under which you have included the share and submit links.
 
@@ -85,7 +85,7 @@ Anyway, as I've said above some sites allow more to submit here and you'll find
 
 ## 3. Quick Tutorial For Using Icons With These Links
 
-![Tutorial icon by kremalicious](/media/tutorial-icon.png)I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS:
+![Tutorial icon by kremalicious](../media/tutorial-icon.png)I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS:
 
 ## 3.1 Use The &lt;img /&gt; Tag Element
 
@@ -675,7 +675,7 @@ Just click the Toggle All Links button to reveal them and click it again to hide
 
 ## 5. Please Jump Around, Then Spread The Word
 
-![Coffee](/media/coffee-cup-icon-kremalicious.png)
+![Coffee](../media/coffee-cup-icon-kremalicious.png)
 
 If you ever wanted or had to include such sharing links manually in your sites and searched hours for those you should already have recognized the value of this article and if not already happened you can now jump around to express your enjoyment. After this you should immediately bookmark or share this site on your favorite social site. And while you're at it [I could use another coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=krema%40jpberlin%2ede&item_name=kremalicious%2ecom%20%2d%20Buy%20me%20a%20coffee%20or%20two%20or%20three%20or%20more&no_shipping=1&return=http%3a%2f%2fwww%2ekremalicious%2ecom%2fthank%2dyou%2f&tax=0&currency_code=EUR&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8).
 
diff --git a/content/posts/2009-06-04-twitter-crisp.md b/content/posts/2009-06-04-twitter-crisp.md
index ccb19a13..95ce8a80 100644
--- a/content/posts/2009-06-04-twitter-crisp.md
+++ b/content/posts/2009-06-04-twitter-crisp.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Twitter Crisp
-image: Teaser-Twitter-Crisp.jpg
-download: twitter-crisp-by-kremalicious.zip
+image: ../media/Teaser-Twitter-Crisp.jpg
+download: ../media/twitter-crisp-by-kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2009-06-04 00:16:40+00:00
-wordpress_id: 794
+  
 categories:
 - goodies
 tags:
diff --git a/content/posts/2009-06-24-adiumeetie.md b/content/posts/2009-06-24-adiumeetie.md
index 62f60224..f7ec35b2 100644
--- a/content/posts/2009-06-24-adiumeetie.md
+++ b/content/posts/2009-06-24-adiumeetie.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Adiumeetie. Tweetie Style Adium Icon
-image: Teaser-Adiumeetie.jpg
-download: adiumeetie-by-kremalicious.zip
+image: ../media/Teaser-Adiumeetie.jpg
+download: ../media/adiumeetie-by-kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2009-06-24 21:00:38+00:00
-wordpress_id: 844
+  
 category: goodies
 tags:
     - icon
@@ -17,13 +17,13 @@ tags:
 
 Here's a new desktop goodie for your pleasure. It's a replacement dock icon for the popular Mac IM client [Adium](http://adium.im/) following the style of atebit's excellent [Tweetie for Mac](http://www.atebits.com/tweetie-mac/) icon.
 
-![Adiumeetie Teaser](/media/Adiumeetie-Teaser.jpg)
+![Adiumeetie Teaser](../media/Adiumeetie-Teaser.jpg)
 
 While the Tweetie Mac icon (and it's UI) was discussed quite controversial (which caused some very nice Tweetie replacement icons to appear, like [here](http://jonasraskdesign.com/medias/medias.html), [here](http://iconblock.deviantart.com/art/Tweetie-Mix-120360482), [here](http://macthemes2.net/forum/viewtopic.php?id=16795744) or [here](http://www.flickr.com/photos/marcelomarfil/3611311439/)), I grew to like the style of it. But Adium beside Tweetie in the Dock just looked weird... (No offense, [Adam](http://www.artofadambetts.com/weblog/?p=108)) So I redrew the whole icon and used Adium's duck silhouette on it and made some obvious and subtle changes in comparison to the Tweetie icon. And thanks to [Loren](http://blog.atebits.com/) who kind of rubber-stamped this icon release.
 
 The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16px and as an Adium dock icon package. This icon package uses some more icons (just 128px each) for the different states of Adium (online, offline, alert etc.) and includes the application icon too.
 
-![Adiumeetie States](/media/Adiumeetie-Teaser-AdiumIcon.png)
+![Adiumeetie States](../media/Adiumeetie-Teaser-AdiumIcon.png)
 
 
 ## Download
@@ -36,7 +36,7 @@ Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or cli
 
 ## Adium Icon Usage
 
-![Adiumeetie Dock Preview](/media/Adiumeetie-Dock-Preview.png)Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder.
+![Adiumeetie Dock Preview](../media/Adiumeetie-Dock-Preview.png)Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder.
 
 The icon is free for your personal use and I hope you'll enjoy it. If you do, don't forget to [spread the word via Twitter](http://twitter.com/home?status=Adiumeetie%3A%20Tweetie%20Style%20Adium%20Dock%20Icon%20from%20%40kremalicious%20http://kremalicious.com/adiumeetie/) and all your other favorite social media sites.
 
diff --git a/content/posts/2009-09-05-delibar.md b/content/posts/2009-09-05-delibar.md
index b9f9c595..119ffe97 100644
--- a/content/posts/2009-09-05-delibar.md
+++ b/content/posts/2009-09-05-delibar.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Delibar Interface Replacement Icons
-image: Teaser-Delibar-Icons.jpg
-download: delibar-by-kremalicious.zip
+image: ../media/Teaser-Delibar-Icons.jpg
+download: ../media/delibar-by-kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2009-09-05 19:07:31+00:00
-wordpress_id: 936
+  
 categories:
 - goodies
 tags:
diff --git a/content/posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md
index cfc80e9a..7da66479 100644
--- a/content/posts/2009-12-17-wordpress-post-thumbnails.md
+++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md
@@ -5,7 +5,7 @@ title: Using The New Post Thumbnail Feature In WordPress 2.9
 author: Matthias Kretschmann
 
 date: 2009-12-17 04:00:21+00:00
-wordpress_id: 959
+  
 
 categories:
     - design
@@ -19,11 +19,11 @@ redirect_from:
     - /2009/12/wordpress-post-thumbnails/
 ---
 
-![Wordpress Logo by kremalicious](/media/wordpress-logo.png)WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible.
+![Wordpress Logo by kremalicious](../media/wordpress-logo.png)WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible.
 
 ## 1. Activate The Feature
 
-![Add WordPress Post Thumbnail Support To Theme](/media/wordpress-thumbnail-1.png)For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor.
+![Add WordPress Post Thumbnail Support To Theme](../media/wordpress-thumbnail-1.png)For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor.
 
 So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file:
 
@@ -47,21 +47,21 @@ This makes sure WordPress installation prior to 2.9 won't get screwed up when us
 ## 2. Add A Post Thumbnail To Your Post
 
 
-![Add Post Thumbnail](/media/wordpress-thumbnail-2.png)After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side.
+![Add Post Thumbnail](../media/wordpress-thumbnail-2.png)After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side.
 
 In this box click on the _Set Thumbnail link_ and the usual Add Media dialogue will pop up where you can choose an image from your Media Library. At the end of the dialogue for the selected image there's a new link beside the Insert into Post button called _Use as thumbnail_.
 
-![Add Post Thumbnail 2](/media/wordpress-thumbnail-3.png)Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.)
+![Add Post Thumbnail 2](../media/wordpress-thumbnail-3.png)Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.)
 
 You can close the media dialogue now and you will see the image in the Post Thumbnail box:
 
-![Post Thumbnail added](/media/wordpress-thumbnail-4.png)
+![Post Thumbnail added](../media/wordpress-thumbnail-4.png)
 
 
 ## 3. Display The Post Thumbnail In Your Theme
 
 
-![Add to theme](/media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file:
+![Add to theme](../media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file:
 {% highlight php %}<?php the_post_thumbnail(); ?>{% endhighlight %}
 This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as:
 
@@ -173,7 +173,7 @@ This first checks if the feature exists and if a post thumbnail was addd with th
 Well and that's it. I would love to link to some smart WordPress Codex pages for these new template tags but at the time of this writing there simply isn't anything in the Codex about this.
 
 
-<a href="http://krlc.us/givecoffee">![Oh no!](/media/coffee-cup-empty.png)</a>
+<a href="http://krlc.us/givecoffee">![Oh no!](../media/coffee-cup-empty.png)</a>
 
 
 As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee.
diff --git a/content/posts/2010-02-04-ipixelpad.md b/content/posts/2010-02-04-ipixelpad.md
index 10704c6a..10f9d5f1 100644
--- a/content/posts/2010-02-04-ipixelpad.md
+++ b/content/posts/2010-02-04-ipixelpad.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: iPixelPad - Tongue Twisting But Crisp iPad Icons
-image: Teaser-iPixelPad.png
-download: ipixelpad_by_kremalicious.zip
+image: ../media/Teaser-iPixelPad.png
+download: ../media/ipixelpad_by_kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2010-02-04 15:21:42+00:00
-wordpress_id: 1092
+  
 categories:
 - goodies
 tags:
@@ -22,7 +22,7 @@ They also come in two different versions for each size: with a matte highlight s
 
 And drawing the homescreen icons was quite funky and if you know the standard iPhone icons I bet you can guess what icons you can see here and in the icon files, at least in the 48px and 32px versions:
 
-![ipixelpad-homescreen-zoom.png](/media/ipixelpad-homescreen-zoom.png)
+![ipixelpad-homescreen-zoom.png](../media/ipixelpad-homescreen-zoom.png)
 
 The homescreen icons pixels in the 16px version needed all more vivid colors to get them distinguishable from the wallpaper background so they're a bit different from the other sizes. These are the times I wish I could modify just half a pixel.
 
diff --git a/content/posts/2010-03-27-office-desk.md b/content/posts/2010-03-27-office-desk.md
index 1c24be05..0bb23163 100644
--- a/content/posts/2010-03-27-office-desk.md
+++ b/content/posts/2010-03-27-office-desk.md
@@ -2,12 +2,12 @@
 layout: photo
 
 title: Office Desk
-image: Office-Desk.jpg
+image: ../media/Office-Desk.jpg
 author: Matthias Kretschmann
 
 date: 2010-03-27 21:31:35+00:00
 
-wordpress_id: 1901
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md
index 0108895e..569d3c5c 100644
--- a/content/posts/2010-07-03-momcorp.md
+++ b/content/posts/2010-07-03-momcorp.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: MomCorp Wallpaper
-image: Teaser-MomCorp-Wall.png
-download: momcorp_wall_by_kremalicious.zip
+image: ../media/Teaser-MomCorp-Wall.png
+download: ../media/momcorp_wall_by_kremalicious.zip
 author: Matthias Kretschmann
 
 date: 2010-07-03 17:12:53+00:00
-wordpress_id: 1453
+  
 category: goodies
 tags:
     - wallpaper
@@ -20,7 +20,7 @@ The recent Futurama episode [Attack of the Killer App](http://en.wikipedia.org/w
 
 The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:
 
-![MomCorp-Walls-Overview](/media/MomCorp-Walls-Overview.png)
+![MomCorp-Walls-Overview](../media/MomCorp-Walls-Overview.png)
 
 ## Download
 
diff --git a/content/posts/2010-07-18-typeface-condoms.md b/content/posts/2010-07-18-typeface-condoms.md
index b9484314..3c6fdd00 100644
--- a/content/posts/2010-07-18-typeface-condoms.md
+++ b/content/posts/2010-07-18-typeface-condoms.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Typeface condoms
-image: Typeface-condoms.jpg
+image: ../media/Typeface-condoms.jpg
 author: Matthias Kretschmann
 
 date: 2010-07-18 20:28:33+00:00
-wordpress_id: 1898
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2010-08-07-bonsai.md b/content/posts/2010-08-07-bonsai.md
index 2256cd42..b682a79b 100644
--- a/content/posts/2010-08-07-bonsai.md
+++ b/content/posts/2010-08-07-bonsai.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Bonsai
-image: Bonsai-5-Version-2.jpg
+image: ../media/Bonsai-5-Version-2.jpg
 author: Matthias Kretschmann
 
 date: 2010-08-07 20:23:31+00:00
-wordpress_id: 1895
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2010-09-01-gdr-helvetica.md b/content/posts/2010-09-01-gdr-helvetica.md
index 0a38a693..f69dbb8b 100644
--- a/content/posts/2010-09-01-gdr-helvetica.md
+++ b/content/posts/2010-09-01-gdr-helvetica.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: GDR Helvetica
-image: GDR-Helvetica.jpg
+image: ../media/GDR-Helvetica.jpg
 author: Matthias Kretschmann
 
 date: 2010-09-01 20:21:43+00:00
-wordpress_id: 1892
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2010-12-11-iphone-coasters.md b/content/posts/2010-12-11-iphone-coasters.md
index 3680f8ec..b62945a8 100644
--- a/content/posts/2010-12-11-iphone-coasters.md
+++ b/content/posts/2010-12-11-iphone-coasters.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: iPhone Coasters
-image: iPhone-Coasters-1-Version-2.jpg
+image: ../media/iPhone-Coasters-1-Version-2.jpg
 author: Matthias Kretschmann
 
 date: 2010-12-11 21:19:29+00:00
-wordpress_id: 1889
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md
index 1a1ceb3a..9fe15f90 100644
--- a/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md
+++ b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Basically, The Monolith Is On My Desk
-image: Basically-The-Monolith-Is-On-My-Desk.jpg
+image: ../media/Basically-The-Monolith-Is-On-My-Desk.jpg
 author: Matthias Kretschmann
 
 date: 2010-12-29 15:47:12+00:00
-wordpress_id: 1873
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md
index a02bb3c5..0bfb880e 100644
--- a/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md
+++ b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Free Monkey Breath, Not Soylent Green
-image: Free-Monkey-Breath-Not-Soylent-Green.jpg
+image: ../media/Free-Monkey-Breath-Not-Soylent-Green.jpg
 author: Matthias Kretschmann
 
 date: 2010-12-29 21:16:55+00:00
-wordpress_id: 1886
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2011-01-08-enjoying-paper.md b/content/posts/2011-01-08-enjoying-paper.md
index e6adaf9d..bc0de1e8 100644
--- a/content/posts/2011-01-08-enjoying-paper.md
+++ b/content/posts/2011-01-08-enjoying-paper.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Enjoying Paper
-image: Enjoying-Paper.jpg
+image: ../media/Enjoying-Paper.jpg
 author: Matthias Kretschmann
 
 date: 2011-01-08 15:43:14+00:00
-wordpress_id: 1867
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2011-01-08-glowing-star-inside.md b/content/posts/2011-01-08-glowing-star-inside.md
index 91fc38e7..a4793415 100644
--- a/content/posts/2011-01-08-glowing-star-inside.md
+++ b/content/posts/2011-01-08-glowing-star-inside.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Glowing Star Inside
-image: Glowing-Star-Inside.jpg
+image: ../media/Glowing-Star-Inside.jpg
 author: Matthias Kretschmann
 
 date: 2011-01-08 15:45:26+00:00
-wordpress_id: 1870
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2011-01-18-historic-flood-levels.md b/content/posts/2011-01-18-historic-flood-levels.md
index 76d1ef45..7fd69263 100644
--- a/content/posts/2011-01-18-historic-flood-levels.md
+++ b/content/posts/2011-01-18-historic-flood-levels.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Historic Flood Levels
-image: Historic-Flood-Levels.jpg
+image: ../media/Historic-Flood-Levels.jpg
 author: Matthias Kretschmann
 
 date: 2011-01-18 15:40:12+00:00
-wordpress_id: 1864
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2011-10-11-broken-nexus-s-screen.md b/content/posts/2011-10-11-broken-nexus-s-screen.md
index f873ecaa..94f2ff8c 100644
--- a/content/posts/2011-10-11-broken-nexus-s-screen.md
+++ b/content/posts/2011-10-11-broken-nexus-s-screen.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Broken Nexus S Screen
-image: Broken-Nexus-S-Screen.jpg
+image: ../media/Broken-Nexus-S-Screen.jpg
 author: Matthias Kretschmann
 
 date: 2011-10-11 14:37:06+00:00
-wordpress_id: 1861
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2011-12-15-badged.md b/content/posts/2011-12-15-badged.md
index 7cbe7e96..ef4833f3 100644
--- a/content/posts/2011-12-15-badged.md
+++ b/content/posts/2011-12-15-badged.md
@@ -2,12 +2,12 @@
 layout: post
 
 title: Badged - iOS Style Notification Badges for WordPress
-image: Badged-Teaser-kremalicious@2x.png
+image: ../media/Badged-Teaser-kremalicious@2x.png
 author: Matthias Kretschmann
 updated: 2014-10-11 07:56:46+00:00
 
 date: 2011-12-15 07:56:46+00:00
-wordpress_id: 1468
+  
 
 category: goodies
 tags:
@@ -39,7 +39,7 @@ The plugin is hosted on GitHub and will always be mirrored in the WordPress plug
 3. Enjoy
 4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:
 
-![](/media/badged-settings.png)
+![](../media/badged-settings.png)
 
 If you find any problems you can [open an issue on GitHub](https://github.com/kremalicious/Badged/issues) or just drop me a line in the comments or on [Twitter](http://twitter.com/kremalicious).
 
diff --git a/content/posts/2012-02-26-mk-v2.md b/content/posts/2012-02-26-mk-v2.md
index 88edbd54..f119b4e0 100644
--- a/content/posts/2012-02-26-mk-v2.md
+++ b/content/posts/2012-02-26-mk-v2.md
@@ -2,11 +2,11 @@
 layout: post
 
 title: Personal Site v2
-image: mkv2.jpg
+image: ../media/mkv2.jpg
 author: Matthias Kretschmann
 
 date: 2012-02-26 21:29:54+00:00
-wordpress_id: 1506
+  
 categories:
 - personal
 ---
@@ -17,13 +17,13 @@ Today I finally launched v2 of my personal site, still following the concept of
 
 One goal was to use as less images as possible. Yes, it would have been easier to just use images instead of like 10 box-shadows on one element but this wouldn't have been any fun. And no matter what retina/high dpi devices come up next all interface elements will look just as sharp without any additional work.
 
-![](/media/mkv2-detail.png)
+![](../media/mkv2-detail.png)
 
 Apart from the colored top background, the logo and the subtle background texture there're no background images in use. All the other visuals were created with a lot of CSS3 & pseudo elements. Pseudo elements were the perfect technology so the markup doesn't get cluttered with dozens of empty divs, spans etc. which would only serve a styling purpose.
 
 All icons on the site are coming from an icon font (the wonderful [IcoMoon](http://keyamoon.com/icomoon)) embedded with @font-face.
 
-![](/media/mkv2-balls.jpg)
+![](../media/mkv2-balls.jpg)
 
 
 ## Mobile & Modern First
@@ -31,7 +31,7 @@ All icons on the site are coming from an icon font (the wonderful [IcoMoon](htt
 
 For the front-end development I've followed a mobile devices & modern browsers first approach. Therefore the site should look great on many different devices & screen sizes. As a starting point I used a combination of the [1140grid](http://cssgrid.net) and [320 and up](http://www.stuffandnonsense.co.uk/projects/320andup/).
 
-![](/media/mkv2-responsivelayouts.jpg)
+![](../media/mkv2-responsivelayouts.jpg)
 
 That's of course all done by media queries with breakpoints at 600px, 768px and 992px. During my testing those rather weird values turned out to work best for this simple layout. The layout only changes at 600px & 768px, the 992px is just used for some different css animations. And yes, I'm aware of the irony targeting fixed values here although everything else uses relative values.
 
@@ -40,19 +40,19 @@ But it's interesting to see how different the rendering of the site is in some m
 
 
 	
-  * [iOS - Mobile Safari (iPhone 4S)](/media/mkv2-iphone.png)
+  * [iOS - Mobile Safari (iPhone 4S)](../media/mkv2-iphone.png)
 
 	
-  * [iOS - Mobile Safari (iPad)](/media/mkv2-ipad.png)
+  * [iOS - Mobile Safari (iPad)](../media/mkv2-ipad.png)
 
 	
-  * [Android - Android Browser (Nexus S)](/media/mkv2-android.png)
+  * [Android - Android Browser (Nexus S)](../media/mkv2-android.png)
 
 	
-  * [Android - Chrome beta (Nexus S)](/media/mkv2-android-chrome.png)
+  * [Android - Chrome beta (Nexus S)](../media/mkv2-android-chrome.png)
 
 	
-  * [Android - Firefox (Nexus S)](/media/mkv2-android-firefox.png)
+  * [Android - Firefox (Nexus S)](../media/mkv2-android-firefox.png)
 
 
 Notice the weird banding of the gradients in Firefox. And Android either ignores the min-device-pixel-ratio media query altogether or has just problems with the background-size css property.
@@ -73,11 +73,11 @@ If you're interested, here're the non-minified versions of the main [css file](
 ## The touch hover problem
 
 
-![](/media/mkv2-portfolio-overlay.jpg)
+![](../media/mkv2-portfolio-overlay.jpg)
 
 A common pattern for stuff which can be revealed by hovering over something on desktop devices is to just make everything visible by default on touch devices. But I didn't wanted to clutter the portfolio items by adding buttons/text links or whatever around them.
 
-![](/media/mkv2-ipad-touchindicator.jpg) So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough.
+![](../media/mkv2-ipad-touchindicator.jpg) So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough.
 
 So I incorporated a visual hint for the other half: If a user on a touch device hasn't tapped on an item yet a subtle touch indicator starts pulsating over each item after 30 seconds.
 
diff --git a/content/posts/2012-03-04-relaxing-cat.md b/content/posts/2012-03-04-relaxing-cat.md
index 2782b4be..072c3e9f 100644
--- a/content/posts/2012-03-04-relaxing-cat.md
+++ b/content/posts/2012-03-04-relaxing-cat.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Relaxing Cat
-image: 7f9397a265d811e1b9f1123138140926_7.jpg
+image: ../media/7f9397a265d811e1b9f1123138140926_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-03-04 08:00:32+00:00
-wordpress_id: 1729
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-03-blaue-turme.md b/content/posts/2012-04-03-blaue-turme.md
index 8a78e26b..3a507001 100644
--- a/content/posts/2012-04-03-blaue-turme.md
+++ b/content/posts/2012-04-03-blaue-turme.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Blaue Türme
-image: Blaue-Tuerme-1.jpg
+image: ../media/Blaue-Tuerme-1.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-03 12:41:01+00:00
-wordpress_id: 1753
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-03-skeletor.md b/content/posts/2012-04-03-skeletor.md
index 38184305..3c52ac40 100644
--- a/content/posts/2012-04-03-skeletor.md
+++ b/content/posts/2012-04-03-skeletor.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Skeletor
-image: 6313cc1e7db611e180c9123138016265_7.jpg
+image: ../media/6313cc1e7db611e180c9123138016265_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-03 17:56:49+00:00
-wordpress_id: 1745
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-03-train-station-leipzig.md b/content/posts/2012-04-03-train-station-leipzig.md
index 6ced8dae..8367714b 100644
--- a/content/posts/2012-04-03-train-station-leipzig.md
+++ b/content/posts/2012-04-03-train-station-leipzig.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Train Station Leipzig
-image: de2ac24c7db911e1b9f1123138140926_7.jpg
+image: ../media/de2ac24c7db911e1b9f1123138140926_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-03 18:21:44+00:00
-wordpress_id: 1747
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-04-android-tab-conundrum.md b/content/posts/2012-04-04-android-tab-conundrum.md
index 17fcf2fe..18ba73cf 100644
--- a/content/posts/2012-04-04-android-tab-conundrum.md
+++ b/content/posts/2012-04-04-android-tab-conundrum.md
@@ -1,13 +1,11 @@
 ---
 author: Matthias Kretschmann
-comments: true
 date: 2012-04-04 14:24:30+00:00
 layout: post
-slug: android-tab-conundrum
 title: The Android Tab Bar Conundrum. Again.
-image: tabs_overview.png
+image: ../media/tabs_overview.png
 
-wordpress_id: 1556
+  
 
 categories:
     - design
@@ -21,43 +19,34 @@ Most obviously in the form of the app's main navigation tabs which Instagram fo
 
 ## Problem No. 1: Navigation Controls
 
-
-![](/media/android-navigation-buttons.png)
+![](../media/android-navigation-buttons.png)
 
 The suggested [top placement in the Android Design Guidelines](http://developer.android.com/design/building-blocks/tabs.html) was an answer to a typical Android specific problem: the very bottom of Android apps is reserved for on-screen navigation buttons, originally capacitative off-screen buttons. And those can get triggered accidentally when reaching tabs in a tab bar at the bottom of the screen. Let's dub this problem no. 1.
 
 Now I'm usually all for breaking the rules because that's the only way innovation can happen. But this breaking needs to be thoroughly thought through and involves a deep understanding of the rules being broken. While a lot of iOS ports just use the bottom tab bar out of habit and non-thinking, [Tim](https://twitter.com/maxvoltar) and the Instagram guys don't fall in this camp.
 
-
 ## Problem No. 2: Longer Screens
 
-
-![](/media/android-galaxy-note.png)
+![](../media/android-galaxy-note.png)
 
 The usage of a bottom tab bar in Instagram for Android is an answer to a relatively new problem which isn't incorporated in the Android Design Guidelines: bigger screens, or more precisely longer screens, make it very hard to reach tabs at the top of the screen when holding the device with one hand. When looking at all those new devices it seems clear screen sizes above 4" are now the norm for Android. This is problem no. 2.
 
 In my view it all comes down to balancing those 2 problems against each other and, as said on Twitter, Tim decided to value problem 2 over problem 1:
 
-
 > on the Galaxy Note it's impossible to get to the tabs with one hand if they're on top.
 
 — Tim Van Damme ([@maxvoltar](https://twitter.com/maxvoltar)) [April 3, 2012](https://twitter.com/maxvoltar/status/187224604912254976)
 
-
 And I'm afraid he's right: it's just more important for users to reach the tabs with one hand than preventing them from accidently triggering the OS buttons. When an app has a tab bar it's usually the main element to navigate inside an app so it's crucial to reach those elements very fast. Also problem 1 is less of a problem on devices like the Galaxy Nexus with its on-screen buttons, they just don't get triggered by accident so easily as those off-screen capacitive buttons.
 
-
 ## A way out
 
-
 So we really need to rethink this specific guideline but this doesn't have to be just the decision between top or bottom placement of tabs.
 
 There's another way out to solve both problems: Combining scrollable & fixed tabs. This is already used by Google in ICS's built-in Phone and People app (thanks Jake!). And Instagram for Android could have used the same fixed tabs on the top of the screen but combine them with a swipe left/right gesture to navigate between those tabs. (Per guideline a swipe view needs to get a corresponding scrollable, text-only tab bar)
 
 Here's a quick mockup:
 
-
-![](/media/Instagram-Swipe.png)
-
+![](../media/Instagram-Swipe.png)
 
 Users wouldn't have to reach for the tabs to change views and nobody would accidently trigger the OS buttons at the bottom. The active states of the current and new tab item could fade corresponding to the swiping, same goes for the title of the current view in the very top bar. Another way could have been to split action & navigation tabs like [Guenther Beyer did in his mockup](https://plus.google.com/109726284197282147930/posts/5McKooqNnnd).
diff --git a/content/posts/2012-04-05-current-sushi-status.md b/content/posts/2012-04-05-current-sushi-status.md
index d3803f28..0fc8d57b 100644
--- a/content/posts/2012-04-05-current-sushi-status.md
+++ b/content/posts/2012-04-05-current-sushi-status.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Current Sushi Status
-image: aff38e2c7f5311e1b10e123138105d6b_7.jpg
+image: ../media/aff38e2c7f5311e1b10e123138105d6b_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-05 19:15:20+00:00
-wordpress_id: 1731
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-07-buna.md b/content/posts/2012-04-07-buna.md
index 0f3c5e59..e269ab2b 100644
--- a/content/posts/2012-04-07-buna.md
+++ b/content/posts/2012-04-07-buna.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Buna
-image: 44af28f2805b11e18cf91231380fd29b_7.jpg
+image: ../media/44af28f2805b11e18cf91231380fd29b_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-07 02:42:08+00:00
-wordpress_id: 1733
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md
index a67fe1a4..93140844 100644
--- a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md
+++ b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Cat enjoying a good iPad game
-image: 7838011c80ce11e19e4a12313813ffc0_7.jpg
+image: ../media/7838011c80ce11e19e4a12313813ffc0_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-07 16:26:46+00:00
-wordpress_id: 1739
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-07-ipad-porn.md b/content/posts/2012-04-07-ipad-porn.md
index 62572839..f22c250d 100644
--- a/content/posts/2012-04-07-ipad-porn.md
+++ b/content/posts/2012-04-07-ipad-porn.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: iPad Porn
-image: 97a44d6080b711e181bd12313817987b_7.jpg
+image: ../media/97a44d6080b711e181bd12313817987b_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-07 13:43:00+00:00
-wordpress_id: 1735
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-07-opera.md b/content/posts/2012-04-07-opera.md
index 0ccc1cb2..1848cd38 100644
--- a/content/posts/2012-04-07-opera.md
+++ b/content/posts/2012-04-07-opera.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Opera
-image: 5df6e0a280c911e1a87612313804ec91_7.jpg
+image: ../media/5df6e0a280c911e1a87612313804ec91_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-07 15:50:15+00:00
-wordpress_id: 1737
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-08-common-kitchen-decoration.md b/content/posts/2012-04-08-common-kitchen-decoration.md
index 7b87df64..74bc90d6 100644
--- a/content/posts/2012-04-08-common-kitchen-decoration.md
+++ b/content/posts/2012-04-08-common-kitchen-decoration.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Common kitchen decoration
-image: 2ba6eeba81b111e1989612313815112c_7.jpg
+image: ../media/2ba6eeba81b111e1989612313815112c_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-08 19:29:33+00:00
-wordpress_id: 1741
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-08-graffiti-old-school-style.md b/content/posts/2012-04-08-graffiti-old-school-style.md
index a1da2257..d64807a1 100644
--- a/content/posts/2012-04-08-graffiti-old-school-style.md
+++ b/content/posts/2012-04-08-graffiti-old-school-style.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Graffiti, old school style
-image: 7e2b28f881b711e1af7612313813f8e8_7.jpg
+image: ../media/7e2b28f881b711e1af7612313813f8e8_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-04-08 20:14:49+00:00
-wordpress_id: 1743
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md
index a183f683..ced0403c 100644
--- a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md
+++ b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md
@@ -6,7 +6,7 @@ linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag
 author: Matthias Kretschmann
 
 date: 2012-04-20 08:48:46+00:00
-wordpress_id: 1712
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-04-30-announcing-sketch2.md b/content/posts/2012-04-30-announcing-sketch2.md
index e00d174b..75f06cbf 100644
--- a/content/posts/2012-04-30-announcing-sketch2.md
+++ b/content/posts/2012-04-30-announcing-sketch2.md
@@ -6,7 +6,7 @@ linkurl: http://www.bohemiancoding.com/about/blog/announcing-sketch-2-0/
 author: Matthias Kretschmann
 
 date: 2012-04-30 12:37:05+00:00
-wordpress_id: 1950
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md
index 57ce1fbe..7cf9e418 100644
--- a/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md
+++ b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md
@@ -6,7 +6,7 @@ linkurl: http://www.guardian.co.uk/commentisfree/2012/may/01/open-free-access-ac
 author: Matthias Kretschmann
 
 date: 2012-05-02 03:12:40+00:00
-wordpress_id: 1989
+  
 categories:
 - links
 post_format:
diff --git a/content/posts/2012-05-03-antique-chrome.md b/content/posts/2012-05-03-antique-chrome.md
index 32b77c1a..cf640e21 100644
--- a/content/posts/2012-05-03-antique-chrome.md
+++ b/content/posts/2012-05-03-antique-chrome.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Antique Chrome
-image: 5fc688aa953811e180c9123138016265_7.jpg
+image: ../media/5fc688aa953811e180c9123138016265_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-05-03 15:55:15+00:00
-wordpress_id: 1996
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-05-04-world-press-photo-2012.md b/content/posts/2012-05-04-world-press-photo-2012.md
index 8a6a1534..7a9152f4 100644
--- a/content/posts/2012-05-04-world-press-photo-2012.md
+++ b/content/posts/2012-05-04-world-press-photo-2012.md
@@ -6,7 +6,7 @@ linkurl: http://www.worldpressphoto.org/gallery/2012-world-press-photo
 author: Matthias Kretschmann
 
 date: 2012-05-04 13:12:54+00:00
-wordpress_id: 1997
+  
 categories:
 - photography
 post_format:
diff --git a/content/posts/2012-05-09-media-query-asset-downloading-results.md b/content/posts/2012-05-09-media-query-asset-downloading-results.md
index 41544540..860a87ae 100644
--- a/content/posts/2012-05-09-media-query-asset-downloading-results.md
+++ b/content/posts/2012-05-09-media-query-asset-downloading-results.md
@@ -6,7 +6,7 @@ linkurl: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
 author: Matthias Kretschmann
 
 date: 2012-05-09 09:48:19+00:00
-wordpress_id: 2019
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md
index b7fe5181..2f5f5c38 100644
--- a/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md
+++ b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md
@@ -6,7 +6,7 @@ linkurl: http://netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong
 author: Matthias Kretschmann
 
 date: 2012-05-12 13:19:02+00:00
-wordpress_id: 2024
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md
index 9d680c46..54dcd5de 100644
--- a/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md
+++ b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md
@@ -6,7 +6,7 @@ linkurl: http://css-tricks.com/which-responsive-images-solution-should-you-use/
 author: Matthias Kretschmann
 
 date: 2012-05-12 17:52:53+00:00
-wordpress_id: 2041
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-05-14-welcome-to-kremalicious2.md b/content/posts/2012-05-14-welcome-to-kremalicious2.md
index f9fab5be..69c583cf 100644
--- a/content/posts/2012-05-14-welcome-to-kremalicious2.md
+++ b/content/posts/2012-05-14-welcome-to-kremalicious2.md
@@ -2,11 +2,11 @@
 layout: post
 
 title: Welcome to kremalicious2
-image: kremalicious2-teaser.jpg
+image: ../media/kremalicious2-teaser.jpg
 author: Matthias Kretschmann
 
 date: 2012-05-14 19:33:22+00:00
-wordpress_id: 1920
+  
 
 categories:
     - personal
@@ -30,13 +30,13 @@ To make future maintenance a bit easier, I’m using the simple [HS Responsive
 
 ## Typography
 
-![](/media/kremalicious2-typography.jpg)After much experimentation, all fonts (that is, those for texts) on this blog are now coming from TypeKit. The body text is set in [Rooney Web](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro).
+![](../media/kremalicious2-typography.jpg)After much experimentation, all fonts (that is, those for texts) on this blog are now coming from TypeKit. The body text is set in [Rooney Web](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro).
 
 Sadly, Typekit [only works in webkit based mobile browsers](http://help.typekit.com/customer/portal/articles/6786) which is a real bummer. Sorry Firefox & Opera users on mobile devices.
 
 ## Icons
 
-![](/media/kremalicious2-topicicons.jpg)All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/Font-Awesome/) made by Dave Gandy. But the original font was missing some needed glyphs so I’m using a fork called [Font Awesome More](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/gregoryLpaul)). This makes things like changing icon colors so much easier but using icon fonts still has the problem of small icons not rendering super crisp, although `font-smoothing: antialiased` helps a bit.
+![](../media/kremalicious2-topicicons.jpg)All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/Font-Awesome/) made by Dave Gandy. But the original font was missing some needed glyphs so I’m using a fork called [Font Awesome More](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/gregoryLpaul)). This makes things like changing icon colors so much easier but using icon fonts still has the problem of small icons not rendering super crisp, although `font-smoothing: antialiased` helps a bit.
 
 
 ## CSS beats Images
@@ -46,7 +46,7 @@ The whole interface is mostly CSS based, only the logo typeface with the cloud a
 
 But even those @2x assets are just blurry when the user zooms into the interface. But with most interface elements being css or font based you can zoom in ridiculously without anything becoming blurry. That's actually a scaled down full size screenshot of a zoom in on the 3rd generation iPad:
 
-![](/media/kremaliciouscom-iPad-3.jpg)
+![](../media/kremaliciouscom-iPad-3.jpg)
 
 Needless to say this introduces new problems, especially for performance on mobile devices. As we know, current mobile devices and their browsers come into memory problems when told to render a lot of css box-shadows or css gradients. This all isn't noticeable on Desktop devices or an iPad 1, but it's quite noticeable in the Android stock browser on a Nexus S for instance.
 
@@ -74,11 +74,11 @@ Link post means a short comment from me to a valuable or interesting resource wh
 ### Photo posts
 
 
-![](/media/kremalicious2-photoposts.jpg)
+![](../media/kremalicious2-photoposts.jpg)
 
 [Photo posts](/photos) are my new favorite: beside selected images from my Flickr and 500px profiles, they include automatic posting of my Instagram images. After being taken, a new Instagram image is posted immediately as a special styled photo post in this blog.
 
-![](/media/kremalicious2-photogrid.jpg)And I didn’t wanted to clutter the blog stream in times when there’re a lot of photo-only posts between text based posts.
+![](../media/kremalicious2-photogrid.jpg)And I didn’t wanted to clutter the blog stream in times when there’re a lot of photo-only posts between text based posts.
 
 So all photo posts which immediately follow one another are grouped together in a grid, nicely laid out by [jQuery Masonry](http://masonry.desandro.com/). I couldn't figure out a way to make this filtering on the WordPress loop level for now so this grouping is done with jQuery after page load.
 
diff --git a/content/posts/2012-05-15-wp-icons-template.md b/content/posts/2012-05-15-wp-icons-template.md
index c7cd7932..19e01bc9 100644
--- a/content/posts/2012-05-15-wp-icons-template.md
+++ b/content/posts/2012-05-15-wp-icons-template.md
@@ -2,11 +2,11 @@
 layout: post
 
 title: WordPress Admin Icons Template
-image: kremalicious-Teaser-WP-Icon-Template.png
+image: ../media/kremalicious-Teaser-WP-Icon-Template.png
 author: Matthias Kretschmann
 
 date: 2012-05-15 16:00:44+00:00
-wordpress_id: 2043
+  
 
 categories:
     - design
@@ -35,7 +35,7 @@ So if you value quality and want pixel perfect icons in your admin area you need
 
 ## The Template
 
-![](/media/WordPress-Admin-Icons-Template-Filled.png)
+![](../media/WordPress-Admin-Icons-Template-Filled.png)
 
 I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
 
@@ -101,14 +101,14 @@ function custom_post_type_icon() {
 
             /* Admin Menu - 16px @2x */
             #menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
-                background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
+                background-image: ../media/url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
                 -webkit-background-size: 16px 48px;
                 -moz-background-size: 16px 48px;
                 background-size: 16px 48px;
             }
             /* Post Screen - 32px @2x */
             .icon32-posts-YOUR_POSTTYPE_NAME {
-                background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
+                background-image: ../media/url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
                 -webkit-background-size: 32px 32px;
                 -moz-background-size: 32px 32px;
                 background-size: 32px 32px;
@@ -178,7 +178,7 @@ function option_page_icon() {
                Use only if you put your plugin or option page in the top level via add_menu_page()
             */
                #toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
-                   background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
+                   background-image: ../media/url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
                    -webkit-background-size: 16px 48px;
                    -moz-background-size: 16px 48px;
                    background-size: 16px 48px;
@@ -186,7 +186,7 @@ function option_page_icon() {
 
                /* Option Screen - 32px @2x */
                #PLUGINNAME.icon32 {
-                   background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
+                   background-image: ../media/url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
                    -webkit-background-size: 32px 32px;
                    -moz-background-size: 32px 32px;
                    background-size: 32px 32px;
diff --git a/content/posts/2012-05-21-why-comic-sans.md b/content/posts/2012-05-21-why-comic-sans.md
index f28f219f..4dd68acf 100644
--- a/content/posts/2012-05-21-why-comic-sans.md
+++ b/content/posts/2012-05-21-why-comic-sans.md
@@ -6,7 +6,7 @@ linkurl: http://www.connare.com/whycomic.htm
 author: Matthias Kretschmann
 
 date: 2012-05-21 21:18:17+00:00
-wordpress_id: 2120
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md
index 87d46252..ee9cc6e0 100644
--- a/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md
+++ b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md
@@ -6,7 +6,7 @@ linkurl: http://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-interne
 author: Matthias Kretschmann
 
 date: 2012-05-22 01:00:03+00:00
-wordpress_id: 2125
+  
 categories:
 - photography
 post_format:
diff --git a/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md
index 2fa3c93d..aba93cab 100644
--- a/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md
+++ b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md
@@ -6,7 +6,7 @@ linkurl: http://www.alistapart.com/articles/responsive-images-and-web-standards-
 author: Matthias Kretschmann
 
 date: 2012-05-22 06:23:26+00:00
-wordpress_id: 2133
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-05-23-like-modern-heating-only-more-badass.md b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md
index 599a6188..a616ac84 100644
--- a/content/posts/2012-05-23-like-modern-heating-only-more-badass.md
+++ b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Like modern heating only more badass
-image: 41b5a454a43811e1989612313815112c_7.jpeg
+image: ../media/41b5a454a43811e1989612313815112c_7.jpeg
 author: Matthias Kretschmann
 
 date: 2012-05-23 14:23:38+00:00
-wordpress_id: 2142
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-05-26-html-for-icon-font-usage.md b/content/posts/2012-05-26-html-for-icon-font-usage.md
index 934931fb..7bdde080 100644
--- a/content/posts/2012-05-26-html-for-icon-font-usage.md
+++ b/content/posts/2012-05-26-html-for-icon-font-usage.md
@@ -6,7 +6,7 @@ linkurl: http://css-tricks.com/html-for-icon-font-usage/
 author: Matthias Kretschmann
 
 date: 2012-05-26 05:13:58+00:00
-wordpress_id: 2154
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-05-27-balloon.md b/content/posts/2012-05-27-balloon.md
index f82a7e4d..185f904e 100644
--- a/content/posts/2012-05-27-balloon.md
+++ b/content/posts/2012-05-27-balloon.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Balloon
-image: 690fe368a81911e1b2fe1231380205bf_7.jpg
+image: ../media/690fe368a81911e1b2fe1231380205bf_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-05-27 17:16:11+00:00
-wordpress_id: 2167
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md
index 063cddde..ee4634ff 100644
--- a/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md
+++ b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md
@@ -6,7 +6,7 @@ linkurl: http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-sill
 author: Matthias Kretschmann
 
 date: 2012-06-05 16:25:56+00:00
-wordpress_id: 2187
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md
index df46f3a3..0a56695a 100644
--- a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md
+++ b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md
@@ -5,7 +5,7 @@ title: Retina icons in WordPress 3.4
 author: Matthias Kretschmann
 
 date: 2012-06-13 19:01:20+00:00
-wordpress_id: 2195
+  
 
 categories:
     - design
@@ -19,12 +19,12 @@ Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina as
 
 And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3:
 
-![](/media/wp34_retina_icons.png)
+![](../media/wp34_retina_icons.png)
 
 So if you're a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon.
 
 There's just one problem: WordPress doesn't include anything to make this easy for developers. The functions `register_post_type()` and `add_menu_page()` only allow you to define one image as menu icon which then gets inserted as `img` tag.
 
-[![](/media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.
+[![](../media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.
 
 And no, [SVG for your icons are not the solution](http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html).
diff --git a/content/posts/2012-06-27-typography-window.md b/content/posts/2012-06-27-typography-window.md
index b7109b69..6472d9cc 100644
--- a/content/posts/2012-06-27-typography-window.md
+++ b/content/posts/2012-06-27-typography-window.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Typography window
-image: 80a136dabff711e188131231381b5c25_7.jpg
+image: ../media/80a136dabff711e188131231381b5c25_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-06-27 01:29:13+00:00
-wordpress_id: 2215
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-06-30-why-files-exist.md b/content/posts/2012-06-30-why-files-exist.md
index b0bc125f..5ca8a347 100644
--- a/content/posts/2012-06-30-why-files-exist.md
+++ b/content/posts/2012-06-30-why-files-exist.md
@@ -6,7 +6,7 @@ linkurl: http://blog.filepicker.io/post/26157006600/why-files-exist
 author: Matthias Kretschmann
 
 date: 2012-06-30 18:17:33+00:00
-wordpress_id: 2219
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-07-04-newton-reconsidered.md b/content/posts/2012-07-04-newton-reconsidered.md
index 329aa106..40fcf791 100644
--- a/content/posts/2012-07-04-newton-reconsidered.md
+++ b/content/posts/2012-07-04-newton-reconsidered.md
@@ -6,7 +6,7 @@ linkurl: http://techland.time.com/2012/06/01/newton-reconsidered/
 author: Matthias Kretschmann
 
 date: 2012-07-04 01:19:17+00:00
-wordpress_id: 2239
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-07-07-what-makes-twitter-twitter.md b/content/posts/2012-07-07-what-makes-twitter-twitter.md
index 9506353a..d111dc0f 100644
--- a/content/posts/2012-07-07-what-makes-twitter-twitter.md
+++ b/content/posts/2012-07-07-what-makes-twitter-twitter.md
@@ -6,7 +6,7 @@ linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter
 author: Matthias Kretschmann
 
 date: 2012-07-07 08:18:58+00:00
-wordpress_id: 2252
+  
 categories:
 - links
 post_format:
diff --git a/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md
index fce0f311..2fbbb413 100644
--- a/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md
+++ b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md
@@ -6,7 +6,7 @@ linkurl: http://motherboard.vice.com/2012/7/10/crossdressing-compression-and-col
 author: Matthias Kretschmann
 
 date: 2012-07-11 21:00:07+00:00
-wordpress_id: 2261
+  
 categories:
 - photography
 post_format:
diff --git a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md
index 3fdd81b7..097d57a5 100644
--- a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md
+++ b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md
@@ -1,11 +1,11 @@
 ---
 layout: post
 title: Add your web site to the Windows 8 Metro UI
-image: kremalicious-Teaser-Metro-Tile.jpg
+image: ../media/kremalicious-Teaser-Metro-Tile.jpg
 author: Matthias Kretschmann
 
 date: 2012-07-15 16:19:55+00:00
-wordpress_id: 2269
+  
 categories:
 - design
 tags:
@@ -35,16 +35,16 @@ As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/com
 
 When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen:
 
-![](/media/Windows-8-Metro-tile-kremalicious.png)
+![](../media/Windows-8-Metro-tile-kremalicious.png)
 
 And this is how it looks like on the Windows 8 start screen:
 
-![](/media/Windows-8-Metro-tile-kremalicious-in-action.png)
+![](../media/Windows-8-Metro-tile-kremalicious-in-action.png)
 
 As you can see, pinned sites always get a smaller, square tile. Sadly, the image somehow still gets resized which makes it really hard to create pixel perfect icons for it. It's also not possible to horizontally center the image within it's tile, placing the logo at the bottom of the image file ended up the same. That's because the title can fill two rows.
 
 And the image is only used on the start screen but not on the All apps screen where your site will get the default IE logo, at least with the defined background color:
 
-![](/media/Windows-8-Metro-tile-kremalicious-all-apps.png)
+![](../media/Windows-8-Metro-tile-kremalicious-all-apps.png)
 
 The described behavior and screenshots are from the Windows 8 Consumer Preview and may change. I will update this article if there's new stuff in the final version.
diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md
index af97aede..2da6e6b6 100644
--- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md
+++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md
@@ -2,7 +2,7 @@
 layout: post
 
 title: Using &lt;kbd&gt; for fun and profit
-image: kremalicious-kbdfun-teaser.png
+image: ../media/kremalicious-kbdfun-teaser.png
 style: post-kbd.min.css
 author: Matthias Kretschmann
 featured: true
diff --git a/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md
index bbe49753..71047b90 100644
--- a/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md
+++ b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md
@@ -6,7 +6,7 @@ linkurl: http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First
 author: Matthias Kretschmann
 
 date: 2012-07-19 12:30:56+00:00
-wordpress_id: 2336
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2012-07-20-mmmmh-coffee.md b/content/posts/2012-07-20-mmmmh-coffee.md
index f88626e9..d13defa7 100644
--- a/content/posts/2012-07-20-mmmmh-coffee.md
+++ b/content/posts/2012-07-20-mmmmh-coffee.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Mmmmh, Coffee
-image: 66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg
+image: ../media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-07-20 11:02:30+00:00
-wordpress_id: 2345
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-08-07-projectpurple.md b/content/posts/2012-08-07-projectpurple.md
index 0fa547b8..f304a96d 100644
--- a/content/posts/2012-08-07-projectpurple.md
+++ b/content/posts/2012-08-07-projectpurple.md
@@ -2,8 +2,8 @@
 layout: post
 
 title: Project Purple
-image: Teaser-Project-Purple.png
-download: project-purple-kremalicious.zip
+image: ../media/Teaser-Project-Purple.png
+download: ../media/project-purple-kremalicious.zip
 author: Matthias Kretschmann
 featured: true
 
@@ -22,11 +22,11 @@ It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstal
 
 > Forstall said that "on the front door of the Purple Dorm we put a sign up that said 'Fight Club'... because the first rule of that project was to not talk about it outside those doors."
 
-![](/media/project-purple-nexus-kremalicious.png)
+![](../media/project-purple-nexus-kremalicious.png)
 
 The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too.
 
-![](/media/Project-Purple-Dribbble.png)
+![](../media/Project-Purple-Dribbble.png)
 
 ## Download
 
@@ -36,10 +36,10 @@ Download the whole package with all the sizes included or grab the individual on
     <a class="icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
 </p>
 
-  * [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
-  * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png)
-  * [iPad (1024x1024)](/media/project-purple-ipad-kremalicious.png)
-  * [iPhone (640x960)](/media/project-purple-iphone4-kremalicious.png)
+  * [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png)
+  * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](../media/project-purple-nexus-kremalicious.png)
+  * [iPad (1024x1024)](../media/project-purple-ipad-kremalicious.png)
+  * [iPhone (640x960)](../media/project-purple-iphone4-kremalicious.png)
 
 ## License
 
diff --git a/content/posts/2012-08-08-amazingly-early.md b/content/posts/2012-08-08-amazingly-early.md
index d277d5b6..f1026ae5 100644
--- a/content/posts/2012-08-08-amazingly-early.md
+++ b/content/posts/2012-08-08-amazingly-early.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Amazingly early
-image: 2ca7a094e10f11e1868c12313817a130_7.jpg
+image: ../media/2ca7a094e10f11e1868c12313817a130_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-08-08 04:11:48+00:00
-wordpress_id: 2384
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-08-20-im-joining-ezeep.md b/content/posts/2012-08-20-im-joining-ezeep.md
index 6c854dae..725572fc 100644
--- a/content/posts/2012-08-20-im-joining-ezeep.md
+++ b/content/posts/2012-08-20-im-joining-ezeep.md
@@ -2,11 +2,11 @@
 layout: post
 
 title: I'm joining ezeep
-image: kremalicious-Teaser-ezeep.png
+image: ../media/kremalicious-Teaser-ezeep.png
 author: Matthias Kretschmann
 
 date: 2012-08-20 14:12:11+00:00
-wordpress_id: 2387
+  
 categories:
 - personal
 tags:
diff --git a/content/posts/2012-08-25-so-much-room.md b/content/posts/2012-08-25-so-much-room.md
index 7fd7331c..b9ef665f 100644
--- a/content/posts/2012-08-25-so-much-room.md
+++ b/content/posts/2012-08-25-so-much-room.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: So much room
-image: c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg
+image: ../media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-08-25 10:50:58+00:00
-wordpress_id: 2409
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-09-07-huge-station-is-huge.md b/content/posts/2012-09-07-huge-station-is-huge.md
index 42416ed2..2516c06e 100644
--- a/content/posts/2012-09-07-huge-station-is-huge.md
+++ b/content/posts/2012-09-07-huge-station-is-huge.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Huge station is huge
-image: 619b3900f92911e1a31922000a1cddf1_7.jpg
+image: ../media/619b3900f92911e1a31922000a1cddf1_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-09-07 20:19:52+00:00
-wordpress_id: 2412
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-09-10-subway-firefox.md b/content/posts/2012-09-10-subway-firefox.md
index 84227f25..c54a879c 100644
--- a/content/posts/2012-09-10-subway-firefox.md
+++ b/content/posts/2012-09-10-subway-firefox.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Subway Firefox
-image: 84f9d2c4fb7411e19ca422000a1d0119_7.jpg
+image: ../media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-09-10 18:22:46+00:00
-wordpress_id: 2415
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-09-12-sweet-typography.md b/content/posts/2012-09-12-sweet-typography.md
index b542055f..a4f0390a 100644
--- a/content/posts/2012-09-12-sweet-typography.md
+++ b/content/posts/2012-09-12-sweet-typography.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Sweet typography
-image: 01f8b0b8fcc611e19b5b123138140bce_7.jpg
+image: ../media/01f8b0b8fcc611e19b5b123138140bce_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-09-12 10:38:36+00:00
-wordpress_id: 2418
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-09-14-bvg-dos.md b/content/posts/2012-09-14-bvg-dos.md
index c85e0e34..e0a61368 100644
--- a/content/posts/2012-09-14-bvg-dos.md
+++ b/content/posts/2012-09-14-bvg-dos.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: BVG DOS
-image: 6c4003f2fe9911e1ae9122000a1e9e21_7.jpg
+image: ../media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg
 author: Matthias Kretschmann
 
 date: 2012-09-14 18:24:29+00:00
-wordpress_id: 2421
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2012-09-26-designing-with-code.md b/content/posts/2012-09-26-designing-with-code.md
index 3414752f..08d1267e 100644
--- a/content/posts/2012-09-26-designing-with-code.md
+++ b/content/posts/2012-09-26-designing-with-code.md
@@ -6,7 +6,7 @@ linkurl: http://www.teehanlax.com/blog/designing-with-code/
 author: Matthias Kretschmann
 
 date: 2012-09-26 11:45:40+00:00
-wordpress_id: 2424
+  
 categories:
 - design
 post_format:
diff --git a/content/posts/2013-02-17-castle-garden.md b/content/posts/2013-02-17-castle-garden.md
index aecce5c6..92213683 100644
--- a/content/posts/2013-02-17-castle-garden.md
+++ b/content/posts/2013-02-17-castle-garden.md
@@ -2,11 +2,11 @@
 layout: photo
 
 title: Castle Garden
-image: 8372983659_da0e88ca79_o.jpg
+image: ../media/8372983659_da0e88ca79_o.jpg
 author: Matthias Kretschmann
 
 date: 2013-02-17 11:50:21+00:00
-wordpress_id: 2434
+  
 categories:
 - photos
 post_format:
diff --git a/content/posts/2013-02-17-ezeep-android-app-design.md b/content/posts/2013-02-17-ezeep-android-app-design.md
index b5cdd33b..da583c70 100644
--- a/content/posts/2013-02-17-ezeep-android-app-design.md
+++ b/content/posts/2013-02-17-ezeep-android-app-design.md
@@ -2,7 +2,7 @@
 layout: photo
 
 title: ezeep Android App Design
-image: 8455835942_a9b9100373_o.jpg
+image: ../media/8455835942_a9b9100373_o.jpg
 author: Matthias Kretschmann
 
 categories:
diff --git a/content/posts/2013-02-17-ezeep-office-view.md b/content/posts/2013-02-17-ezeep-office-view.md
index 1573c23d..b090264c 100644
--- a/content/posts/2013-02-17-ezeep-office-view.md
+++ b/content/posts/2013-02-17-ezeep-office-view.md
@@ -2,7 +2,7 @@
 layout: photo
 
 title: ezeep office view
-image: 8450618380_83c64006c6_o.jpg
+image: ../media/8450618380_83c64006c6_o.jpg
 author: Matthias Kretschmann
 
 categories:
diff --git a/content/posts/2013-05-23-ezeep-birds.md b/content/posts/2013-05-23-ezeep-birds.md
index 8a1e2a82..d5803997 100644
--- a/content/posts/2013-05-23-ezeep-birds.md
+++ b/content/posts/2013-05-23-ezeep-birds.md
@@ -2,7 +2,7 @@
 layout: photo
 
 title: ezeep birds
-image: 8776417095_43553c88c2_o.jpg
+image: ../media/8776417095_43553c88c2_o.jpg
 author: Matthias Kretschmann
 categories:
 - photos
diff --git a/content/posts/2013-05-23-ezeep-origami.md b/content/posts/2013-05-23-ezeep-origami.md
index 9e44bca8..b54de5eb 100644
--- a/content/posts/2013-05-23-ezeep-origami.md
+++ b/content/posts/2013-05-23-ezeep-origami.md
@@ -2,7 +2,7 @@
 layout: photo
 
 title: ezeep origami
-image: 8782995066_e90ff6b3ae_o.jpg
+image: ../media/8782995066_e90ff6b3ae_o.jpg
 author: Matthias Kretschmann
 
 categories:
diff --git a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md
index 42086f2d..637abef1 100644
--- a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md
+++ b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md
@@ -2,7 +2,7 @@
 layout: post
 
 title: 'Stealing Time: How Technology Can Hurt or Harm Our Inner State'
-image: post-time.png
+image: ../media/post-time.png
 author: Matthias Kretschmann
 categories:
 - design
diff --git a/content/posts/2014-03-10-just-a-normal-sunday.md b/content/posts/2014-03-10-just-a-normal-sunday.md
index e4a5825d..c4691381 100644
--- a/content/posts/2014-03-10-just-a-normal-sunday.md
+++ b/content/posts/2014-03-10-just-a-normal-sunday.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Just a normal Sunday
-image: just-a-normal-sunday.jpg
+image: ../media/just-a-normal-sunday.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2014-03-15-potsdam.md b/content/posts/2014-03-15-potsdam.md
index 5ec7df4c..21ff58d4 100644
--- a/content/posts/2014-03-15-potsdam.md
+++ b/content/posts/2014-03-15-potsdam.md
@@ -1,8 +1,7 @@
 ---
 layout: photo
-published: true
 title: Potsdam
-image: potsdam.jpg
+image: ../media/potsdam.jpg
 author: Matthias Kretschmann
 category: photos
 ---
@@ -11,4 +10,4 @@ Potsdam at Potsdamer Stadtschloss
 
 [flickr](https://www.flickr.com/photos/krema/13229034343/) | [EyeEm](http://www.eyeem.com/p/32659561)
 
-Processed with VSCOcam with b3 preset
\ No newline at end of file
+Processed with VSCOcam with b3 preset
diff --git a/content/posts/2014-03-17-typographic-diamond.md b/content/posts/2014-03-17-typographic-diamond.md
index 4b070164..b16c7aac 100644
--- a/content/posts/2014-03-17-typographic-diamond.md
+++ b/content/posts/2014-03-17-typographic-diamond.md
@@ -1,8 +1,7 @@
 ---
 layout: photo
-published: true
 title: Typographic diamond
-image: typographic-diamond.jpg
+image: ../media/typographic-diamond.jpg
 author: Matthias Kretschmann
 category: photos
 ---
@@ -11,4 +10,4 @@ Typographic diamond at Hobrechtstraße
 
 [flickr](https://www.flickr.com/photos/krema/13229327324/) | [EyeEm](http://www.eyeem.com/p/32659836)
 
-Processed with VSCOcam with b5 preset
\ No newline at end of file
+Processed with VSCOcam with b5 preset
diff --git a/content/posts/2014-04-26-ai-weiwei-stools.md b/content/posts/2014-04-26-ai-weiwei-stools.md
index 2b014438..f5a962cb 100644
--- a/content/posts/2014-04-26-ai-weiwei-stools.md
+++ b/content/posts/2014-04-26-ai-weiwei-stools.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Ai Weiwei, Stools
-image: ai-wei-wei-stools.jpg
+image: ../media/ai-wei-wei-stools.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2014-06-07-airfield-reference-point.md b/content/posts/2014-06-07-airfield-reference-point.md
index 239c9ec5..9235e2a1 100644
--- a/content/posts/2014-06-07-airfield-reference-point.md
+++ b/content/posts/2014-06-07-airfield-reference-point.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Airfield Reference Point
-image: airfield-reference-point.jpg
+image: ../media/airfield-reference-point.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md
index 043caeb3..a3aec312 100644
--- a/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md
+++ b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Anton Henning, Heimat schaffen, Simpsons
-image: 2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg
+image: ../media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md
index 8a477307..58530d7f 100644
--- a/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md
+++ b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Thanks for the tip little orange blob
-image: 2015-03-29-thanks-for-the-tip-little-orange-blob.jpg
+image: ../media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md
index 75a42040..9e7545a9 100644
--- a/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md
+++ b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Suddenly... a new Hindu temple appears around the corner
-image: 2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg
+image: ../media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2015-04-09-most-surprising-dog-i-know.md b/content/posts/2015-04-09-most-surprising-dog-i-know.md
index ece4a90e..a4aafa2d 100644
--- a/content/posts/2015-04-09-most-surprising-dog-i-know.md
+++ b/content/posts/2015-04-09-most-surprising-dog-i-know.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Most surprising dog I know
-image: most-surprising-dog-i-know.jpg
+image: ../media/most-surprising-dog-i-know.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md
index 01881682..617e8168 100644
--- a/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md
+++ b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Obligatory it's summer in Berlin photo
-image: obligatory-it-s-summer-in-berlin-photo.jpg
+image: ../media/obligatory-it-s-summer-in-berlin-photo.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md
index 385eaa1f..f18b96ab 100644
--- a/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md
+++ b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: That moment when your childhood toys hang painted in a gallery
-image: Monstrum_Gameboy_Catherine_Kaleel.jpg
+image: ../media/Monstrum_Gameboy_Catherine_Kaleel.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2015-04-25-tiny-tiny-demons.md b/content/posts/2015-04-25-tiny-tiny-demons.md
index d9758bdc..8e3e6930 100644
--- a/content/posts/2015-04-25-tiny-tiny-demons.md
+++ b/content/posts/2015-04-25-tiny-tiny-demons.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Tiny tiny demons
-image: tiny_tiny_demons.jpg
+image: ../media/tiny_tiny_demons.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md
index 5d7078c6..21d19d4b 100644
--- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md
+++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md
@@ -2,7 +2,7 @@
 layout: post
 
 title: Simple Tor setup on macOS
-image: teaser-tor.png
+image: ../media/teaser-tor.png
 author: Matthias Kretschmann
 date: 2015-08-02 21:57:30.912218000 +02:00
 updated: 2018-07-11 00:52:46+02:00
@@ -33,7 +33,7 @@ I'm using macOS High Sierra (10.13) for the following instructions but it should
 
 ## Tor Browser
 
-![Tor Browser](/media/tor-browser.png)
+![Tor Browser](../media/tor-browser.png)
 
 The most simple way to surf anonymously with Tor is to just grab [Tor Browser](https://www.torproject.org/projects/torbrowser.html.en). It's a modified version of [Firefox Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/) with Tor and some extensions (Torbutton, TorLauncher, NoScript, and HTTPS-Everywhere) built right in. Upon start, Tor Browser automatically starts the required Tor background processes and routes traffic through the Tor network. That's the way to go if you want the highest level of protection without much further configuration.
 
@@ -76,7 +76,7 @@ You can do this under *System Preferences > Network* by creating a specific Tor
 - *SOCKS proxy server*: `localhost`
 - *Port*: `9050`
 
-![Network Settings](/media/tor-osx-proxy.png)
+![Network Settings](../media/tor-osx-proxy.png)
 
 After hitting *OK* & *Apply* at the initial network screen, you can easily switch to this newly created location from your menu bar under * > Location* whenever you start up Tor.
 
@@ -132,7 +132,7 @@ tor.sh
 
 and Tor should run smoothly on your system without additional configuration:
 
-![Tor running in Terminal](/media/tor-osx-terminal.png)
+![Tor running in Terminal](../media/tor-osx-terminal.png)
 
 Verify you're indeed browsing over the Tor network by going to [check.torproject.org](https://check.torproject.org).
 
diff --git a/content/posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md
index b3162296..93aa7772 100644
--- a/content/posts/2015-09-13-css-app-store-badges.md
+++ b/content/posts/2015-09-13-css-app-store-badges.md
@@ -2,7 +2,7 @@
 layout: post
 
 title: CSS App Store Badges
-image: teaser-appstorebadges.png
+image: ../media/teaser-appstorebadges.png
 
 author: Matthias Kretschmann
 date: 2015-09-13 18:55:18.418548000 +02:00
diff --git a/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md
index 0f636b56..8e5ce3ca 100644
--- a/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md
+++ b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: 'Gaudí knows how to impress with a ceiling'
-image: sagrada-familia-ceiling.jpg
+image: ../media/sagrada-familia-ceiling.jpg
 author: Matthias Kretschmann
 date: 2016-02-25 16:52:24.544813000 +01:00
 category: photos
diff --git a/content/posts/2016-02-27-streets-of-el-raval.md b/content/posts/2016-02-27-streets-of-el-raval.md
index ba6b7c4a..c8b5c686 100644
--- a/content/posts/2016-02-27-streets-of-el-raval.md
+++ b/content/posts/2016-02-27-streets-of-el-raval.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Streets of El Raval
-image: streets-of-el-raval.jpg
+image: ../media/streets-of-el-raval.jpg
 author: Matthias Kretschmann
 date: 2016-02-27 17:28:23.878566000 +01:00
 category: photos
diff --git a/content/posts/2016-03-02-a-storm-is-coming.md b/content/posts/2016-03-02-a-storm-is-coming.md
index 5a3cf4ec..8ab6be83 100644
--- a/content/posts/2016-03-02-a-storm-is-coming.md
+++ b/content/posts/2016-03-02-a-storm-is-coming.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: A storm is coming
-image: a-storm-is-coming.jpg
+image: ../media/a-storm-is-coming.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md
index b93373b0..d8425ac9 100644
--- a/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md
+++ b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: K. Haring vandalizing a wall
-image: keith-haring-vandalizing-a-wall.jpg
+image: ../media/keith-haring-vandalizing-a-wall.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2017-02-13-streets-of-el-born.md b/content/posts/2017-02-13-streets-of-el-born.md
index 40b72680..cc6cf68d 100644
--- a/content/posts/2017-02-13-streets-of-el-born.md
+++ b/content/posts/2017-02-13-streets-of-el-born.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Streets of El Born
-image: streets-of-el-born.jpg
+image: ../media/streets-of-el-born.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2017-02-14-new-passion-facade.md b/content/posts/2017-02-14-new-passion-facade.md
index f734543d..68256acf 100644
--- a/content/posts/2017-02-14-new-passion-facade.md
+++ b/content/posts/2017-02-14-new-passion-facade.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: New Passion Façade
-image: new-passion-facade.jpg
+image: ../media/new-passion-facade.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2017-02-16-coolhaven-rotterdam.md b/content/posts/2017-02-16-coolhaven-rotterdam.md
index 65fd4788..03f8896a 100644
--- a/content/posts/2017-02-16-coolhaven-rotterdam.md
+++ b/content/posts/2017-02-16-coolhaven-rotterdam.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Coolhaven Rotterdam
-image: coolhaven-rotterdam.jpg
+image: ../media/coolhaven-rotterdam.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2017-02-17-behind-the-art.md b/content/posts/2017-02-17-behind-the-art.md
index 35612707..8789412a 100644
--- a/content/posts/2017-02-17-behind-the-art.md
+++ b/content/posts/2017-02-17-behind-the-art.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Behind the art
-image: behind-the-art.jpg
+image: ../media/behind-the-art.jpg
 author: Matthias Kretschmann
 category: photos
 ---
diff --git a/content/posts/2017-02-19-rotterdam-coats.md b/content/posts/2017-02-19-rotterdam-coats.md
index 56467acf..aedd60d9 100644
--- a/content/posts/2017-02-19-rotterdam-coats.md
+++ b/content/posts/2017-02-19-rotterdam-coats.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Rotterdam coats
-image: 2017-02-19-rotterdam-coats.jpg
+image: ../media/2017-02-19-rotterdam-coats.jpg
 author: Matthias Kretschmann
 date: 2017-02-19 21:13:38.626498000 +02:00
 category: photos
diff --git a/content/posts/2017-02-21-david-chipperfield-staircase.md b/content/posts/2017-02-21-david-chipperfield-staircase.md
index d0f86ae1..7f6755c0 100644
--- a/content/posts/2017-02-21-david-chipperfield-staircase.md
+++ b/content/posts/2017-02-21-david-chipperfield-staircase.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: David Chipperfield staircase
-image: 2017-02-21-david-chipperfield-staircase.jpg
+image: ../media/2017-02-21-david-chipperfield-staircase.jpg
 author: Matthias Kretschmann
 date: 2017-02-21 21:18:36.350189000 +02:00
 category: photos
diff --git a/content/posts/2017-02-26-eu-gotham-city.md b/content/posts/2017-02-26-eu-gotham-city.md
index 38d52562..1c10730f 100644
--- a/content/posts/2017-02-26-eu-gotham-city.md
+++ b/content/posts/2017-02-26-eu-gotham-city.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: EU Gotham City
-image: 2017-02-26-eu-gotham-city.jpg
+image: ../media/2017-02-26-eu-gotham-city.jpg
 author: Matthias Kretschmann
 date: 2017-02-26 23:32:50.225380000 +02:00
 category: photos
diff --git a/content/posts/2017-02-27-amsterdam-cliche.md b/content/posts/2017-02-27-amsterdam-cliche.md
index 359009ff..3f44a595 100644
--- a/content/posts/2017-02-27-amsterdam-cliche.md
+++ b/content/posts/2017-02-27-amsterdam-cliche.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Amsterdam cliché
-image: 2017-02-27-amsterdam-cliche.jpg
+image: ../media/2017-02-27-amsterdam-cliche.jpg
 author: Matthias Kretschmann
 date: 2017-02-27 16:21:42.964539000 +02:00
 category: photos
diff --git a/content/posts/2017-02-27-its-dark-and-i-dont-exist.md b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md
index d9748115..04e7da80 100644
--- a/content/posts/2017-02-27-its-dark-and-i-dont-exist.md
+++ b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "It's dark and I don't exist"
-image: 2017-02-27-its-dark-and-i-dont-exist.jpg
+image: ../media/2017-02-27-its-dark-and-i-dont-exist.jpg
 author: Matthias Kretschmann
 date: 2017-02-27 17:29:32.626557000 +02:00
 category: photos
diff --git a/content/posts/2017-02-28-stedelijk-museum.md b/content/posts/2017-02-28-stedelijk-museum.md
index a60141d7..88fb38fc 100644
--- a/content/posts/2017-02-28-stedelijk-museum.md
+++ b/content/posts/2017-02-28-stedelijk-museum.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Stedelijk Museum
-image: 2017-02-28-stedelijk-museum.jpg
+image: ../media/2017-02-28-stedelijk-museum.jpg
 author: Matthias Kretschmann
 date: 2017-02-28 13:48:35.217273000 +02:00
 category: photos
diff --git a/content/posts/2017-02-28-temple-guardian-rijksmuseum.md b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md
index 3a9c014c..676a4075 100644
--- a/content/posts/2017-02-28-temple-guardian-rijksmuseum.md
+++ b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Temple Guardian Rijksmuseum
-image: 2017-02-28-temple-guardian-rijksmuseum.jpg
+image: ../media/2017-02-28-temple-guardian-rijksmuseum.jpg
 author: Matthias Kretschmann
 date: 2017-02-28 15:38:28.206431000 +02:00
 category: photos
diff --git a/content/posts/2017-02-28-watching-the-night-watch.md b/content/posts/2017-02-28-watching-the-night-watch.md
index b687a61a..90bf1ae2 100644
--- a/content/posts/2017-02-28-watching-the-night-watch.md
+++ b/content/posts/2017-02-28-watching-the-night-watch.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Watching The Night Watch
-image: 2017-02-28-watching-the-night-watch.jpg
+image: ../media/2017-02-28-watching-the-night-watch.jpg
 author: Matthias Kretschmann
 date: 2017-02-28 14:45:08.139508000 +02:00
 category: photos
diff --git a/content/posts/2017-04-16-hamburgs-elbphilharmonie.md b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md
index fc8755fb..b64952de 100644
--- a/content/posts/2017-04-16-hamburgs-elbphilharmonie.md
+++ b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Hamburg's Elbphilharmonie
-image: 2017-04-16-hamburgs-elbphilharmonie.jpg
+image: ../media/2017-04-16-hamburgs-elbphilharmonie.jpg
 author: Matthias Kretschmann
 date: 2017-04-16 18:26:20.280801000 +02:00
 category: photos
diff --git a/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md
index 9d515009..80ee6c46 100644
--- a/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md
+++ b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Kapaleeshwarar Temple Chennai
-image: 2017-07-05-kapaleeshwarar-temple-chennai.jpg
+image: ../media/2017-07-05-kapaleeshwarar-temple-chennai.jpg
 author: Matthias Kretschmann
 date: 2017-07-05 21:21:41.413746000 +02:00
 category: photos
diff --git a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md
index d595f845..15748a47 100644
--- a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md
+++ b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "Kochi's street art game is strong"
-image: 2017-07-14-kochis-streetart-game-is-strong.jpg
+image: ../media/2017-07-14-kochis-streetart-game-is-strong.jpg
 author: Matthias Kretschmann
 date: 2017-07-08 14:28:19.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-07-09-orphaned-elephant-with-friend.md b/content/posts/2017-07-09-orphaned-elephant-with-friend.md
index 286d584e..9bdf10a3 100644
--- a/content/posts/2017-07-09-orphaned-elephant-with-friend.md
+++ b/content/posts/2017-07-09-orphaned-elephant-with-friend.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Orphaned elephant with friend
-image: 2017-07-09-orphaned-elephant-with-friend.jpg
+image: ../media/2017-07-09-orphaned-elephant-with-friend.jpg
 author: Matthias Kretschmann
 date: 2017-07-09 09:41:37.771378000 +02:00
 category: photos
diff --git a/content/posts/2017-07-10-kochis-dhobhi-ghat.md b/content/posts/2017-07-10-kochis-dhobhi-ghat.md
index fa6f5a21..652e2e8d 100644
--- a/content/posts/2017-07-10-kochis-dhobhi-ghat.md
+++ b/content/posts/2017-07-10-kochis-dhobhi-ghat.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: Kochis dhobhi ghat
-image: 2017-07-10-kochis-dhobhi-ghat.jpg
+image: ../media/2017-07-10-kochis-dhobhi-ghat.jpg
 author: Matthias Kretschmann
 date: 2017-07-10 14:28:19.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-07-13-mumbai-hand-painted-typography.md b/content/posts/2017-07-13-mumbai-hand-painted-typography.md
index 6796d39e..f1715a59 100644
--- a/content/posts/2017-07-13-mumbai-hand-painted-typography.md
+++ b/content/posts/2017-07-13-mumbai-hand-painted-typography.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "The art of hand painted typography"
-image: 2017-07-13-mumbai-hand-painted-typography.jpg
+image: ../media/2017-07-13-mumbai-hand-painted-typography.jpg
 author: Matthias Kretschmann
 date: 2017-07-13 16:28:19.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-07-13-obligatory-gate-of-india-photo.md b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md
index 48881cc7..6ac78767 100644
--- a/content/posts/2017-07-13-obligatory-gate-of-india-photo.md
+++ b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "Obligatory Gateway of India photo"
-image: 2017-07-13-obligatory-gate-of-india-photo.jpg
+image: ../media/2017-07-13-obligatory-gate-of-india-photo.jpg
 author: Matthias Kretschmann
 date: 2017-07-13 14:28:19.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md
index e8737a19..66a3509e 100644
--- a/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md
+++ b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "Chhatrapati Shivaji Maharaj Vastu Sangrahalaya"
-image: 2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg
+image: ../media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg
 author: Matthias Kretschmann
 date: 2017-07-14 14:28:19.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-11-10-acropolis-the-erechtheum.md b/content/posts/2017-11-10-acropolis-the-erechtheum.md
index 2de4be67..778a8b8b 100644
--- a/content/posts/2017-11-10-acropolis-the-erechtheum.md
+++ b/content/posts/2017-11-10-acropolis-the-erechtheum.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "The Erechtheum"
-image: 2017-11-10-acropolis-the-erechtheum.jpg
+image: ../media/2017-11-10-acropolis-the-erechtheum.jpg
 author: Matthias Kretschmann
 date: 2017-11-10 14:42:19.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-11-10-acropolis-the-parthenon.md b/content/posts/2017-11-10-acropolis-the-parthenon.md
index 709646eb..a9fe62fb 100644
--- a/content/posts/2017-11-10-acropolis-the-parthenon.md
+++ b/content/posts/2017-11-10-acropolis-the-parthenon.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "The Parthenon"
-image: 2017-11-10-acropolis-the-parthenon.jpg
+image: ../media/2017-11-10-acropolis-the-parthenon.jpg
 author: Matthias Kretschmann
 date: 2017-11-10 14:37:19.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-11-10-acropolis-the-propylaea.md b/content/posts/2017-11-10-acropolis-the-propylaea.md
index de1af7e2..8c1b4402 100644
--- a/content/posts/2017-11-10-acropolis-the-propylaea.md
+++ b/content/posts/2017-11-10-acropolis-the-propylaea.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "The Propylaea"
-image: 2017-11-10-acropolis-the-propylaea.jpg
+image: ../media/2017-11-10-acropolis-the-propylaea.jpg
 author: Matthias Kretschmann
 date: 2017-11-10 14:32:19.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-12-16-sagrada-familia.md b/content/posts/2017-12-16-sagrada-familia.md
index f1a2eb6e..5165dbce 100644
--- a/content/posts/2017-12-16-sagrada-familia.md
+++ b/content/posts/2017-12-16-sagrada-familia.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "Sagrada Família"
-image: 2017-12-16-sagrada-familia.jpg
+image: ../media/2017-12-16-sagrada-familia.jpg
 author: Matthias Kretschmann
 date: 2017-12-16 13:01:21.869188000 +02:00
 category: photos
diff --git a/content/posts/2017-12-27-sao-paulo-traffic.md b/content/posts/2017-12-27-sao-paulo-traffic.md
index 177fe3f8..1cb4fe33 100644
--- a/content/posts/2017-12-27-sao-paulo-traffic.md
+++ b/content/posts/2017-12-27-sao-paulo-traffic.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "Traffic of São Paulo"
-image: 2017-12-27-sao-paulo-traffic.jpg
+image: ../media/2017-12-27-sao-paulo-traffic.jpg
 author: Matthias Kretschmann
 date: 2017-12-27 13:03:21.869188000 -02:00
 category: photos
diff --git a/content/posts/2018-01-04-passagem-literaria-da-consolacao.md b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md
index 375c71a5..76683556 100644
--- a/content/posts/2018-01-04-passagem-literaria-da-consolacao.md
+++ b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "Passagem Literária da Consolação"
-image: 2018-01-04-passagem-literaria-da-consolacao.jpg
+image: ../media/2018-01-04-passagem-literaria-da-consolacao.jpg
 author: Matthias Kretschmann
 date: 2018-01-04 16:02:02.869188000 -02:00
 category: photos
diff --git a/content/posts/2018-01-05-samba-school.md b/content/posts/2018-01-05-samba-school.md
index 0ed514d0..d8c3ad98 100644
--- a/content/posts/2018-01-05-samba-school.md
+++ b/content/posts/2018-01-05-samba-school.md
@@ -1,7 +1,7 @@
 ---
 layout: photo
 title: "Escola de Samba"
-image: 2018-01-05-samba-school.jpg
+image: ../media/2018-01-05-samba-school.jpg
 author: Matthias Kretschmann
 date: 2018-01-05 21:56:02.869188000 -02:00
 category: photos