Posts Tagged WordPress

Photo Captions

Photo Captions in WordPress Blogs

While Windows Live Writer has been essentially orphaned for several years, blogging providers have made progress and refinements in many areas. WordPress blog posts can have captions below photos that can make a post attractive and professional looking. The WordPress online editor is, like pretty much all other blog editors, an awkward to use non-WYSIWYG contraption. The finished blog post, however, can be quite good looking. Can the new feature be inserted when using Live Writer? Indeed, it can be done. It is not particularly elegant, and the process requires some added steps. Before I get into the details, here is a captioned photo.

LJK12956-P2-1600

The car carrier Hoegh Delhi coming up the St. John’s River on its way to the port at Jacksonville, Florida

You can see that WordPress has added a frame background to the photo and the caption is in gray below the image.

The procedure for adding captions to photos

There are some constraints and gotchas, but the procedure in its most basic form is simple and straightforward.

WordPress supports this feature by specification text in square brackets. For the photo above the specification text is this:

LW-Captions-03

The image is then inserted right after the first closing square bracket. It will then look like this:

LW-Captions-02

Basically that is all it takes. The bracketed text ahead of the image tells the WordPress editor to insert the background field and caption. You do not need anything in the id attribute. The align attribute will be mangled by the WordPress editor, so it really doesn’t matter much what you put in. In the WordPress editor it will wind up as “alignnone”. More about this farther down. The width attribute specifies the field size. This should be the same as the the size of the image that you insert.

The text following the image is the text that you want to appear as the caption. You can apply some editing features, like bolding. Even forcing a line break in the caption will work. You do that with Shift-Enter. The end of the caption is specified by /caption in square brackets.

If you want your image either left or right justified with text alongside, that can be done. Prepare it just like above, but with the appropriate width specification and apply the normal image alignment and margin settings. You will need to do some editing in the WordPress online editor.

There are some additional steps needed. If you do as I explained and you publish the post, the caption may not be there. My procedure is to not publish it, but to “Post draft to blog”. Then log in to your WordPress Dashboard and edit the post. If you just click back and forth between Visual and Text view, the WordPress editor will do its magic. If you have left or right aligned images you need to take care them in the WordPress online editor. In Text mode you can just correct the align attribute to alignright or alignleft. Use the preview option, View Post, to make sure that everything got taken care of.

To see an example of a blog post with captioned photos take a look at my article Museum Photography 2 in my Café Ludwig blog. I intentionally allowed some of the images to “stick out” from their caption fields, just an added little feature that you might also want to experiment with. Hint: Use different width specifications for caption field and the image.

Have fun, and good blogging!

.:.

© 2014 Ludwig Keck

, , , , ,

6 Comments

Live Writer for WordPress Blog Post, Pages and also Sidebar

Microsoft Windows Live Writer is the unsurpassed blogging editor. For WordPress blogs it handles pages as easily as normal posts. Live Writer can also be used to generate the HTML code needed for use in setting up sidebar features.

sidebarThis article explains the technique and procedure for doing so. Here is an image of a sidebar with multiple features, a map, some images and text with hyperlinks. Things that are easily inserted with Live Writer into posts. It works just as easily for use with the WordPress sidebar Text Widget. There are a few peculiarities that have to be carefully observed.

WordPress Text Widgets are used for arbitrary text or HTML. It is the HTML handling that makes them so powerful as most anything can be shown.

Live Writer can be used in its normal graphical interface, wysiwyg (what-you-see-is-what-you-get) to set up the HTML code.

Most sidebars are on the order of 250 pixels wide, it will help if you know the exact size of your sidebar. In Live Writer ignore the margins as they will be for your main area and not the sidebar. Since material in the sidebar will look best when centered, that is what you should use in preparation.

The main caution concerns images. They must be sourced from the web. Since you will not publish this post, Live Writer will not upload the images. So you need to upload all images manually before you set up the sidebar HTML.

Prepare your images

Prepare your images in the exact size that you want them to appear and upload them to the WordPress Media Library. This is a drag-and-drop procedure so it is quite fast and straightforward.

Obtain the file URL for each image. Be sure to get the file URL and not the permalink. See the illustrations below. It might help to just copy the ULRs and paste them into Notepad so they are handy when you are ready to use them.

LW-html-01

LW-html-02

Create the sidebar HTML

Open Live Writer to a blank post – you can name the post anything, but something like “sidebar 1” might be descriptive enough. You will not upload this post, only save it on the local PC.

Sidebar-setup-02Enter the text normally, center the text. When you need an image use Insert > From the web … Enter the image file URL.

Continue and build your sidebar.

Sidebar-setup-01

Note in the illustration above that the social media icons are not centered. If you want images beside each other set the Alignment to Left. Space them with the right or left margin setting so that the sum of the margins and image horizontal dimensions adds up to the width of the sidebar.

Inserting a map

Things get a little tricky when you insert a map. Live Writer lets you size the map image so you can fit it to the sidebar. However, that image is locally generated and stored. It is not uploaded to WordPress, since you will not publish this working post. So you must do a screen capture, clip out the map image, upload it to the WordPress Media Library just like any other image. But, and this is important, you can’t change the generated code to reference that image. Live Writer will overwrite it on every operation. You will need to make the change later.

When you are finished with the setup, click the Source tab (lower left). Select all the source text and copy it. You can store it on Notepad – a good place to make the correction for any map image.

Sidebar-setup-04

In the illustration here the code is selected in the Source view of Live Writer on the right and inserted into the Text Widget in the WordPress dashboard on the left. If you have no corrections to make to the code this is the quick and easy way. If you need to make a correction for a map image here are some additional notes.

Making the image reference correction for a map

Sidebar-setup-05Live Writer will generate an image of the map. The reference in the code needs to be changed to a file URL from the Library.

Find the reference in the code. Look for the section that contains the words “map picture”. Find the text <img src=. Replace everything in the quotes that follow with the file URL. In the illustration the reference generated by Live Writer is partially highlighted. It begins with a dollar sign, $.

Once the correction is made just save the Widget text and take a look at your blog.

Hope all goes well for you!

.:.

© 2012 Ludwig Keck

, , , , , , ,

5 Comments

The Anatomy of a Blog Post

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

image

The end of that post looks like this:

image

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.

image

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.

image

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

, , , , , , , , , , ,

1 Comment

Creating a Static Page on your Blog

Static pages can be quite useful beyond the “About Us” or “Contact Us” pages that are so common. This blog has a “Resources” page and there are many ways to enhance a blog with pages. Creating in page in Windows Live Writer is just as easy as preparing a blog post – if your blog is hosted by WordPress. Just click the File imagetab, move the pointer down to New post and over to the right to Page page. Hovering on New page brings up the screen tip balloon. It show the keystroke for initiating a new page, Ctrl+G, and also a disclaimer: “Not supported by all blog service providers”.

For a WordPress blog page, just create the page as easily you would a regular post, then publish it as you would a post. You may want to arrange the menu location in your WordPress Dashboard. That’s all there is to it.

If your blog service provider does not support creating a page in Live Writer you can still use it for the detail work. Blogger is one of the services that does not support creating a page in Live Writer. To get a page started, proceed as follows:

BL-page-01BL-page-02

In your Blogger Dashboard click the Posting tab, then Edit Pages. Click the NEW PAGE button. Give the page a title, then click SAVED to save the page as a draft. The actual page composition can now be done in Live Writer. Instead of creating a page as you would for a WordPress blog, just prepare a post draft with all the information you want on the page. When the page is done, copy the HTML source code and paste it into the Blogger editor – I will come to the details shortly.

There is one very important “gotcha”: Any images must be sourced “From the web…”. The reason is, Live Writer will not be used to publish the page and so it can’t upload your images. Upload the images manually. I like to upload images to my SkyDrive and source them from there. Since SkyDrive provides a generous amount of storage this is an efficient place even though getting the image URL is a bit of a hassle. See my post “Sourcing content for your WordPress gallery page” for the details of getting the image URL for a picture on your SkyDrive.

imageWhen you have finished the page in Live Writer, click on the Source tab in the lower left of the window. In the source window, select all the imagecode, use Ctrl+A. Then copy the code onto the clipboard with Ctrl+C. Now go back to your Blogger Dashboard and edit your page draft. Be sure the Edit HTLM tab is selected. Just paste the code from Live Writer into the main window, use Ctrl+V. You can inspect the looks of the page with the Compose tab. Then publish it with PUBLISH PAGE.

These steps don’t really add any extra work as you would have had to do most of the steps anyway if you used the Blogger online editor. Using Live Writer makes the preparation of a page as easy as preparing a post, the publishing steps are not much of a chore.

Of course, you can keep the draft copy of the page so you can come back in the future to add to it or modify it.

The illustration here shows part of the HTLM code (the right portion is cut off in the image) of my page  “Ludwig’s Galleries” of my Blogger blog Café Ludwig.

 

© 2011 Ludwig Keck

.:.

, , , , , ,

Leave a comment

Getting Started–Setting up Your Blog

A number of blogging services provide free blogs and others blogs at a modest cost. Here we will concentrate on two of the larger services: WordPress and Blogger. Setting up your blog is simple enough, the blogging services make that very easy, there are some items that you should consider carefully.

Your blog is a website of your own. Blogger and WordPress set up your site when you sign up and you can define the details later and modify it to reflect your style and a “look and feel” that suits your topics. Here are images of the home pages at Blogger and WordPress.

imageimage

Each has a button to get you started. The next page is similar a sign-up page for getting an email or similar account.image

Your first decision is to select a web address for your blog. Such addresses take the form myblog.wordpress.com on WordPress,  on Blogger it is myblog.blogspot.com.

The hard part is the “myblog” name. Most people select a term that is descriptive of what the blog is all about – this blog here uses “livewriterbasics” because this is the general topic. There is nothing wrong with a whimsical name. Many people use their own name for their blog address. As you would expect, to get a blog account you need to a user name and password so you can log into your account securely. The blogging service also needs an email address so information and other communications can be sent to you. That is about it, click Sign up and your blog will be set up.

The blogging service takes you to your “dashboard”. Here the various account and design details can be taken care of. Each blogging service has a default design. Your blog will be set up with that design. You can make changes later but some you should do right away. For a WordPress blog go to the General page (under Settings in the navigation pane on the left). Here you can assign the title that should be featured on your blog. There are other choices and options, but this blog is about Windows Live Writer, there are numerous other sources that can help you with the details. Each blogging service has good tutorials that get you going. Take advantage of those help tools.

You can create and publish posts from your blog dashboard. Windows Live Writer makes that a lot easier. So this will suffice for this post. How to get going with Windows Live Writer is the topic of another post.

 

© 2011 Ludwig Keck

.:.

, , , ,

Leave a comment