« PHP and MySQL for Dynamic Web Sites - Book Review | Main | Movable Type 3 Bible - Book Review »

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 need to have Image::Magick installed on your server for this to work.) 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.

Comments (9)

Jamie Kenyon:

The latest version of Ecto has image optimization built in, as well as cropping, thumbnail generation, and creates the image link for you too.

For those who don't already know (like me), here is a definition of "ecto" from the ecto website:

ecto is a feature-rich desktop blogging client for MacOSX (we also have a Windows version in the works), supporting a wide range of weblog systems, such as TypePad, MovableType, Nucleus, Blogger, and more.

http://www.kung-foo.tv/ecto/

tjl:

This could have been covered in another post but how do I add a simple box on the right margin with just a photo of me? I understand all the steps above just don't know the script to get it up.

tjl - I think all you have to do is upload your jpg photo file using the process outlined above, copy the HTML that using MT's upload process gives you, and paste it into your Main Index Template in the area of the template that is the sidebar section.

Kino:

When I upload I don't see the "Create a Thumbnail" checkbox and resizing option. How can I enable this option?

Thanks.

Kino:

I just discovered that MT is not seeing the installation of ImageMagick on my host. You need this or NetPBM installed for the image thumbnail feature to work.

Political Pulpit:

I have thirty authors on my page. I was having a HUGE problem with these authors posting their photos to whatever directory they had a whim. I finally solved that problem by editing my upload.tmpl to give a default value for the directory. I then edited the upload_complete.tmpl to validate the maximum size allowed for the width of the graphic to an equal or less than statement of 500 pixels.

This has worked beautiful.

Katie:

Does anyone know how to get the upload images button on my editing menu if it's not showing up? I only get new entry and edit entries buttons ...

Hi Katie -

I would re-upload your entire mt-static directory. You may want to rename your existing mt-static as mt-static.save (or something - you just want to make sure it isn't "mt-static"), then upload a new copy. Because the buttons are actually stored in a single image, it shouldn't be a missing image, or none of the buttons would show, but it sounds like there's a problem with something so that it's not displaying correctly. It could also be missing CSS or something. This should resolve that problem.

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)