Archive for category General

Arranging photos in blog posts

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

image

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

image

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.

LJK_5282-1600LJK_5256-1600Hint: If you want a column of text between the photos, set the alignment for the small LJK_5275-1600photos to Right and set a left margin value for each.

Place the small imagesLJK_5267-1600 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

, , , , , ,

2 Comments

Image Management for Live Writer created blogs

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.

Photo of a park shelter. Image has border and a copyright notice.

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.

Picture Tools 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.

image

image

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.  image 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.

imageThe 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.

imageThe 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.

imageThe 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. imageThis 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

, , , , , , ,

3 Comments

Inserting maps in blog posts

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.

imageThe 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.image.

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

LJK_2242 (3872x2592)

Tybee Island near Savannah, Georgia
Tybee Island near Savannah, Georgia
Oblique aerial view of the Tybee Island lighthouse
Oblique aerial view of the Tybee Island lighthouse

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.image

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

, , , ,

Leave a comment

Sourcing photos from SkyDrive is now easy

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.

imageThe information pane for a photo now contains a “View original” link. So with just one click the browser goes to and displays the original. The URL can be easily copied from the browser address bar.

image

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 InsertPicture tool. imageimageClick 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.

image

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. imageYou 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. imageIt 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

, , , , , , ,

2 Comments

Using Bookmarks in Live Writer

Bookmarks, also called anchors, are code on a page or in a post that you can navigate to with a hyperlink to avoid having to scroll down to the place. Such bookmarks are not visible. Since Live Writer is a “wysiwyg” editor you can’t insert a bookmark in Edit mode. Live Writer does not offer that item, although it offers several other “invisible’ items. Using a bookmark requires identifying the place, the “bookmark”, and a link somewhere else to that bookmark. The code is easy enough. Here is what you do.

The bookmark

SchoolAt the place where you wish to insert an anchor, the place that will be at the top of the browser window when linked to, type some text that you can easily find in the Source window. I like a string like this “xxxxx”. Then click the Source tab (lower left). Locate the locater text and insert the bookmark code, replacing the locater string, like this:

<a name=”bookmark”></a>

Type the code as shown here with a name in place of bookmark. The bookmark name should contain no spaces or symbols. I like to put bookmarks on a line by themselves in the code.

You can also include text in the bookmark code which will be shown at the top of the browser window. The code will then have this form:

<a name=”bookmark”>Bookmark Text</a>

This is all you need for the bookmark, you can have as many as you like, of course, the names have to be different.

The bookmark link

imageBookmarks by themselves are of no use, they need a hyperlink somewhere else. Such links can be in the same post or the same page, they can also be in different post or even different websites. For links on the same page, a local link, the code need not include the web address. For linking to a bookmark on a different site the web address has to be included so there are two forms to the hyperlink.

For a local link you need to type the link code in Source view. Type the text that you wish to make into the hyperlink in Edit mode then click the Source tab and add the needed code. The code is like this:

<a href=#bookmark>Link Text</a>

Here bookmark is the name of the bookmark. Note that the pound sign, #, is required. The Link Text is the text that you want as the hyperlink.

If you wish to link to a bookmark on another site, the full URL has to be included. Inserting such a link can be done with the Insert – Hyperlink tool, just don’t forget the bookmark part.

<a href=http://blog.wordpress.com/page/#bookmark>Link Text</a>

Here is a demonstration: Photosynth – the previous word links to the bookmark for the Photosynth section on the This ‘n That resource page.

.:.

© 2011 Ludwig Keck

, , , , ,

1 Comment

Blogger offers new designs, improved performance

Blogger took a major step today with a rebuild and modernization using the latest web technologies, HTML5 and CSS3. If your blog is hosted on Blogger be sure to check out what is new. You just may want to restyle the looks of your blog.

image

There are seven new designs with plenty of ways to customize the look and feel.

You owe it to yourself to explore the possibilities. Be sure to check out the backgrounds and other features.

imageOnce you have decided on a new look and clicked “Apply to blog” on each option page, there is one more important step.

Open Windows Live Writer, click the Blog Account tab. Then click Update theme. Moments later you will see your Live Writer showing the new design, fonts, and sizes.

Here is how it looks for my Café Ludwig blog:

image

If you are reading this at Live Writer Basics click Café Ludwig to see this post over there – and vice versa.

Happy blogging!

.:.

© 2011 Ludwig Keck

, , ,

Leave a comment

How to Spruce up the Three Shingles of Your Posts

Shops of days gone by attracted customers with their “shingles” hanging outside. Your blog posts also vie for readers with public “signs”. Shop SignsThree in fact, and they compete in various venues for attention. They are your post title, illustration, and the first words of your post.

Like it or not, these three “shingles” are all you have for your post to be noticed and to bring in your readers. You might argue that your regular readers subscribe to your blog or regularly look in. Even then, your post must compete for their time and interest. The title and that first illustration must draw their attention and the first words must be compelling enough for them to read on. So it is important that you spend some extra time to “spruce up”, or shape up, these three “shingles” of your post so they perform effectively in selling and bringing in readers.

Consider the many places your posts are publicized. You likely have Twitter, Facebook, and maybe other social sites connected. These in turn may show up in still other places. Search results will find your posts. RSS feeds on your and other sites might show them. Some you may not even be aware of. Let’s look at how posts are mentioned in some of these places.image

On the right are a number of screen clips. The first two are from Twitter and Facebook. This is followed by a Google+ message. You can see already the different ways the post is seen.

Twitter only shows the title.

Facebook shows title, a thumbnail of the first illustration and a bit of the starting text.

Google+ is very similar to Facebook, even to how much of the introductory text is shown.

imageWhen someone searches for information using words that are matched in your post, the results may look like these three items from Google, Bing, and Yahoo searches. Here too, the title is shown followed by a bit of text from the post.

There are other places to consider. Here a couple of RSS feeds as seen in blog sidebars. These show only the titles. In some RSS feeds more information is shown when the pointer is moved to the title. Here is one such case. A fair amount of the introductory text is shown in a screen tip balloon.image

imageThere are places you might not be aware of that also publicize your blog. Shown here is a clipping from my author’s page on Amazon. My latest tweets and blog posts are shown.

When someone pins your WordPress blog to the Taskbar, right-clicking shows recent posts. In the jump list only part of the title is shown. The illustration of such a jump list also points out another problem. Non-alphanumeric characters are replaced with ugly HTML code.

Well, I have illustrated a number of venues where your “shingles” hang out. These pictures also show some of the problems to keep in mind. So here are some tips to help you put your best foot forward.

Title

The title of your post is the one “shingle” shown in all the places. So it it the most important in catching the readers attention.

State the topic

State the topic in your title. Think in terms of newspaper or magazine article titles. Tell what it is about. On this short phrase most readers will base their decision to continue or skip. Make them want to continue.

Be brief

In many places the length of the information is limited. The most severe is the Windows Taskbar jump list. Keep in mind the limit for tweets, the title and the link must fit the 140-character limit.

Do not use non-alphanumeric characters

This is a strange requirement, but a number of “venues” replace apostrophes, hyphens, quote marks, and such, with HTML code. That really detracts from the appearance of the listing. Stick to just letters and numbers in titles, use the marks in your post text when appropriate. Appearance matters.

Have fun

A fun title can perk up a readers attention. Use it when you can but avoid the nauseating teasers of television news fame – even the professionals can’t do those well.

Illustrations

Blog posts are more fun to read and often more informative when they are well illustrated. Select your first illustration carefully, that is the one that may be shown in a listing somewhere, it may well be the item that catches a readers eye.

Illustrations, like the text of your article, must be your own. Copying photos or text from “Internet resources” is not only plagiarism, it can also get you into legal trouble. If someone’s search leads to your post, it may also show the source of the “borrowed” material. Nothing will destroy your credibility more.

The introductory words

The first words of your blog post may be shown in listings. You can see examples in the illustrations above. These are the words that must convince your reader to click to keep reading. People are in a hurry these days. We glance at headlines, the lead photo, and maybe read the first sentence. This is what we all do, your readers are no different. Make the first words compelling.

After you finish the draft of a post, go over it with these tips in mind. With a catchy title, a neat illustration and a compelling introduction, your blog posts will be more widely read and enjoyed. You might even get some complimentary comments!

.:.

© 2011 Ludwig Keck

, , ,

Leave a comment