Windows Live Writer Picture Sizes, Links and Locations

by Klaus Graefensteiner 14. December 2009 09:24

This blog post studies the workflow of markup conversions and html encodings of picture and picture gallery links starting from Windows Live Writer, over the BlogEngine.NET XML format to finally the html that gets sent to the browser. It is basically a reference for myself while working on a PowerShell script that is going to automate the picture publishing process with in BlogEngine.NET.

Small (240 by 180)

image

Opens in new window

Chrysanthemum

Figure 1: Small Picture

WLW Markup

<p> 
 <a href="$Chrysanthemum6.jpg" target="_blank">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Chrysanthemum" border="0" alt="Chrysanthemum" src="$Chrysanthemum_thumb4.jpg" width="244" height="184" />
 </a>
</p>

BE BlogPost XML Markup

&lt;p&gt;&lt;a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fChrysanthemum_2.jpg" target="_blank"&gt;
&lt;img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Chrysanthemum" border="0" alt="Chrysanthemum" 
src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fChrysanthemum_thumb.jpg" width="244" height="184" /&gt;&lt;/a&gt;&lt;/p&gt;

Client Markup

<p>
 <a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fChrysanthemum_2.jpg" target="_blank">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Chrysanthemum" border="0" alt="Chrysanthemum" src="http://www.tellingmachine.com/image.axd?Picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fChrysanthemum_thumb.jpg" width="244" height="184" />
 </a>
</p>

Medium (640 by 480)

image

Opens in the same window

Desert

Figure 2: Medium Picture

WLW Markup

<p>
 <a href="$Desert3.jpg">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" Title="Desert" border="0" alt="Desert" src="$Desert_thumb1.jpg" width="644" height="484" />
 </a>
</p>

BE BlogPost XML Markup

&lt;p&gt;&lt;a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fDesert_2.jpg&
quot;&gt;&lt;img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Desert" border="0" alt="Desert" 
src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fDesert_thumb.jpg" width="644" height="484" /&gt;&lt;/a&gt; &lt;/p&gt;

Client Markup

<p>
 <a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fDesert_2.jpg">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Desert" border="0" alt="Desert" src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fDesert_thumb.jpg" width="644" height="484" />
 </a>
</p>

Large Picture (1024 by 768)

image

Opens reduced scale picture in new window

Penguins

Figure 3: Large Picture

WLW Markup

<p>
 <a href="$Penguins4.jpg" target="_blank">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" Title="Penguins" border="0" alt="Penguins" src="$Penguins_thumb2.jpg" width="1028" height="772" />
 </a> 
</p>

BE BlogPost XML Markup

&lt;p&gt;&lt;a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fPenguins_2.jpg" target="_blank"&gt;
&lt;img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Penguins" border="0" alt="Penguins" src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fPenguins_thumb.jpg" width="1028" height="772" /&gt;&lt;/a&gt; &lt;/p&gt;

Client Markup

<p>
 <a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fPenguins_2.jpg" target="_blank">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Penguins" border="0" alt="Penguins" src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fPenguins_thumb.jpg" width="1028" height="772" />
 </a> 
</p>

Original Scale Picture (1024 by 768)

image

Opens in a new browser window with reduced (small) size

Jellyfish

Figure 4: Picture in original size

WLW Markup

<p>
 <a href="$Jellyfish5.jpg">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Jellyfish" border="0" alt="Jellyfish" src="$Jellyfish_thumb3.jpg" width="1028" height="772" />
 </a>
</p>

BE BlogPost XML Markup

&lt;p&gt;&lt;a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fJellyfish_2.jpg"&gt;
&lt;img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Jellyfish" border="0" alt="Jellyfish" 
src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fJellyfish_thumb.jpg" width="1028" height="772" /&gt;&lt;/a&gt; &lt;/p&gt;

Client Markup

<p>
 <a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fJellyfish_2.jpg">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Jellyfish" border="0" alt="Jellyfish" src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fJellyfish_thumb.jpg" width="1028" height="772" />
 </a>
</p>

LightBox 2.0

Single image displayed with the LightBox javascript library.

Koala

WLW Markup

<p>
 <a href="$Koala3.jpg" rel="lightbox" target="_blank">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Koala" border="0" alt="Koala" src="$Koala_thumb1.jpg" width="244" height="184" />
 </a>
</p>

BE BlogPost XML Markup

&lt;p&gt;&lt;a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fKoala_2.jpg" rel="lightbox" target="_blank"&gt;
&lt;img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Koala" border="0" alt="Koala" 
src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fKoala_thumb.jpg" width="244" height="184" /&gt;&lt;/a&gt;&lt;/p&gt;

Client Markup

<p>
 <a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fKoala_2.jpg" rel="lightbox" target="_blank">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Koala" border="0" alt="Koala" src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fKoala_thumb.jpg" width="244" height="184" />
 </a>
</p>

A group of images displayed with the LightBox javascript library.

Tulips Chrysanthemum Hydrangeas

WLW Markup

<p>
 <a href="$Tulips3.jpg" rel="lightbox[flowers]" target="_blank">
  <img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Tulips" border="0" alt="Tulips" src="$Tulips_thumb1.jpg" width="244" height="184" /></a> <a href="$Chrysanthemum10.jpg" rel="lightbox[flowers]" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Chrysanthemum" border="0" alt="Chrysanthemum" src="$Chrysanthemum_thumb6.jpg" width="244" height="184" /></a> <a href="$Hydrangeas3.jpg" rel="lightbox[flowers]" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Hydrangeas" border="0" alt="Hydrangeas" src="$Hydrangeas_thumb1.jpg" width="244" height="184" />
 </a>
</p>

BE BlogPost XML Markup

&lt;p&gt;&lt;a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fTulips_2.jpg" rel="lightbox[flowers]" target="_blank"&gt;
&lt;img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Tulips" border="0" alt="Tulips" 
src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fTulips_thumb.jpg" width="244" height="184" /&gt;&lt;/a&gt; 
&lt;a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fChrysanthemum_4.jpg" rel="lightbox[flowers]" target="_blank"&gt;
&lt;img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Chrysanthemum" border="0" alt="Chrysanthemum" 
src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fChrysanthemum_thumb_1.jpg" width="244" height="184" /&gt;&lt;/a&gt; 
&lt;a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fHydrangeas_2.jpg" rel="lightbox[flowers]" target="_blank"&gt;
&lt;img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Hydrangeas" border="0" alt="Hydrangeas" 
src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fHydrangeas_thumb.jpg" width="244" height="184" /&gt;&lt;/a&gt;&lt;/p&gt;

Client Markup

<p>
 <a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fTulips_2.jpg" rel="lightbox[flowers]" target="_blank">
  <img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Tulips" border="0" alt="Tulips" src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fTulips_thumb.jpg" width="244" height="184" />
 </a> 
 <a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fChrysanthemum_4.jpg" rel="lightbox[flowers]" target="_blank">
  <img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Chrysanthemum" border="0" alt="Chrysanthemum" src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fChrysanthemum_thumb_1.jpg" width="244" height="184" />
 </a> 
 <a href="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fHydrangeas_2.jpg" rel="lightbox[flowers]" target="_blank">
  <img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Hydrangeas" border="0" alt="Hydrangeas" src="http://www.tellingmachine.com/image.axd?picture=WindowsLiveWriter%2fWindowsLiveWriterPictureSizesLinksandLoc_E2A8%2fHydrangeas_thumb.jpg" width="244" height="184" />
 </a>
</p>

Tags: , ,

Blog Kebab | Blogging

Submit to DotNetKicks...
Permalink | Comments (1)

Comments

1/31/2010 7:42:25 AM #

pingback

Pingback from spamparty.com

Medical Nebulizer For Book Publishing and Windows Live Writer | Spam Party

spamparty.com |

Comments are closed

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 2/4/2012 5:02:27 AM (PST Pacific Standard Time UTC DST -7)