The text of your article is pasted in, now you want to add some images.
First things first: get your image to reasonable dimensions for a webpage. I usually reduce photos to 500 pixels wide and no taller than 800 pixels high. Use Photoshop or any photo editing program to do this. You don’t want to upload large files to your website (people can’t see the entire image and it takes up lots of space and is slow to load).
The following is assuming you’re in MovableType (MT) and you’re in the database (blog) you want to be in and you have open the entry where you want to add the photos.
1.) Click Upload File, a new window will open.
2.) (See image below.) Choose the image from your computer using the Browse button. After you find the image and click OK, select Local Site Path (the bottom option) and type in “images” (no quotes) as shown below.
3.) Click Upload. Another window will open.
4.) (See image below.) Because we’re adding this photo to an existing entry, we want to choose the second option from the top, Show me the HTML.
5.) Check the box for the image thumbnail and type in 150 for the width. Constrain Proportions should be checked and that will then automatically fix the height of your thumbnail.
6a.) Smaller image :: If your image is very small (a logo, for example), you’ll probably want to choose Embedded Image at the bottom and uncheck “Create a thumbnail for this image.”
6b.) Larger image :: If your image is larger (a photo), you’ll probably want to choose Popup Image so that your larger image will pop up when someone clicks on the thumbnail.
7.) The next screen gives you the HTML code that you’ll need to copy and insert into your entry. (See image below.)
8.) Back in your entry, paste the code you just copied into your Entry Body or Extended Entry. (See image below.) After the final /> in your code, place your cursor just after this code and hit your delete button on your keyboard once so the text following it is right after it (so there is no space between and the text of your entry where you want the photo to go.
In the image above, I still need to remove the blank space between the /> and the text starting with “Abe’s skin is red … ”
9.) You’re as good as done now, save your entry and your image will be there. To see what you’ve done, click at the top of the screen “View Site.”
10.) However, the image isn’t very nicely formatted. It’s aligned so that text won’t wrap around it and it doesn’t have any padding (text is right under it). To format the image in a better way, take a look at the code you just pasted and replace this with that:
this:
border=”0″
that:
border=”1″ vspace=”5″ hspace=”5″ align=”left” class=”border” title=”photoname”
11.) Your image is now aligned left so text will wrap around it and it has a fine line border and/or will have a customized border depending on the style I’ve given to all images in your site. You can replace the text “photoname” with a photo title of your choice. Leave the quotes there and don’t use double quotes (“) in your title.
12.) Click Save at the top of the page. Then View Site and see how things look. Hopefully, it looks something like the photos on this page.
