Horizons Unlimited - the motorcycle travel website - E-zine, Bulletin Board, Community, tips, info.

Movable Type User Manual

How To Enter YOUR Motorcycle Travel Story...

Hosted by Grant & Susan Johnson, RTW 1987-1998

updated April 9 2014

in cooperation with
Quality Touring equipment worldwide.

Introduction

We use Movable Type blogging software to enable motorcycle travellers around the world to enter their stories easily and without our intervention. For an example of a blog produced with this software, see Ken and Carol Duval's story.

Request your free personal blog here. The form will give us the information we need to set up the blog. After that, the following should be everything you need to know.

As always, thanks for your patience and continuing support.

Grant and Susan


Movable Type User Manual

About Movable Type

Movable Type (http://www.movabletype.org/) is a web-based personal publishing system. It is designed to ease maintenance of regularly-updated news or journal sites, like weblogs, commonly known as 'blogs'. It includes support for the following features:


Getting Started

Logging In

Login at: http://www.horizonsunlimited.com/cgi-bin/mt/mt.cgi

Main menu picture

editing menu picture


Navigation

Movable Type uses the same 7 icons throughout to allow you to move between screens. The icons are explained briefly below in the order you will see them, with links to the detailed explanations in the remainder of this manual.

MTCreateNewEntryIcon

Create New Entry

Allows you to create a new entry, see Entries

Upload File

Allows you to upload an image file from your local computer, then provides the code you need to put the image in your entry. See Uploading Files

Rebuild Files

Necessary if you have added categories or changed the category assigned to an entry so that Movable Type can correct the site pages. See Rebuilding Files. If you don't see a change you have made, reuild files.

List & Edit Entries

Brings you to a list of your entries. Allows you to view all entries or a subset of them, delete entries, and Search and Replace text in all entries. See Search and Replace

Edit Categories

Allows you to add or rename categories. Also indicates how many entries are in each category, which may be useful to know before you make any changes. See Categories

Edit Notification List

Allows you to add or delete e-mail addresses of users who wish to be notified when you post to your site. See Notifications

View Site

Opens your site in a new browser window so you can see how your entries will look. This is also how you Backup your files. See Backing up your Files


Categories

Movable Type allows you to create a list of categories, then assign one category to each of your entries. This allows you to keep track of your entries from a maintenance standpoint--for example, when listing your entries you can choose to list entries only from a particular category--and it can also be used to provide a categorization structure to your archives. If you wish to use categories, we suggest either countries or perhaps continents?

After you have created your categories and saved them, return to the 'Editing Menu' by clicking on the link. Click on 'Create new entry'. See Entries below.


Entries

Create New Entry

Entries form the basis of your blog. You can create a new entry by logging in to Movable Type, selecting a blog, then clicking 'Create New Entry' . This will take you to the Create New Entry screen.

When creating a new entry, you will have the chance to enter information as follows:

You can use the PREVIEW button to preview your entry before posting; CANCEL will return you to the List Entries page WITHOUT saving it.

Edit Existing Entries

After you have saved a new entry, you will be transferred directly into editing mode for that entry. You can also edit your existing entries by clicking 'List & Edit Entries' , then clicking on an entry from that list.

When editing an existing entry, you will have two new options:

Note that, upon saving an entry that is marked for Release, your archives for that entry, along with all of your indexes, are automatically rebuilt. Thus you do not need to manually rebuild your files (see Rebuilding Files , below) after posting a new entry, or after editing an existing entry. You do need to Rebuild Files after creating new Categories or changing the Category assigned to an entry.

Entry-Editing Shortcuts

If you are using Movable Type on Internet Explorer for Windows, you can make use of a couple of keyboard shortcuts while editing your entries, to automatically insert HTML formatting tags. To use these shortcuts, select the text you wish to format in your entry, then press the appropriate keyboard shortcut combination:

For those who prefer mouse to keyboard, remember you can also click on the icons as indicated below.

Search and Replace

From the List and Edit Entries screen, you can use Movable Type's Search and Replace functionality either to search through all of your entries for a particular string, or to replace all instances of a string with another string.

 

You have the following options when using search and replace:

IMPORTANT: You cannot Search and Replace in just one entry, and there is no undo feature, so be careful when you use the replace functionality.

We recommend you make a copy of your Movable Type entries to your local hard drive before using replace, for backup purposes. See Backing up your files. Note: The Export feature in the screen above DOES NOT work at this time, and you will get an error message.

Hyperlinks

Putting in a hyperlink to anything is straightforward.

To get:

This webpage

as a clickable link, you just put the following in the code:

Get the url of the page you want to link to and put this in front of it:

<a href="

and this behind it:

">This webpage</a>

(This webpage is the TEXT you want to display to the user.)

So, to build it:

<a href=" and add the link http://www.horizonsunlimited.com/tstories/mt/docs/mtmanual.shtml and then the finish bit behind it ">This webpage</a>

gives you:

<a href="http://www.horizonsunlimited.com/tstories/mt/docs/mtmanual.shtml">This webpage</a>

It will look like this to the user on the webpage:

This webpage


Uploading Files / Working with Images

Movable Type offers an interface for uploading files--either .jpg images or .HTML files--onto the webserver for use on your site. MS Word or Word Perfect documents, Powerpoint files, movie and sound files, etc won't work.

Uploading Images to your blog

Before you start, you should have Sized the image (using your image editing program) appropriately:

Export the image as a .jpg file at a reasonable compression ratio - usually between 30-40%. When looked at in your file manager, the image file should be no larger than 80 kb. Larger images may not display properly on the screen, take too long to download and annoy users on less than super fast systems.

NOTE: When naming the image file, DO NOT USE spaces or accented characters. Some browsers cannot read files with spaces in the names, which means some of your friends and family may not be able to see the pics!

Bad: my picture of Iquazu falls.JPG

Good: my-picture-of_Iquazu_falls.jpg

To upload a file, log in to Movable Type, select your blog, then click Upload File . The following screen will appear:

After you have uploaded a file, you will see the following screen.

Putting images into your blog from Yahoo, Hotmail, flickr, or any other remote picture storing/album website.

Photo editing: You can edit photos online with any one of a number of good free services - for reviews of the majors, see:

http://labnol.blogspot.com/2006/06/online-photo-editors-compared-gifworks.html

http://www.extremetech.com/article2/0,1697,2108968,00.asp

If those links are broken, things have changed! Try googling for:

online photo edit free

or any combination of those and see what you find. If you find one you really like, let me know and I'll list it here.

http://pixlr.com/

http://ipiccy.com/

http://www.photocat.com/

Photo storage:

flickr.com

There are lots of sites now that make it really easy to store hundreds of images, create photo albums etc. You can post a link on your blog to these albums (See Hyperlinks for details on linking to files.)

Or you can just put a link in your blog so that the picture shows up inline in your blog, and just looks like it's a part of the webpage.

Here's how to do that:

  1. In your blog, paste the following into the Edit field where you want the picture to show up.

<img src="http://www.horizonsunlimited.com/tstories/images/mypicture.jpg" width="400" height="300">

  1. Next, to link to an image, you need to find the full path and filename, or url, (Universal Resourse Locator) of the image you want to display. Open a new browser window and navigate to your online photo album.

Depending on the site, you may be able to see the image only, in which case the url will be something like:

http://www.horizonsunlimited.com/tstories/images/mypicture.jpg

Note the .jpg extension at the end. If it's not .jpg, or .png, .gif (unlikely) it's not what you want. In that case, right-click on the image and select Properties at the bottom of the menu.

In Internet Explorer, select and copy the contents of the Address: (URL) field. Note the Dimensions: e.g. 400 x 200 pixels. You'll need that.

In Firefox, select and copy the contents of the Location: field. Note the Width and Height: dimensions e.g. 400 x 200 pixels. You'll need that.

(It doesn't look like you can select the contents of those fields, but you actually can - just click and drag your mouse, and seclect ctrl-c to copy.)

  1. Then back in your blog Edit field, all you need to do is paste that URL into the line you inserted in step 1 above, replacing the placeholder url (the bold text below) with yours:

<img src="http://www.horizonsunlimited.com/tstories/images/mypicture.jpg" width="400" height="300">

Substitute dimensions, and you're done. It'll take about 10 seconds once you've done it.

  1. As below, you can add then alt text and centering.

Combining Embedded and Popup Images (advanced users only):

Before you start, you should have:

We will use an example from Ken and Carol Duval's blog to show the code. See 'Playing with Trucks in Pakistan' to see how it looks, then follow the steps below to use it for your own images.

1. Example - the following HTML code will produce a centred 330 pixels wide image, with an option to Click on a link for a larger 640 pixels wide image.

<center>
<img alt="Iranian petrol sells on the black market in Pakistan."
src="http://www.horizonsunlimited.com/tstories/duval/images/BlackMarketPetrolPakistan-330.jpg"
width="330" height="215" border="0" />
<a href="#" onclick="window.open('http://www.horizonsunlimited.com/tstories/duval/images/BlackMarketPetrolPakistan-640.html', 'popup',
'width=640,height=417,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">
<font size="1">click for larger image</font></a>
<p class="caption">Iranian petrol sells on the black market in Pakistan</p>
</center>

2. Customizing the code for your own images. The only changes needed to this code are: the Alt text and Caption; the paths to the Embedded and Popup images which contain your directory and the image names; and the image size. I have indicated in Bold Red the only parts that you should change to customize it for your own image.

<center>
<img alt="Iranian petrol sells on the black market in Pakistan."
src="http://www.horizonsunlimited.com/tstories/duval/images/BlackMarketPetrolPakistan-330.jpg"
width="330" height="215" border="0" />
<a href="#" onclick="window.open('http://www.horizonsunlimited.com/tstories/duval/images/BlackMarketPetrolPakistan-640.html', 'popup',
'width=640,height=417,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">
<font size="1">click for larger image</font></a>
<p class="caption">Iranian petrol sells on the black market in Pakistan</p>
</center>

3. After you have customized the code, copy the amended code into the blog text in the appropriate location, and Save the page. Look at the page in your browser and see if the results are what you expected. If not, go to Section 4 and see the explanations for what each part of the code does.

4. Step by step - if you encounter any problems, you should read the following to see what might need correcting.

<center>

(aligns the image in the center of the page. Note that </center> must be used at the end of the block of code to close the code, or else subsequent text will also be centered.

<img alt="Iranian petrol sells on the black market in Pakistan."

This is the text that will show if the person holds a mouse over the image, or if they can't display the image. By default, Movable Type will display the file name of the image here, unless you give it the text to display. We suggest you use the same text as for your caption (image description) below.

src="http://www.horizonsunlimited.com/tstories/duval/images/BlackMarketPetrolPakistan-330.jpg"

This tells the browser exactly where to find the image. The format should always be http://www.horizonsunlimited.com/tstories/yourname/images/imagename.jpg.

width="330" height="215" border="0" />

This tells the browser what the size of the image is. When you upload an image in Movable Type, it will show you this code so you can copy it into the blog. Note the /> at the end closes the code which began with <img alt="... HTML code is very precise, and as a rule, if you have a < you must have a /> to close the code. Otherwise, you will get unexpected results.

<a href="#" onclick="window.open('http://www.horizonsunlimited.com/tstories/duval/images/BlackMarketPetrolPakistan-640.html', 'popup',

This command tells the browser what to do when the person clicks on the link, and exactly where to find the larger image. Note that Movable Type creates an .html page to display the popup image when you upload a Popup image, so the link is to the .html page, not to a .jpg file. This is why you must have uploaded the images correctly before starting to do this process.

'width=640,height=417,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

This tells the browser what the size of the larger image is. When you upload an image in Movable Type, it will show you this code so you can copy it into the blog.

<font size="1">click for larger image</font></a>

This command displays the link under the image to click for a larger image. Note the /> at the end closes the code which began with <a href="#".

<p class="caption">Iranian petrol sells on the black market in Pakistan</p></center>

This command displays the caption (image description) under the picture, in small text. Note the </P> to close the caption code, and the </center> to close the centering for the image(s) and captions. (The case matters for "caption". "Caption" won't work.)

This whole process seems painful, but once you've done it the first time, it's really not difficult to repeat it for other images, and it does make for a very professional looking page.

Introductory Page - Intro.htm

At the top of the index page of your blog you will probably want to have an introduction to you and your trip.

We recommend that you keep it short, only a paragraph or two, with a single picture. You can have links on it to other files, which you can of course upload as well. These files are ordinary html files, with .htm or .html extensions. (Do NOT call them index.anything!)

In these additional files you can put information such as equipment lists, route planning information with maps, bike preparation information and photos, and anything else you like.

In order to have the inroduction always at the top of the index page, the introduction section requires a special file, intro.htm. All you have to do is put the text you want in the file and upload THE FILE intro.htm using the blog file upload software just like it was an image - but REMOVE the "image" in the spot where the file name goes, so it's in the directory /tstories/yourname/ and NOT in /tstories/yourname/images/.

Intro.htm formatting

The intro.htm file has to be formatted in a special way, as it is "included" automatically inline in the main page. IMPORTANT NOTE: It is NOT an entry - do not paste the code into an entry.

You can download the default intro.htm file by going to your website address and adding intro.htm to the end of the url, e.g. "http://www.horizonsunlimited.com/tstories/yourname/intro.htm" and then View source, and save that.

Or you can create one: the intro.htm file must be formatted as follows: (and if it's greek to you, just send us the text and photos you want in your intro and we'll take care of it for you. Also the names and descriptions of any files you want to put up as well, so we can insert the links.)

<!-- Start of the file - nothing goes above this line, don't change the following at all -->
<div class="content">
<div class="blogbody">
<!-- Your text, and html links and tags goes in the blank space below this line. -->

<h4>This is the Introduction (intro.htm file)</h4>

<p>Put whatever you like here. Usually it's a little about you, and what you're doing. <br /><br />

Photos etc ok. Shows only on the home page. <br /><br />

If you have trouble send Grant whatever you want in here. </p>

<!-- This is the end of your text, don't change the following at all -->
</div></div>
<!-- end of the file - nothing goes below this line -->

 

NOTE that there are no HEAD or BODY tags, or anything else above or below these lines. Anything else will break the page.

If you are lost and befuddled at this point, just send us the text and photos you want and we'll take care of it for you.

If you have uploaded intro.htm, and the index page is broken, and you're not sure what to do, let us know, and send us the file so we can fix it for you. In the meantime, upload a BLANK (absolutely nothing in it) intro.htm file. This should recover your page for you.


Comments

Comments are currently turned OFF due to heavy comment spamming by spam scum. Sorry.


Notifications

After posting a new entry, you may wish to send email to your readers, to inform them of the new entry. Movable Type makes this easy with its notification system. Your viewers can 'sign up' for a notification when updates to your entry are posted to the site.

Managing the Notification List

Sending Notifications

Notifications are never sent automatically when you post a new entry, as you may not wish to notify your readers immediately, and also you may wish to send a message with the notification.


Archiving

Your site will be automatically archived by individual entry, monthly, and by category.


Syndicate this site

This allows users to access an RSS feed (which your blog automatically generates) using a tool like BlogExpress in order to easily keep up-to-date on a number of sites. Read the BlogExpress page for details on this new technology.

Important Note: If you don't want people using BlogExpress or any other RSS feed program to have trouble:

Rebuilding Files

When you make changes to your category names, you will need to rebuild your files to see those changes reflected on your public site. Note, however, that when editing an entry, or creating a new entry, you will not need to rebuild your files: editing and creating entries automatically rebuilds the archives for that entry, and updates all of your indexes.


Backing up your files

Before doing a Search and Replace on an entry or multiple entries, you should make a backup of your files. Currently the procedure is clumsy, we hope to improve it in the next version.


Troubleshooting

I keep getting the Movable Type login screen

The problem: you log in to the system and get the Main Menu; but every link you click on that screen brings you back to the login screen.

I can't logout!

The problem: you are logged in to Movable Type; then you logout, and try to login as another user (for example). But you are still logged in as yourself.

Feedback

We have adapted this manual from the original one supplied by the program's authors. We have tried to simplify it, and also provide screen shots so you can compare what you are seeing on the screen to the instructions. Please let us (Grant and Susan) know via the feedback form how you find it to use, so we can improve it for future users.


Copyright & Usage

Movable Type is Copyright 2001, 2002 Mena G. Trott and Benjamin Trott. All rights reserved.

All content you enter into YOUR blog is YOUR copyright. We reserve the right to reproduce it in the Newsletter or other HU location with full credit to you.

Top of page Top Home Shop the Souk Grant & Susan's RTW Trip Subscribe to the E-zine HUBB Community Travellers' Stories
Trip Planning Books Links Search Privacy Policy Advertise on HU

Your comments and questions are welcome. Contact Horizons Unlimited.
All text and photographs are copyright © Grant and Susan Johnson, 1987-, or their respective authors. All Rights Reserved.