Learning MT4

Text Wrap

2008-10-22T18:36:30Z

From the original at LMT

This is a tutorial for using CSS or HTML to wrap text to the side of an image, like so:

Placeholder Latin text - Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet.

]]>

There are two main ways to do text wrap

1. Using the align attribute. One way to achieve an image wrap is to include an alignattribute to your image tag. Example: Use the hspace and vspace attributes to add margin around the image. Note that using the align attribute will do the trick, but it isn't considered good XHTML.

Image wrap using align="left" hspace="5" vspace="5"

Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit.

2. Adding a CSS class to your stylesheet. The proper way to do text wrap is to add a CSS class to your style sheet, and then include that class attribute in your image tag.

First add the following class to your stylesheet template:

.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

Save and rebuild your stylesheet.

Then add the class attribute to the image tag of the image besides which you wish your text to wrap.

Example:

If you float an image and you don't have enough text to wrap around the bottom of the image, add the following tag after the text you are wrapping:

If you use the CSS stylesheet method, you can add captions to your images, while at the same time wrapping text.

Adding Captions with a Span Class (the easy way)

Instead of adding a class to the image attributes, you can wrap the image, and a caption, in a span class like so:


Lily Pond

This code produces the following result:

Lily Pond

Adding Captions by Using Tables (the hard way)

Before the image tag, insert a div tag with the floatimgleft class:

Then add a table with two rows and with a width 2 pixels greater than the width of your image. In this case my image is 150 pixels wide, so the table width would be 152.

 
   
       
   
   
     Lily Pond

The result should look like this:

Lily Pond

Links

CSS Float Tutorial - by Max Design

Redirects

2008-10-22T18:28:46Z

From original LMT post

Suppose you change the name of a file. But instead of deleting the old file that is on your server (that may have many sites already linked to it) you want to forward anyone who goes to the old file URL to the new one. There are three basic ways to do this - with PHP, htaccess, or a Meta Refresh tag.

PHP
If you have php enabled on your site and server, you can use the following code to redirect a visitor to a new page:

Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://www.new-url.com" );
?>

You cannot do this method from within the Movable Type editing window. Download the file from your server using FTP software. Using a text editor (such as BBEdit for the Mac or Notepad for the PC), place the code at the very top of your page. Use FTP software to upload the file back up to your server.

]]>

.htaccess
Another way to redirect a page is by using htaccess (for Apache servers).

If you only want to redirect one page using htaccess, use the following:


redirect 301 /directory/oldfile.html http://www.domainame.com/directory/newfile.html

If you need to redirect a whole website or subdirectory of a website to a new domain, htaccess is the most convenient way to do it. To redirect all the pages in one domain to another, create a .htaccess file in your root directory (or add the following line to an htaccess file that already exists), and add the following line:

Redirect permanent / http://www.new-url.com/

The first "/" indicates that everything from the top level of the site down should be redirected. As long as you are using the same paths and filenames, then this is a simple way to redirect a site in the situation where you have only changed your domain name.

You can also use htaccess to redirect all the contents of a subdirectory into a new domain (assuming they have the same file paths in the new domain). I recently did this with Learning Movable Type. The site had all been under elise.com/mt and I wanted to move it to learningmovabletype.com. Here is the htaccess code I have on the root directory of elise.com:

redirect permanent /mt http://www.learningmovabletype.com

All files that are under the mt directory are automatically redirected tolearningmovabletype.com.

Meta Refresh Tags
One way to do a redirect is to place a Meta Refresh tag in the html header section of the file that you want to forward. The tag looks like this:

content="3 means that when someone goes to the old file, it will take 3 seconds to be forwarded to the new file. You can change this number to be more or fewer seconds, down to zero. Note that if you use zero, it makes it difficult for the site visitor to use the back button on her browser once she is on the new page. I typically use 1 or 2 seconds.

Note that because of the back button issue the W3C does not recommend using refresh tags for redirects and suggests server side methods instead. Also, because this method has been abused by sites trying to scam search engines, search engines do not look kindly on this method.

Comments from the old LMT post:

CHAD EVERETT :

Actually, you can use PHP (or whatever) in your Movable Type editing windows, it's just a little trickier.

In my case, I have an extra blog that I use for 'system' functions such as this. If I have the need to redirect a file - typically if I screw up a title or something (which I use to create my permalink), and want to correct it.

What I'll do is create an entry in that 'system' blog with the incorrect title, and the body contains the redirect information to the correct place. That way it all stays within MT and I don't need to use FTP at all. Makes backup as easy as backing up the database, too.

The only thing this takes is an extra MT blog (be careful of paths!), and templates that use a naming system that take whatever data you want to use to place something in the 'old' location - in my case I use the same system as I use for the 'live' blog, but you can use whatever you like.

By using this method, when I 'fix' the original entry, the 'error' entry goes away, and the information I put here in this 'system' entry takes over, and sends all requests for the incorrect location to the right place.

Incidentally, I maintain my .htaccess file through MT, too. :)

posted on march 6, 2006

VADIM NAREYKO:

Definately, .htaccess is a quickest and most general way since it can work for non php files and don't require old files into folders. There is an additional benefit - search engines will know that page name is changed.

And one "bad" thing: if you create new files - you need to check .htaccess that this file name is not redirected.

Customizing Registration and Profiles with Custom Fields

2008-09-17T07:02:51Z

1. Create Custom Fields

In System Overview, select Preferences > Custom Fields

Select +New Field

2. Edit Registration Form

Go to System Overview > Design > Templates > Registration Form

Add this code:

id="$field_id"
label="$name"
hint="$description"
shown="$show_field"
show_hint="$show_hint"
required="$required">

Then select Save.

3. Edit Profile Form

Go to System Overview > Design > Templates > Profile Edit Form

Add the same code as above.

4. If you only want to display one custom field in certain area on a form, and not all of them in a row, then use If statements. Here's an example if the custom field you want to use is named "Website Name" with a basename of "website_name".

Your custom field's basename, preceded by "custom field".

Example:

id="$field_id"
label="$name"
hint="$description"
shown="$show_field"
show_hint="$show_hint"
required="$required">

Thanks to Aaron Vanderzwan for this last tip.

I just finished installing Movable Type 4!

2008-09-10T22:57:34Z

Welcome to my new blog powered by Movable Type. This is the first post on my blog and was created for me automatically when I finished the installation process. But that is ok, because I will soon be creating posts of my own!