Testing and Procedures

When we set up a blog for each of our bloggers, we provide some standard links in the sidebar. These include links to SlowTrav, to the other SlowTrav bloggers and more. Yet, some of our users have expressed an interest in customizing these links to include links to their favorite blogs, photo albums or trip reports for example. Here you'll find the instructions on how to customize the My Links section of your blog.

Originally, when we started the blogs on SlowTrav, we thought it would be good for them all to have the same format or theme, to look alike, basically, for ease of maintenance. But with MovableType's Plugin feature called StyleCatcher, it's easy to change the look of your blog with a few clicks of the mouse.

Often we like to link to other websites within our blogs. Movable Type provides this functionality by clicking the little, Chain Link icon
when we're typing our text.

Once again, proving I don't always take the most direct route to a destination, after posting my instructions for putting meaningful links into a blog, Marta (and then Pauline) come back with an even simpler method. So let's have a look at it shall we?

Adding pictures to your blog starts with clicking “Upload File” in the left navigation bar. You can do this from the main screen of your blog, or while typing an entry.

When you click “Upload File” you receive this pop-up:

Enter the path to your photo next to “file:” or click “Browse” to find your photo on your computer. After you’ve entered this information, click “Upload”

You will be asked in the screen below whether you want to create a new entry with this photo or whether you want to see the HTML. If you clicked “Upload File” above, while typing an entry, click “Show me the HTML.” If you clicked “Upload File” and weren’t within an entry, click “Create a new entry using this upload file.” You have one other things to consider, how you want your picture to display. If you click “Popup Image” then the image will not appear in your blog entry, a link will appear that the user can click in order to see the image. If you click “Embedded Image” then the image will appear within your entry.

In the above situation, I clicked “Create a new entry …” and “Embedded Image” to receive this result:

You see a blank entry (i.e., no title, no category, etc.), with the IMG tags in the entry box. That is the command that will display your picture within your entry. Type your text above or below the IMG – wherever you want the text to appear in relation to your picture.

Note: the “alt=” command, defaults to your file name, but this is the text that appears when your reader runs a cursor over the picture or when the picture does not load. You can change what is in the quotations to something more meaningful if you like.

If I had clicked, “Show me the HTML” and Embedded Image, I would have received the popup below. I would have to highlight and copy the text in that window into my existing entry.

Note: you cannot upload the same file more than once. You will receive this funky error message: “Error creating temporary file; please check your TempDir setting in mt.cfg (currently '/tmp') this location should be writable.”

I think that's it. Let's see how long it takes Pauline or Marta to tell me there is an easier way. :D.

Did you ever wonder what TrackBacks are?

Well, I did. I knew they were some sort of way for me to comment or write something on my blog about something you wrote on your blog and then have the blogs “magically” linked. It was a method of commenting but blog to blog.

Sounded good in theory but how did it work?

Here’s how.

Let’s talk about categories and tags. Several people have asked what are they, what’s the difference and when should I use one over the other. So I thought this might be a good time to not only post some general guidelines, but to also spark some conversation among our bloggers as to what you like and don’t like with regard to these things, and also to make suggestions to others, for their blogs.

We've been discussing Stats and what they do for you on your blog and it came up about "how do I add them to my blog." There are many free stat sites out there, and many that also charge (but give you some cool perks). This example is using Site Meter, but the basic steps should be the same no matter which service you use.

To start, you need to register with a service. If you register with SiteMeter, they should send you an e-mail with your codename and a password with which you can access your account. They should also send you an e-mail with the HTML code present that you will need to actually add the counter to your blog. If they don't (or if it ended up in your spam bucket, or lost in cyberspace), here's how you can get it.

** NOTE ** The instructions below will not work as displayed with the Firefox browser. If you are using Firefox, in the actual code change all you see an "ampersand"lt to < and all "ampersand"gt >.

So you want to add links to your sidebar, in their own widget. Using the March Madness bloggers as an example, let's go through the steps.

From the Main Menu of your blog, click on templates.

Next click on Modules

If you already have a header photo uploaded on your blog, you can use these steps to upload a new photo, overwriting the existing one. If you don't have a header photo, and would like one, contact the Blog Administrator to set it up for you.

First, note, if you're using the standard SlowTrav Style, your header photo must be 780 pixels wide. If it's not, use a photo editing software on your computer to resize your photo to 780 pixels wide. Note: Photos that are larger, are best cropped to 780 pixels. Photos that are not 780 pixels wide, can work if they're close in dimensions, but if resized (i.e., stretched), the image will appear distorted when uploaded.

If you're not using the SlowTrav Style, you'll need to determine the correct width of your photo. You can do that in one of two ways.

1) Right click on the photo on your blog, and click properties.

2) You'll see the Dimensions the first number is the width (e.g., 800), the second number is the height (e.g., 128).

The second way, requires you to look at the Header Photo template. Click on Templates (in the sidebar).

Next, click on Modules.

Click on Widget: Header Photo

In there you'll see the dimensions of your header photo, (e.g., width 780 and height 125).

Now that you know the width you need, the rest is easy. Simply upload the photo like you would any other (for instructions see, Uploading Photos). Make sure your photo is named header.jpg (be careful, if the default file type is jpeg or jpg, you don't want to end up naming it header.jpg.jpg. The system will ask you if you want to overwrite the photo named header.jpg. Click, "Yes." You will not need to do anything with the displayed HTML but do note the height and verify the file name is header.jpg.

If the height of your new photo is different than the existing one, go into the Widget: Header Photo (as above), change the height to the new height, save it and rebuild your blog.

If you already have a sidebar photo (aka profile photo) uploaded on your blog, you can use these steps to upload a new photo, overwriting the existing one. If you don't have a sidebar photo, and would like one, contact the Blog Administrator to set it up for you. These steps are very similar to those found in the procedure on Uploading a new Header Photo.

First, note, if you're using the standard SlowTrav Style, your sidebar photo must be 170 pixels wide. If it's not, use a photo editing software on your computer to resize your photo to 170 pixels wide. Note: Photos that are larger, are best cropped to 170 pixels. Photos that are not 170 pixels wide, can work if they're close in dimensions, but if resized (i.e., stretched or shrunk), the image will appear distorted when uploaded.

If you're not using the SlowTrav Style, you'll need to determine the correct width of your photo. You can do that in one of two ways.

1) Right click on the photo on your blog, and click properties.

2) You'll see the Dimensions the first number is the width (e.g., 190, okay so I lied - 190 pixels wide seems to look okay too), the second number is the height (e.g., 260).

The second way, requires you to look at the Photo template. Click on Templates (in the sidebar).

Next, click on Modules.

Click on Widget: Photo

In there you'll see the dimensions of your header photo, (e.g., width 190 and height 260).

Note: If the file name in the Widget:Photo doesn't appear as "http://www.slowtrav.com/blog/your_blog_address/photo.jpg", where "your_blog_address" is your user name (e.g., khb or kim), change it to that and remember to rebuild your blog after you upload your photo.

Now that you know the width you need, the rest is easy. Simply upload the photo like you would any other (for instructions see, Uploading Photos). Make sure your photo is named photo.jpg (be careful, if the default file type is jpeg or jpg, you don't want to end up naming it photo.jpg.jpg.) The system will ask you if you want to overwrite the photo named photo.jpg (if you didn't change the file name in the Widget: Photo above). Click, "Yes." You will not need to do anything with the displayed HTML but do note the height and verify the file name is photo.jpg.

If the height of your new photo is different than the existing one, go into the Widget: Photo (as above), change the height to the new height, save it and rebuild your blog.

Images within blogs make them pop. But formatting those images to flow neatly within your blog takes a small bit of effort. We have several pre-defined classes within the Slow Travel Style that will help you place images to the left, right or in the midst of text, with or without captions.

Without Captions
We have three styles listed below that will display your pictures to the left of your text, to the right of your text or in the midst of your text respectively (remember to replace BLOG, XXXXX, width and height with the appropriate values.

Image to the left:
<img class="floatimgleft" alt="Testing images" src="http://www.slowtrav.com/blog/BLOG/XXXXX.jpg" width="www" height="hhh" />Begin text here...

Image to the right:
<img class="floatimgright" alt="Testing images" src="http://www.slowtrav.com/blog/BLOG/XXXXX.jpg" width="www" height="hhh" />Begin text here...

Image in the middle:
<img class="floatimgcenter" alt="Testing images" src="http://www.slowtrav.com/blog/BLOG/XXXXX.jpg" width="www" height="hhh" />Begin text here...

Will produce a blog entry that looks like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi dui lacus, pretium et, mollis vel, mollis sit amet, quam. Morbi tincidunt, lacus eget tempor lacinia, urna arcu volutpat ante, a luctus augue quam non sem. Nullam malesuada est sed magna. Vivamus ac turpis. Duis fermentum velit rhoncus purus. Aliquam sed felis. Morbi id lectus vel elit lacinia dignissim. Quisque pellentesque nulla vitae lectus. Fusce tempor imperdiet eros. Cras dapibus.

Cras et quam. Donec sed massa posuere ante feugiat ultrices. Vivamus vel urna placerat metus aliquam venenatis. Vivamus aliquet ante ac lectus. Aliquam ut ligula sed mi consequat suscipit. Aenean egestas sodales nibh. Nunc ut sem. Sed tempor feugiat elit. Sed neque nibh, suscipit ac, consequat et, blandit eget, purus. Nullam lectus. Integer imperdiet. Nam tempus, ipsum a congue consequat, lorem dui placerat diam, eu placerat tortor urna in tortor. Curabitur pulvinar sapien sit amet ipsum.

Integer quis velit. Vestibulum iaculis mauris sit amet nisl adipiscing adipiscing. Ut nibh turpis, luctus et, vulputate sed, dignissim gravida, arcu. Cras tempor mi sed dui. Vivamus feugiat. Nam in felis eu ipsum eleifend porta. Nam lobortis pharetra tortor. Cras a pede vel nunc euismod pellentesque. Nulla quam enim, mollis quis, aliquet ut, rhoncus id, elit. Sed ac ante. Vivamus fringilla. Fusce sit amet dui eu diam volutpat viverra. Curabitur convallis. Donec adipiscing nibh at purus. Etiam nisi massa, accumsan id, lacinia sed, tristique id, pede. Maecenas non lectus.

With Captions

In the same vein, sometimes we’d like to put captions under our images, to better explain to our readers what the image conveys.

Image to the left: <span class="floatcapleft"><img alt="Testing images" src="http://www.slowtrav.com/blog/BLOG/XXXX.jpg" width="www" height="hhh" /> Caption under image</span>Begin text here...

Image to the right: <span class="floatcapright"><img alt="Testing images" src="http://www.slowtrav.com/blog/BLOG/XXXX.jpg" width="www" height="hhh" /> Caption under image</span>Begin text here...

Image in the middle: <span class="floatcapcenter"><img alt="Testing images" src="http://www.slowtrav.com/blog/BLOG/XXXX.jpg" width="www" height="hhh" /> Caption under image</span>Begin text here...

Produces a blog entry that looks like this:


Caption under imageLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi dui lacus, pretium et, mollis vel, mollis sit amet, quam. Morbi tincidunt, lacus eget tempor lacinia, urna arcu volutpat ante, a luctus augue quam non sem. Nullam malesuada est sed magna. Vivamus ac turpis. Duis fermentum velit rhoncus purus. Aliquam sed felis. Morbi id lectus vel elit lacinia dignissim. Quisque pellentesque nulla vitae lectus. Fusce tempor imperdiet eros. Cras dapibus.


Caption under imageCras et quam. Donec sed massa posuere ante feugiat ultrices. Vivamus vel urna placerat metus aliquam venenatis. Vivamus aliquet ante ac lectus. Aliquam ut ligula sed mi consequat suscipit. Aenean egestas sodales nibh. Nunc ut sem. Sed tempor feugiat elit. Sed neque nibh, suscipit ac, consequat et, blandit eget, purus. Nullam lectus. Integer imperdiet. Nam tempus, ipsum a congue consequat, lorem dui placerat diam, eu placerat tortor urna in tortor. Curabitur pulvinar sapien sit amet ipsum.


This is a nice long caption under the image!Integer quis velit. Vestibulum iaculis mauris sit amet nisl adipiscing adipiscing. Ut nibh turpis, luctus et, vulputate sed, dignissim gravida, arcu. Cras tempor mi sed dui. Vivamus feugiat. Nam in felis eu ipsum eleifend porta. Nam lobortis pharetra tortor. Cras a pede vel nunc euismod pellentesque. Nulla quam enim, mollis quis, aliquet ut, rhoncus id, elit. Sed ac ante. Vivamus fringilla. Fusce sit amet dui eu diam volutpat viverra. Curabitur convallis. Donec adipiscing nibh at purus. Etiam nisi massa, accumsan id, lacinia sed, tristique id, pede. Maecenas non lectus.

What happens if you have a long caption under a left or right floating image?
It does not work. If you want a caption on a left or right floating image, make the caption short.


This is a really long, long caption under this small image.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi dui lacus, pretium et, mollis vel, mollis sit amet, quam. Morbi tincidunt, lacus eget tempor lacinia, urna arcu volutpat ante, a luctus augue quam non sem. Nullam malesuada est sed magna. Vivamus ac turpis. Duis fermentum velit rhoncus purus. Aliquam sed felis. Morbi id lectus vel elit lacinia dignissim. Quisque pellentesque nulla vitae lectus. Fusce tempor imperdiet eros. Cras dapibus.

Text genereated by www.lipsum.com.

If you have any questions, just e-mail me or ask them in the Blogging Forum, so others with the same question can have them answered.

A while ago we talked about the difference between Categories and Tags. Basically, Categories are used for high level organization of your blog, while Tags let you organize your entries by nitty gritty details.

For example let's say you blog about Cooking and Travel. You might set up two different categories then, once for all your Cooking Posts and one for all your Travel posts so this way, your readers who want to see your Travel Posts and only your Travel Posts can just click this category and see them. You can even add subcategories to your Categories, maybe breaking up your Travel Posts by trip (e.g., Italy 2009, Paris 2008).

Now let's say you want to organize your Cooking Posts more like a cook book but don't want dozens of sub categories. You can use Tags then, to organize them, for example, creating Tags for Appetizer, Main Courses, Soups, or Low Fat Cooking, Holiday Recipes, etc.

Now let's see how you can implement Tags.

Is Your Blog Set Up to Handle Tags

1. Click "New Entry" and page down to see if you have a Tag field. It will be below Excerpt. If you don't have it, click Customize Display of This Page.

Check for Tag Field

2. A Popup window will appear, click the box next to Tags and Click Save.

Click Tags

3. You should now see the Tag Entry box below the excerpt box on the New Entry.

Tag Entry Box Appears

Add Tags to New Entries

Going forward, it's very easy to add Tags to your entries. Simply enter the tags you want in the box separated by commas. Once you start entering a tag, the system will list some possibilities from your existing tags, but it does not operate on a complete drop down menu.

Entering Tags on an Entry

In the above example, I started entering a tag beginning with a "C" and the system displayed some that I could "arrow" down to and choose or I could continue typing a new one that will automatically be added to the tag list. Note: these tags are case sensitive. That means, in the above example, if I typed "Cooking" as opposed to "cooking" I would end up with two different tags with each name, so be consistent (yes I've done this).

Entering Tags to Older Entries

You have two options where this is concerned. The first is to go into each old entry and enter tags like above.

The second is to use a "batch" editing mode. Click on Entries to bring up a list of your entries. Then click on the entries for which you want to add the same tag.

Select Entries for Updating

Next click "More Actions" and then in the drop down "Add Tags" and click "Go."

Add Tags to Multiple Entries

A popup box appears that allows you to enter the tag you want. Make sure you enter it correctly as there are no prompts and remember it is case sensitive. Also note, you must do this per page (you can't click on multiple pages and then click Add Tags; it's once per page. However, if you click, "Show Display Options" at the bottom of the Entries page, you can increase the number of rows displayed per page.

Enter the Tag

Now click "Rebuild Site" for the tags to appear on each entry.

Displaying Tags in the Tag Bar

You may also want to display your tags in the sidebar, in addition to each entry. We do that with the use of a "Tag Cloud" this lists your tags, both horizontally and vertically, in alphabetical order, giving those Tags with more entries, more "weight."

Tag Cloud

In order to do this, click on Templates in the sidebar, and then page down to the Plugin Action section and click on Manage my Widgets (at the bottom).

Manage Widgets

Next click the Slow Travel Widget.

Edit the Slow Travel Widget

Drag the "Tag Cloud" widget from the "Available Widgets" list on the right to the "Installed Widgets" list on the left (the red line indicates where in the list/sidebar it will be placed). Click Save Changes at the bottom of the Available Widgets list.

Now you need to Rebuild your site (just the Index pages), for the Tag cloud to appear.

When you upload a photo and you want to add the photo to your post, use the Show me the HTML so you can then place the photo where you want in your post.

There are two options, one is a Popup Image. This gives you the code which will have a link that a reader can click and the image will pop-up outside of your post. As in this link :
View image

The Embedded Image will give you code that will allow you to post it into your text as below:

But did you know you can combine these two to make a clickable image that will pop-up a larger image? It is very easy but does require a little bit of HTML manipulation.

1. Decide how wide you want the pop-up. Upload the wider (larger) photo. (You will adjust the code for the embedded photo to have a width of your blog in a later step).

2. Select Show me the HTML and select Popup Image. Copy and past the the code from the box BUT do not close the box.

3. Here is the first trick - Right Click outside the box in the white space and select Back. This will take you back to the pop-up which will give you the code.

4. Now select Embedded Image. Copy the code and replace the word "View Image" with the code that you get from the embedded option.

5. Once last thing - in the string you got for the embedded option find the width="xxx" option and change it to be width ="500" (or what is used on your blog) and remove the height="xxx". The browser will automatically scale your picture to be only 500 pixels wide so it will fit embedded on your blog.

Voila - how you have an image you can click and display larger in a pop-up. Below is a clickable image.

Tips:

1) What if I can not go back after getting the code for the pop-up?

No worries - just upload it again with the exact same name. It will ask if you want to overwrite? Say yes. Now you can get for the embedded code.

2) What will the code look like?

Popup Code:
<a href="http://www.slowtrav.com/blog/kim99/Skagit_Tulips-030.html" onclick="window.open('http://www.slowtrav.com/blog/kim99/Skagit_Tulips-030.html','popup','width=800,height=533,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">View image</a>


Embedded Code with width at 500 and no height:
<img alt="Skagit_Tulips-030.jpg" src="http://www.slowtrav.com/blog/kim99/Skagit_Tulips-030.jpg" width="500" />


Combined code
<a href="http://www.slowtrav.com/blog/kim99/Skagit_Tulips-030.html" onclick="window.open('http://www.slowtrav.com/blog/kim99/Skagit_Tulips-030.html','popup','width=800,height=533,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img alt="Skagit_Tulips-030.jpg" src="http://www.slowtrav.com/blog/kim99/Skagit_Tulips-030.jpg" width="500" /></a>

Here are some samples of centering images that have been uploaded to Flickr.

Flick will automatically size images and generate the appropriate HTML code. Upload the photo, open it and then select "All Sizes". The Medium size will give you an image 500 pixels wide which is perfect for a large photo on Slow Travel Blogs. Highlight, copy and paste the HTML code into your web page.

To center the photo add class floatimagecenter or floatcapcenter as in the examples below. For more details - see Formating Photos on SlowTrav Blogs.

Test 1 - Center an image from Flickr

<a href="http://www.flickr.com/photos/66889257@N00/4214744128/" title="Villefranche Sur Mer by Marta_9, on Flickr"><img class="floatimgcenter" src="http://farm5.static.flickr.com/4069/4214744128_90d37762bc.jpg" width="500" height="375" alt="Villefranche Sur Mer" /></a>

Test 2

Caption under image

<span class="floatcapcenter"><a href="http://www.flickr.com/photos/66889257@N00/4214744128/" title="Villefranche Sur Mer by Marta_9, on Flickr"><img src="http://farm5.static.flickr.com/4069/4214744128_90d37762bc.jpg" width="500" height="375" alt="Villefranche Sur Mer" /></a><br /> Caption under image</span>