Windows Live Writer Picture Frame Decorations

by Klaus Graefensteiner 22. December 2009 09:10

This blog post demonstrates the different picture frame settings provided by Windows Live Writer and the related html markup.

Border configurations

Borders: None

LemonCake1

Figure 1: Lemon Cake with no borders

Borders: Drop Shadow

LemonCake2

Figure 2: Lemon Cake with drop shadow

Borders: Instant Photo

LemonCake3

Figure 3: Lemon Cake as instant photo

Borders: Photo Paper

LemonCake5l

Figure 4: Lemon Cake on photo paper

Borders: Reflection

Figure 5: Lemon Cake with reflection

Borders: Rounded Corners

LemonCake6

Figure 6: Lemon Cake with rounded corners

Borders: Solid 1 pixel

LemonCake4

Figure 7: Lemon Cake in solid 1 pixel

Borders: Solid 3 pixel

LemonCake8

Figure 8: Lemon Cake in solid 3 pixel

Resulting Windows Live Writer markup

<p>This blog post demonstrates the different picture frame settings provided by Windows Live Writer and the related html markup.</p>

<h1>Border configurations</h1>

<h2>Borders: None</h2>

<p><a href="$LemonCake1[3].jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="LemonCake1" border="0" alt="LemonCake1" src="$LemonCake1_thumb[1].jpg" width="350" height="263" /></a> </p>

<p><strong>Figure 1: Lemon Cake with no borders</strong></p>

<h2>Borders: Drop Shadow</h2>

<p><a href="$LemonCake2[2].jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="LemonCake2" border="0" alt="LemonCake2" src="$LemonCake2_thumb.jpg" width="603" height="484" /></a> </p>

<p><strong>Figure 2: Lemon Cake with drop shadow</strong></p>

<h2>Borders: Instant Photo</h2>

<p><a href="$LemonCake3[3].jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="LemonCake3" border="0" alt="LemonCake3" src="$LemonCake3_thumb[1].jpg" width="556" height="662" /></a> </p>

<p><strong>Figure 3: Lemon Cake as instant photo</strong></p>

<h2>Borders: Photo Paper</h2>

<p><a href="$LemonCake5l[3].jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="LemonCake5l" border="0" alt="LemonCake5l" src="$LemonCake5l_thumb[1].jpg" width="620" height="470" /></a> </p>

<p><strong>Figure 4: Lemon Cake on photo paper</strong></p>

<h2>Borders: Reflection</h2>

<p><a href="$LemonCake7[3].jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="" border="0" alt="" src="$LemonCake7_thumb[1].jpg" width="616" height="548" /></a> </p>

<p><strong>Figure 5: Lemon Cake with reflection</strong></p>

<h2>Borders: Rounded Corners</h2>

<p><a href="$LemonCake6[3].jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="LemonCake6" border="0" alt="LemonCake6" src="$LemonCake6_thumb[1].jpg" width="540" height="364" /></a> </p>

<p><strong>Figure 6: Lemon Cake with rounded corners</strong></p>

<h2>Borders: Solid 1 pixel</h2>

<p><a href="$LemonCake4[7].jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="LemonCake4" border="0" alt="LemonCake4" src="$LemonCake4_thumb[3].jpg" width="402" height="335" /></a> </p>

<p><strong>Figure 7: Lemon Cake in solid 1 pixel</strong></p>

<h2>Borders: Solid 3 pixel</h2>

<p><a href="$LemonCake8[3].jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="LemonCake8" border="0" alt="LemonCake8" src="$LemonCake8_thumb[1].jpg" width="454" height="326" /></a> </p>

<p><strong>Figure 8: Lemon Cake in solid 3 pixel</strong></p>

<h1>Resulting Windows Live Writer markup</h1>

Ausblick

The result of this little research is that Windows Live Writer applies the picture thumbnail decorations as part of the image files and doesn’t actually use any client side JavaScript image manipulations.

Here are the pictures previews on the file system of the web server:

PreRenderedCakes

Figure 8: Pre-rendered Lemon Cake pictures on the server

Tags: ,

Blog Kebab | Blogging

About Klaus Graefensteiner

I like the programming of machines.

Add to Google Reader or Homepage

LinkedIn FacebookTwitter View Klaus Graefensteiner's profile on Technorati
Klaus Graefensteiner

Klaus Graefensteiner
works as Developer In Test and is founder of the PowerShell Unit Testing Framework PSUnit. More...

Open Source Projects

PSUnit is a Unit Testing framwork for PowerShell. It is designed for simplicity and hosted by Codeplex.
BlogShell is The tool for lazy developers who like to automate the composition of blog content during the writing of a blog post. It is hosted by CodePlex.

Administration

About

Powered by:
BlogEngine.Net
Version: 1.6.1.0

License:
Creative Commons License

Copyright:
© Copyright 2012, Klaus Graefensteiner.

Disclaimer:
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

Theme design:
This blog theme was designed and is copyrighted 2012 by Klaus Graefensteiner

Rendertime:
Page rendered at 5/17/2012 2:43:37 PM (PST Pacific Standard Time UTC DST -7)