Learning Movable Type: Uploading Images and Photos


Posting photos and images to your weblog entry is easy in Movable Type.

1. Prepare your image for the web. First make sure your image is a manageable size. Whether you are using software that comes with your digital camera or specializied photo software such as Adobe Photoshop or PhotoElements, reduce the image size of your image so that it will comfortably fit in the space provided by your weblog at a resolution of 72 dpi. Most cameras take images at high resolutions so that they will be able to print out well on photo paper. Your computer's screen resolution however is a low 72 dpi (dots per inch). So if you want to see what your image will look like on your weblog, view it at 100% at 72 dpi. Some products such as Adobe ImageReady let you optimize your image for the web, in other words use special compression algorithms to reduce the image's file size so that visitors on a dial up don't have to wait 10 minutes to see your picture. Photos are best optimized as jpg files (suffix of .jpg) and graphics are best optimized as gif files (suffix .gif). I try to keep all of my images and photos to less than 20K, preferably less than 10K. This ensures that they will load quickly in a browser.

2. Choose where on your server you will store your images. For easier server housekeeping purposes, create a directory within your weblog directory where you will store your jpg and gif images.


3. Select Upload File from the left hand side of your weblog editing menu.

upload-file.gif

This will open a popup window that will step you through the image upload process.


Click to display full image.


4. Click on "Choose a File" and find the file on your hard drive that you want to upload.


5. Choose a destination. Selecting the "Local Archive Path" (the default) will direct Movable Type to save your image into the directory that contains your archive files. Selecting "Local Site Path" will direct Movable Type to save your image into your blog's main directory.

You can select a subdirectory to hold your images by typing the name of the subdirectory into the space provided to the right of "Local Archive Path" or "Local Site Path". Note that you don't have to use FTP to create a new directory for your images. MT will do that for you, just by you typing in a name for your images subdirectory.


show_me_the_html.gif6. Select Upload. You will be prompted with a new window with questions concerning how you want your image to appear.

If you would like a new entry to be created with your image in it, select "Create a new entry". If you would prefer to be shown the html so that you can cut and paste the code into an existing entry, select "Show me the HTML".

If you want to create a thumbnail of your image, check the box next to "Create a thumbnail." You can specify the dimensions of the thumbnail in pixels or percentages. If you change the dimension in either the width or height, and the "Constrain proportions" box is checked, the corresponding dimension will change proportionally.

You can choose to have your image appear in a popup window when you click on a link, or appear as an image "embedded" in your entry. If you created a thumbnail and selected "Popup Image", you will be given code that will place the thumbnail in your entry with a link to a popup of the full image.

7. Copy and paste the HTML into your entry. (Unless of course you have chosen the option, "create a new entry", in which case a new entry window will be created with the image HTML already placed in it.)

8. Wrap text around image. If you want your text to wrap around the image you just loaded, check out the LMT tutorial, Text Wrap.


Links:
Better File Uploader plugin - from Dan Wolfgang, an exceptionally useful plugin for better managing file uploads into MT.


Posted by Elise Bauer on April 29, 2005 11:13 AM to Learning Movable Type http://www.learningmovabletype.com/