Posts Tagged Live Writer
Boilerplate (Wikipedia: Boilerplate (text)) … any text that is or can be reused in new contexts or applications without being changed much from the original. …
For blog posts some repeating text, especially with graphics and hyperlinks, can be very useful to provide credits, references and links to other sites or pages. For posts here, I use such “boilerplate” to provide links to my home site and to my Twitter, Facebook and Google+ pages. Here, then, a quick tutorial on making and using boilerplate.
There are a number of plugins for Windows Live Writer that make inserting boilerplate very easy. I use Text Template Plugin for Windows Live Writer by Greg Duncan. Plugins can be be found on the Windows Live Plug-ins site (trust it is still there by the time you read this).
Creating the boilerplate
1. First, of course, you decide what the boilerplate should say, look like, and do. For this quick tutorial I will use my “created with Live Writer” slug (once more Wikipedia: Slug (typesetting)). Write down the text and make a sketch of any graphics and list any links.
2. If your boilerplate is to include an image, you must first create the image. I used Paint to prepare the text with the graphics. Here is what it looked like (frame added for illustrating the graphic). My original image was 1287 by 180 pixels. As you can see, it contains text and an image of the Windows Live Writer logo.
3. Scale the image to the actual size that it should be in use and save it as a JPG file. Mine is 360 x 50 pixels.
4. Upload the image, or images, to a site so you can use the graphic repeatedly without having to upload it each time. The easiest way is to insert the graphics into a post in Windows Live Writer. Set the Size to Original and the Link to option to No link so WLW will upload only one copy. Upload the post as a draft to your blog.
5. Now you have stored the image or images in an accessible online site.
If you are using WordPress, find your image by going to your WordPress Dashboard > Media > Library. Find the graphic, click Edit. Copy the File URL. That is the web address for the graphic that you will re-use again and again.
If you are using Blogger your graphic will be in your Picasa Web Albums. Click Show All Albums, find the album titled Windows Live Writer – your newly added graphics should be at the end. Click the graphic to show it it large on a page, right-click the image and click Copy image URL (this may be different depending on your browser). Now the URL is on your clipboard, save it for later use (I use NotePad for this).
6. Set the boilerplate in a new Windows Live Writer post. Type the text and insert the graphics with Insert > Picture > From the web. Use the URL for the graphics. Insert any hyperlinks. Make all the positioning adjustments so the boilerplate looks just as you want it.
7. Click the Source tab in the lower left of the Live Writer window. Copy the source code. This is what you will need. I pasted mine into NotePad and saved the file. You can reuse this saved code from this file or you can install it in a plugin. If you wish to use a plugin, read the next section, otherwise just skip over it.
Prepare for reuse with a plugin
2. Go to the plugins download page, install a plugin you like. I found Text Template in the Other content insertion section.
3. As they used to say in school, the remainder is left to the student as an exercise. Since the details vary, depending on which plugin you choose, I will not go through the installation and setup procedure. You will find your way easily enough.
Reusing your boilerplate
When you come to the place in a post where the boilerplate should appear you can insert the code form the saved file or install it using the plugin.
Directly install saved code
- Open the saved code file.
- Copy all the code – select all > copy with Ctrl+C.
- Click the Source tab in Live Writer. Scan down to the end. Paste the code (Ctrl+V).
- Click the Edit tab. Your boilerplate will be there in all its glory.
Install with Plugin
- Click the Insert tab.
- Click the plugin. Select the slug. Click OK (This may vary depending on the chosen plugin).
- Your boilerplate will be there in all its glory.
Now, wasn’t that easy? Actually, you will find it easier to do and faster than you might think. Go do it!
Take a moment to admire my boilerplate here. It consists of some text and several graphics with hyperlinks. Go ahead, give me a thrill by trying the links.
© 2012 Ludwig Keck
This post created with Windows Live Writer
Show that you are using the best, easiest blogging tool, Windows Live Writer, at the end of every post. Give others a link to get their own copy of the greatest blogging tool out there!
You are welcome to copy the image that I am using at the bottom of this post.
Below is my code for my WLW credit line. You are welcome to use this as is. It grabs the image from my site. That’s OK I will keep it there. Of course, you are welcome to upload an image of your own to your file store.
Here is what the code looks like. Do not copy and paste this, as some of the characters will get mangled:
<p><a title=”Windows Live Writer” href=”http://windows.microsoft.com/en-US/windows-live/essentials-other-programs”><img style=”background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px” title=”Windows Live Writer – download your own copy” border=”0″ alt=”LiveWriter-credit-360″ src=”http://ludwigkeck.files.wordpress.com/2012/07/livewriter-credit-360.jpg” width=”360″ height=”50″></a></p>
© 2012 Ludwig Keck
A blog post is a short article posted on a blog site. What you are reading now is a post on the Live Writer Basics blog. In this article I want to take my newer blogger friends a little bit behind the scenes to help them learn the details and mechanisms of a blog post.
First a bit about blog sites and services
A vast number of blogs are hosted by WordPress, as is this blog. There are other blogging services and they differ in many respects from WordPress, but I will quickly go over how a blog functions on WordPress. A blogger sets up an account by clicking the “Get started here” button on WordPress.com. With the account comes a blog site. In setting up the blog, the blogger selects the site address and name. This blog has the address “https://livewriterbasics.wordpress.com” the name of the blog is Live Writer Basics as you can see at the top of this page. The blog consists of one or more pages. Typically the “landing page”, the one you get to with the blog’s URL or web address, shows the posts, the short articles, with the most recent one at the top.
The formatting, layout and style, of the blog is defined by a “theme” provided by the blogging service. WordPress has hundreds of themes to choose from. There may be a header image in addition to the blog name and byline. Most blogs have “sidebars” with various items of information. Typical items in the sidebar are links to prior posts, a search box, archive, links to other blogs, and other items that are automatically updated so the blogger does not need to worry about accessibility to information on the blog.
There may be other pages, reached with links on a menu bar, very much like any typical website. The pages in a blog contain more permanent information such as the About page here. There may be some advertising. This post may be followed below by an ad that WordPress places. This is how WordPress can make blogging free or very inexpensive. The blogger using a WordPress.com blog may not place any ads in the blog.
The “front” page may be quite long, showing a number of the recent-most posts. One such page is illustrated at the right. Posts and pages can be created in Windows Live Writer.
The blogging service, in this case WordPress, provides summary pages reached by the category and tag links.
Possible the most important part of a blog is the ability for readers to leave comments at the end of each post. This provides two-way communication between the blogger and the audience.
What does a post consist of?
Each post has a title. This is followed by the text or the article, maybe photos or other content. There is a post date showing the date, and often, the time the post was “published” or placed on the blog site. Typically a post is also marked with a topic, called “category” at WordPress, and “tags” that describe the topic details in more detail. Such categories and tags link to similar content in the blog and, more importantly, to other blogs. WordPress provides for such tagging. In addition there may be tags using another service. This blog also contains “Technorati” tags – you can see them illustrated below and real ones at the end of this article.
Here is an illustration of a typical post title, post date, and all-important first paragraph.
The end of that post looks like this:
The article ends with an “end of Ludwig’s story” mark, a copyright notice, links to the author’s website and social sites. This is followed by a group of Technorati tags. Each tag links to a Technorati page showing blogs on that topic.
There are a group of links to allow the reader to share the post and to indicate a “Like” to the author.
The gray links are the WordPress categories, marked “Posted in” that link to pages showing posts of that category, and tags introduced with “Tagged”. These also link to pages showing posts on those topics.
The last item in the gray WordPress items is a link to the comments on this post.
The skeleton of a blog post
In spite of the complex and and well-manicured look, the actual post consists of just HTML code. It is the reader’s browser that puts it all together and makes it look the way it was intended.
This is the code produced by Live Writer. Of course, when writing the blogger uses the “Edit” mode which shows the post pretty much as it will appear to the reader. Note that there are no images in this code, the pictures are defined by hyperlinks and are not stored with the post code. Live Writer takes care of those details and a novice blogger can be unconcerned – it just works.
When writing the text the author has “HTML styles” available to define the elements of the text and a limited set of font and positioning commands.
Normal text is called “Paragraph”, there are six “heading” styles. The actual appearance is defined by the blog theme and, once selected for the blog, is not further controllable. There are, however, additional controls for font, type size, and text placement. These are also limited. In Live Writer fonts can be set to any available on the bloggers computer. They will work just fine if the reader has that same font available on the computer used to view the blog. That last sentence contains the reason why a blogger must be very careful about setting the font. There is no assurance that it is available to the reader.
This is a quick look at the mechanics, the anatomy, of a blog post. A blogger is assisted by Live Writer in putting it all together so it works. It is easy to prepare a blog post, writing a captivating, informative, helpful, and timely article, well, that is another story.
© 2012 Ludwig Keck
Photo-blogs are a great way to show photos. With Live Writer you have pretty good control over the size and placement of pictures. Here are some tips for arranging the images just the way you want.
First, be sure you know the width of you blog. This helps you to plan your layout in advance.
Arranging photos side by side
To position several images in a row proceed as follows:
- Insert the left-most photo. In picture tools set the Alignment to Left.
- Insert the next photo. Again set its alignment to Left.
- For the last photo set the alignment to Inline. This will prevent any text from being placed next to the images.
Hint: Some browsers have their own ideas, to keep them at bay set a margin value for each image. I like to use 5 pixels for the Bottom margin.
Hint: If your photos have different aspect ratios due to cropping, set the vertical dimension for all photos in a row to the same value. The photos will appear neater that way.
Hint: With photos in a row there may be a large blank space at the right. You can even the space out by setting the left margin of the first photo to about half the pixel value of the space. Or even larger if you want to move the images toward the right margin.
Placing a vertical column of photos to the right of a larger one
Having a column of pictures next to a larger one can be very attractive. This arrangement does require a little more care. Here is the procedure:
- Insert the large photo first. Set its alignment to Left. Set the right margin for this image to a small value, I like 5 px, to provide separation between the photos.
- Insert the smaller photos one be one. Set their alignment to Inline if you do not want text alongside.
- Set the top and bottom margins of the center image to balance the spacing so they will look good on the page.
Hint: If you want text alongside on the right side, set the alignment of the small images to Left. Also set their right margins to provide separation between the photos and the text.
Hint: If you want a column of text between the photos, set the alignment for the small photos to Right and set a left margin value for each.
Place the small images into text positions so they will look about right. You will not be able to make this perfect.
Hint: If you want to show bullets, the text must be on the left of the images, otherwise the bullet symbols will not show.
Arrange a column of pictures to the left of a larger one.
- The large photo must be inserted first. Set the alignment Right and set a left margin value.
- The small photos can then be placed with their alignment set to Inline.
With these procedures you can arrange your photos for best appeal. Remember, the size of photos can be changed to any horizontal or vertical value. Just be sure that Lock aspect ratio is set to avoid stretching or squashing them.
© 2012 Ludwig Keck
Windows Live Writer provides an array of options for managing images in posts. Inserting pictures in a post is so easy that many bloggers never give it a second thought. There are some features that deserve a closer look. In an earlier post I described some of the details (“Insert Picture” in Live Writer – a look behind the curtain), now I will explore some of the finer points.
With the command Insert > Picture > From your computer… Live Writer allows browsing the computer and inserts a copy of the selected photo. Clicking on the picture to select it, adds a Picture Tools tab to the ribbon.
The Picture Tools ribbon has tools for cropping, sizing, and rotating the image. Other image manipulation tools include some limited effects and contrast control, and adding a watermark. See the illustration above.
Images can have a variety of border effects and alignment and margin control are also provided. These tools provide a great deal of control over how an inserted image will appear in the post. The group “Settings” on the Picture Tools ribbon provides a “Revert to original” command and a default control to apply the settings of an image to future insertions. These tools work on images that are inserted “From your computer”. For images sourced from the web most of the image manipulation tools are not available.
There is one other group of commands, “Properties”, that finally get to the crux of our topic. The first one of these is “Link to: Source picture…”, the tool tip explains: “Choose where the link goes when this picture is clicked.” This means in the published post, of course. The command provides three options for pictures inserted from your computer: Source picture (this is the default), Web address… , and No link. For an image sourced from the web only Web address… and No link (the default for this situation) are functional.
The link to “Source image” is an interesting option, you might wonder what is the source image and where is it. Live Writer creates two copies if the image for locally inserted pictures. One is the image shown in the Live Writer composing area – the one you see as it will be in the final post. This will be uploaded by Live Writer during the “Publish” phase to your blog image store. WordPress calls that store your Media Library and you can inspect and manage the contents. When using Blogger the image store is almost inaccessible, so we will use WordPress for illustrations here.
The other image, the “source picture”, is also uploaded by Live Writer, provided the link setting is to “Source picture”. Note that this can be set on a picture by picture basis. The size of this “source picture” is set by the “Link options” command. If No link is set for a picture, only one image is uploaded, and the Link options are not available.
The Source Picture Options dialog permits setting the size of this image. Choices are Small, Medium, Large, and Original. The default normally is Large, typically 640 pixels. As with the size setting for the displayed picture, the size can be manually set by typing a new value into the size boxes. The Open in new window check box, normally unchecked, allows you to specify how the source picture will be displayed when the image in the post is clicked.
The last command in the Properties group is Alt text. This brings up the Alt-text dialog for the selected picture. The “alt text” of an Internet image is a text alternative for the image. For example reader programs assisting the blind will read this text to make clear what is shown in the browser. This blog is intended for readers who are not visually impaired and I generally leave the default word “image”, or the image file name, in the Alternate text box. If your blog is intended for all audiences, be sure to put a sufficiently descriptive line into this box.
The Title box also defaults to “image”, or the file name. The text entered into this box will be displayed as the tool tip when a reader moves the pointer over the image. This, obviously, is a very useful feature. You can see how it works by moving the pointer over any image in this post.
The illustration here shows a partial listing of the images in the Media Library showing images for this post. Notice the bottom two showing the images for the large, tilted picture at the top of this post. The bottom-most one is named “LJK_3827-33-ICE-stitch1.jpg”, that is the file name as it appears on my computer. This is the “source picture” and is stored in the Media Library in its original size since that is what I specified for this picture.
The next one up has “_thumb” appended to the file name. This is the case for all images that are shown in the post. Also note that these “_thumb” images have border and tilt features that are specified, the “source pictures” do not contain those features.
You can see how these pictures are displayed by clicking on any of them. Especially do this for the top “shelter” photo. The size of this is 1280 pixels wide, this may be wider than the setting for your browser so watch how your browser resizes this picture.
When clicking on images above in this post, the linked images are shown “bare” on a browser page, that is with just white space to the the right and below. This is fine for getting information across, but when showing off your photographic masterpieces you may want a more “scenic” display. This calls for linking to display pages such as Flickr or SkyDrive.
Here is an example. The picture of the flower links to a large “lightbox” presentation of this photo. Click on it to see. To return to this post, click you browser return button. No copy of this image is stored in my WordPress Media Library because it is sourced right from Flickr. Actually both the little one here, and the large one linked to, are on Flickr. The detailed procedures for doing this have been covered in another article: Sourcing images from Flickr,
In this article I explained how Live Writer creates two copies of inserted pictures and sends them to the blog service. I have discussed the various options and controls for managing these images. There is one more caution I should point out: If you repeatedly post a draft to your blog, Live Writer will repeatedly upload the images. You can wind up with a large number of unused images in your Media Library. To illustrate the images in my Media Library for this post before completing the article, I posted a draft to the blog. After making the screen shot showing the images in the library, I deleted the draft and the images from the library. Both steps are necessary on WordPress. Deleting the draft only gets rid of the text, the pictures have to be separately removed if duplication is to be avoided.
© 2011 Ludwig Keck
Maps can make an article more informative and more interesting, and an interactive map provides a gateway to enjoyable resources to your readers. With Windows Live Writer, inserting a map is just about as easy as inserting a photo.
Let me walk through the procedure with an example. Let’s say that my blog article, about a fun vacation experience, contains a photo of the lighthouse on Tybee Island, Georgia. The story can be enhanced by displaying the location with a couple of maps.
The Insert ribbon in the Media group sports a Map icon. This provides for inserting Bing maps. The Insert Map dialog starts with a world map. There is a Find location: text box which is the quickest way to show a map of a specific location. Just enter the name of the location of interest, click the magnifier “search” icon, and up comes your location..
The dialog shows a live Bing map. You can drag it around, enlarge or decrease the view, just as you can when you are using Bing Maps. Also available are “Road”, “Aerial”, or “Bird’s Eye” view. The road view, like a normal road map, is available for all parts of the globe. Aerial view, or what some call satellite view, coverage is nearly complete. The “bird’s eye” views are low level, oblique, aerial photos. Many destinations have been mapped this way. So you can select the best map for your post. In this article I have included two maps to illustrate the variety. But first the lighthouse photo, and below that a couple of maps. A road map to give provide location information and a “bird’s eye” view..
Here in this blog post, as in your blog, these maps will lead to full-size Bing Map pages when clicked. In Windows Live Writer a map insert behaves a bit like an inserted photo. When clicked, a border is shown around it and there are option in a side bar on the right.
You can see the border around the selected road map in the illustration above. The map can be resized with the resize handles the customary manner. The Customize Map… link in the side bar, brings up the customize dialog which is essentially the same as the insert dialog. You can move the displayed portion around and resize the view. You can also add a caption and customize the margins.
To make the location easier to communicate to the reader, I have zoomed out the map enough to show recognizable landmarks in the map, here Savannah, Georgia and Hilton Head Island, South Carolina.
I have also added a “pushpin” showing the location of the lighthouse. That is a mixed blessing. You can see that in the insert and edit dialogs there is a text line under the map saying: “Tip: Right-click the map to add a pin”. A pushpin will be added at the clicked location. You can move it around and specify some additional parameters. Unfortunately, the default operation brings up the “my places editor” on the viewer’s map, which may be more confusing than helpful.
© 2011 Ludwig Keck
For some time there was no straightforward way to get the URLs of photos in Windows Live SkyDrive albums. With the recent update (November 2011) there is now easy access to the original photos stored in SkyDrive.
SkyDrive web addresses, URLs, are incredibly long, typically more than 140 characters. No way can you write those done, so just copy the URL with Ctrl+C and then paste it to the destination with Ctrl+V. This works just fine with the Live Writer Insert – Picture tool. Click From the web… to open the Insert Web Image dialog.
The photo is previewed in the dialog window. Click Insert to place it into your post.
The image will be inserted in full size and most likely overflow the blog margins and the Live Writer window. In the Size group of the Picture Tools ribbon click Lock aspect ratio, then you can resize the image to fit as you like. Remember you can replace the size value to obtain a custom size, you are not limited to the presets of Small, Medium, or Large.
If you forget to click Lock aspect ratio the resized image will be stretched or squashed, just redo the operation.
By default, for an imported web image, the Link to: setting will be None. If you wish to link to the actual image in SkyDrive or to another web address, click the down arrowhead next to the option, then select Web address… the Insert Hyperlink dialog opens. You will need to paste the URL of the image or whatever you want to link to. Be sure to fill in the Title: field. If you don’t see the field, click Advanced. The text in the Title: field will be shown in a text balloon when a viewer hovers the pointer on the image in your post.
If you wish to link to the image in your album as shown in SkyDrive, use the image address for this photo, do not get and insert the Embed code (offered in the information pane). The embed code is an “iframe” set that is stripped out by WordPress for wordpress.com blogs. It can be used on webpages and self-hosted blogs. But that is really another topic.
One note of caution: The SkyDrive sharing system has been extensively revised. The prior settings have been “grand-fathered” in. I urge you to carefully learn the new approach to sharing. Files and photos take the share setting of the containing folder (or album), they can also be shared individually. For sharing images in a public blog, be sure that the image sharing is set to Everyone, either for the photo or for the containing folder.
As you can see in the illustration at the right, the new, simpler system is anything but. Sharing is sure to cause a lot of confusion and there are bound to be changes soon.
© 2011 Ludwig Keck