Ok, so now that we have the basis for our Live Writer plugin, we need to start adding things to it to make it look and feel better. The best way is to add an image to the plugin that will appear in the Insert section of Writer.

This is actually very easy, but there are things that you need to remember other wise you will get runtime errors when Live Writer starts up. So first of all, we need to create our little icon, which is what the end user will see in the options and on the right in the Insert field. The thing you have to remember when making this, is its size: it has to be exactly 20×18 pixels. For this demo, I’m going to be using this image: .

The image that I am using I have called icon.gif, and to put it into our project, we can just drag and drop into Visual Studio Express:

This next part is very important otherwise you will be getting an error saying that the image can’t be found and you will be wondering why as you can see it in your project. Right click on the image in the solution explorer, select properties; in the properties, you have a section called Build Action, and you want to set it to Embedded Resource:

So going back to the code from the previous article, we need to add in an extra attribute to the plugin, with the resulting code looking like this:

[WriterPlugin("8638eda4-6533-4d19-9da7-ff92ff5a7590","My First Plugin",
        Description="This is my first plugin",
        HasEditableOptions=false,
        Name="My First Plugin",
        PublisherUrl="http://scottisafool.spaces.live.com",
        ImagePath="icon.gif")]   // This line is where we put the image in the code

The part that we are looking at here is the ImagePath=”icon.gif” part. This filename has to correspond to what you have put into the project; now, if that file is in a folder, for example “images”, then the ImagePath would be “images.icon.gif”. Notice we use a full stop instead of a slash. Once you have put that in, you’re ready to rock and roll; so hit F6 in Visual Studio and let it compile.

Now when we load Live Writer up, we have our link as before, but now it has the image we have assigned to it:

As before, the source code is available here.

SL

<< Previous – Getting Started                 Working With Forms – Next >>