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 | Reply

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading



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 at Rockwell Automation and is founder of the PowerShell Unit Testing Framework PSUnit. More...

Administration

About

Powered by:
BlogEngine.Net
Version: 1.5.0.7

License:
Creative Commons License

Copyright:
© Copyright 2009, 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 2009 by Klaus Graefensteiner

Rendertime:
Page rendered at 7/30/2010 2:21:05 AM (PST Pacific Standard Time UTC DST -7)