Monday, October 12, 2009
Friday, October 9, 2009
How do I insert and configure images in posts?
How do I insert and configure images in posts?
Answer
Adding images to your posts is a fun and easy way to add extra personality to your blog.
First, save the image to your computer. From there, you will transfer the image to your TypePad account for display online. Please note that TypePad does not provide image editing services so you should edit your image on your computer before uploading it.
Start by clicking the Begin a new post link on your Weblogs tab to open the new post page. Directly above the post text area you will see the Insert Image icon:
There are two upload icons: Insert Image for images and Insert File for other types of files. Images should be in gif, jpg, or png format.
Uploading an Image
Use the Insert Image tool to upload an image to your post. You can use the default settings or click on Custom to set your own preferences.
When the Insert Image window opens, use the Browse button to locate the image on your computer. The Image Size option will allow you to choose a standard size or enter in your own custom size, in a pixel width. The Full size image option will scale the image to fit the width of the main, post column on your blog. The Text Link option will create a textual link to the full size image, without a thumbnail.
You can float the image to either the right or left of your text, so that the text will wrap around it. Or you can choose No Wrap so that the image is on its own line.
The Pop-up Window option will link the image in your post to the full size version of the image in a pop-up widow when it is clicked.
If you would like for the settings you've configured to be the default, choose the "Save settings as this weblog's defaults." You can always use the Custom option again later to change these settings.
Finally, click the Insert Image button and the image will be uploaded to your account and displayed in your post.
Editing an Inserted Image
After an image has been inserted into the post, you can click on the image once with your mouse and handles will appear as a box around the image. Using the handles, you can resize the image to the size you would like to display it in your post.
Clicking the image twice, or clicking the Insert Image button, will bring up the Image Options menu. Here, you can choose a different standard size for the image, change the text wrap/flow setting, add padding around each side of the image, add a border, add description text for the ALT tag, link the image to a URL, and choose to open that URL in a new window.
After making your edits, click the X button at the top of the window or click anywhere in the post to close the window and save your changes.
Deleting an Uploaded Image
Images inserted into a post are not visible in the File Manager and cannot be deleted from there. In order to delete an image that was uploaded via the Insert Image tool, you must delete the post itself.
Additional tips for formatting images in posts are available in the Tips for Adding Images to a Post article.
Answer
Adding images to your posts is a fun and easy way to add extra personality to your blog.
First, save the image to your computer. From there, you will transfer the image to your TypePad account for display online. Please note that TypePad does not provide image editing services so you should edit your image on your computer before uploading it.
Start by clicking the Begin a new post link on your Weblogs tab to open the new post page. Directly above the post text area you will see the Insert Image icon:
There are two upload icons: Insert Image for images and Insert File for other types of files. Images should be in gif, jpg, or png format.
Uploading an Image
Use the Insert Image tool to upload an image to your post. You can use the default settings or click on Custom to set your own preferences.
When the Insert Image window opens, use the Browse button to locate the image on your computer. The Image Size option will allow you to choose a standard size or enter in your own custom size, in a pixel width. The Full size image option will scale the image to fit the width of the main, post column on your blog. The Text Link option will create a textual link to the full size image, without a thumbnail.
You can float the image to either the right or left of your text, so that the text will wrap around it. Or you can choose No Wrap so that the image is on its own line.
The Pop-up Window option will link the image in your post to the full size version of the image in a pop-up widow when it is clicked.
If you would like for the settings you've configured to be the default, choose the "Save settings as this weblog's defaults." You can always use the Custom option again later to change these settings.
Finally, click the Insert Image button and the image will be uploaded to your account and displayed in your post.
Editing an Inserted Image
After an image has been inserted into the post, you can click on the image once with your mouse and handles will appear as a box around the image. Using the handles, you can resize the image to the size you would like to display it in your post.
Clicking the image twice, or clicking the Insert Image button, will bring up the Image Options menu. Here, you can choose a different standard size for the image, change the text wrap/flow setting, add padding around each side of the image, add a border, add description text for the ALT tag, link the image to a URL, and choose to open that URL in a new window.
After making your edits, click the X button at the top of the window or click anywhere in the post to close the window and save your changes.
Deleting an Uploaded Image
Images inserted into a post are not visible in the File Manager and cannot be deleted from there. In order to delete an image that was uploaded via the Insert Image tool, you must delete the post itself.
Additional tips for formatting images in posts are available in the Tips for Adding Images to a Post article.
Thursday, October 8, 2009
Displaying Images In Your Sidebar
How do I display images in my sidebar?
Answer
This articles explains how you can take a custom image that you have saved to your computer and display it in your weblog sidebar with a link to another site. Clicking the image will open the site you specify. This method can be used for displaying an image such as a Powered by TypePad button.
This article also explains how to display an unlinked image and how to display a custom image for a webring.
Note: You may want to take a look at our Widget Gallery. A widget is piece of code that you can add to your weblog automatically without having to create the code yourself. For example, there are widgets to add a link to your FeedBurner feed and even a FeedBlitz subscription form.
Step 1: Upload the image to your account
Use the file manager to upload the image. The file manager is located on the Control Panel > Files page. Browse for the image on your hard drive and then upload it.
After uploading the image, click on the image filename to view it in your browser. Your browser's address bar will show the URL for the image, such as http://example.typepad.com/image.jpg. You will use this URL to write HTML code for displaying the image.
Your code should look like the following:
Replace http://example.typepad.com/image.jpg with the URL that you obtained previously for your image.
Step 2: Add the code to your template
Next, use a Link TypeList to add the code to your weblog's sidebar. If you haven't already, create a Link TypeList and add it to your template. See Creating a New TypeList for tips on how to create the list and add it to your page.
Click on Add Item to add to the list. On the next page, take the image code that you created in step 1 and paste it into the Link title area of the item.
In the Link URL area, enter the URL that you would like to open when the image is clicked, such as:
You can also enter text into the Notes area of the item and set the configuration of the list to display notes "as tooltip." Then the note will display when you hover your mouse over the image.
Save the item and the image now appears in your weblog sidebar as a link!
Displaying an unlinked image
The above method should be used only if you wish to display a linked image. If you don't want your image to be linked to anything, follow the instructions in this section instead.
Upload the image in the same manner as described above and create your HTML code:
Now create a new Notes TypeList and add a new item to this TypeList. Place the code in the Notes field of the TypeList item and save.
Bonus Tip: Displaying a custom image for a webring
If you join a webring that requires you to store their image on your own server, or if you wish to use a custom image for the webring instead of the one they provide, follow step one above for uploading the image and creating code to display it. Again, the code should look something like this:
Copy the part that points to the source of the image file, where it says src=, so you end up with something like this:
src="http://example.typepad.com/image.jpg"
Look in the existing code snippet you would like to add, for example if it is webring code it often says src="IMAGE URL HERE" in the code, and that is what you would replace with the src= from your uploaded image.
When you have your extra code snippet prepared, paste it all into a Notes TypeList item, in the Notes field, then save the item.
The code will now display in your sidebar just as you've pasted it.
Answer
This articles explains how you can take a custom image that you have saved to your computer and display it in your weblog sidebar with a link to another site. Clicking the image will open the site you specify. This method can be used for displaying an image such as a Powered by TypePad button.
This article also explains how to display an unlinked image and how to display a custom image for a webring.
Note: You may want to take a look at our Widget Gallery. A widget is piece of code that you can add to your weblog automatically without having to create the code yourself. For example, there are widgets to add a link to your FeedBurner feed and even a FeedBlitz subscription form.
Step 1: Upload the image to your account
Use the file manager to upload the image. The file manager is located on the Control Panel > Files page. Browse for the image on your hard drive and then upload it.
After uploading the image, click on the image filename to view it in your browser. Your browser's address bar will show the URL for the image, such as http://example.typepad.com/image.jpg. You will use this URL to write HTML code for displaying the image.
Your code should look like the following:
Replace http://example.typepad.com/image.jpg with the URL that you obtained previously for your image.
Step 2: Add the code to your template
Next, use a Link TypeList to add the code to your weblog's sidebar. If you haven't already, create a Link TypeList and add it to your template. See Creating a New TypeList for tips on how to create the list and add it to your page.
Click on Add Item to add to the list. On the next page, take the image code that you created in step 1 and paste it into the Link title area of the item.
In the Link URL area, enter the URL that you would like to open when the image is clicked, such as:
You can also enter text into the Notes area of the item and set the configuration of the list to display notes "as tooltip." Then the note will display when you hover your mouse over the image.
Save the item and the image now appears in your weblog sidebar as a link!
Displaying an unlinked image
The above method should be used only if you wish to display a linked image. If you don't want your image to be linked to anything, follow the instructions in this section instead.
Upload the image in the same manner as described above and create your HTML code:
Now create a new Notes TypeList and add a new item to this TypeList. Place the code in the Notes field of the TypeList item and save.
Bonus Tip: Displaying a custom image for a webring
If you join a webring that requires you to store their image on your own server, or if you wish to use a custom image for the webring instead of the one they provide, follow step one above for uploading the image and creating code to display it. Again, the code should look something like this:
Copy the part that points to the source of the image file, where it says src=, so you end up with something like this:
src="http://example.typepad.com/image.jpg"
Look in the existing code snippet you would like to add, for example if it is webring code it often says src="IMAGE URL HERE" in the code, and that is what you would replace with the src= from your uploaded image.
When you have your extra code snippet prepared, paste it all into a Notes TypeList item, in the Notes field, then save the item.
The code will now display in your sidebar just as you've pasted it.
Subscribe to:
Posts (Atom)
Posts
