December 05, 2011

Insert And Edit Image In A Post

Some of the Insert Image features are still in BETA. If you opt to join the Typepad Beta team, you can utilize the new Insert Image features. You can opt out of Typepad Beta anytime.

Insert Image

To add an image to a post or page, click the Insert Image Insert Image button in the Rich Text toolbar.

When inserting an image into a post, you have two options: upload image from your computer and use image from another site.

Upload an image from your computer

Click the Browse or Choose File button to search for the image located on your computer. After locating the image on your computer, click Open.

Use an image from another site

To display an image in a post from another site, like Flickr, Photobucket, or Lockerz, you can simply enter the URL for the image.

In the Enter a URL field, enter the URL for the image and click Add.

When adding an image from another site, a copy of the image will be uploaded to your account to be displayed as the thumbnail image in your post. The thumbnail image will link back to original image URL.

Additional images can be added by choosing to upload another image or entering another image URL.

Custom Settings

When you insert multiple images at a time, the images can be inserted individually with the same settings or as a thumbnail gallery. Click the Edit button to adjust the image settings from the defaults.

Individual Image(s)

Image Size

  • Full Size: Image will be sized to fill the main content column. Except when a Fluid width is being used for the column. Then the image will be no larger than 320px.
  • Large (500px)
  • Medium (320px)
  • Small (120px)
  • Custom: Enter a custom width in pixels (px).
  • Text Link: A link to view the image will be added to the post, instead of a thumbnail image.

The best image widths are in 50px increments. e.g. 400px, 450px, 500px, 550px

Position

  • Left Align
  • Center Align
  • Right Alight
  • Float Left: Image is on the left with the text of the post wrapping on the right.
  • Float Right: Image is on the right with the text of the post wrapping on the left.

Link to full-size image in a pop-up window

By checking the box, clicking the image in a post will open a pop-up window with the original image. If you do not check the box, the image will link to the original image in the same window.

Linking to the image in a pop-up window is not recommended if you prefer to have your image link to another website.

The Image Size, Position, and Pop-up Window options can be edited after images are added to your post.

Thumbnail Gallery

When adding multiple images, you can choose to display the images in a gallery format. All images will appear as small thumbnails above the larger version of the selected image in your post.

The selected image will display in the set size - 640px, 500px, or 320px. Clicking the thumbnail images will open the larger image.

At this time, the ability to edit images is not available when using the Thumbnail Gallery.

After configuring the image(s), click Insert Image to add the image(s) to your post and continue editing your post. Individual images can be edited after being inserted within your post.

Edit Image

From the Rich Text editor, double-click on the image to open the Edit Image pop-up. Editing the image is not available when using the Thumbnail Gallery.

Standard Options

  • Caption A caption will be added below the image in a different font size and style from the post body text.
  • Border Select a border width from the drop-down menu. Select Solid, Dotted, or Dashed for the border style. Click in the color code field to open the color selector pop-up.
  • Image Size
  • Description The description will appear when you hover your mouse of the image and is also known as the image title. Search engines also use the image title to categorize the image when it is indexed.
  • Alignment
  • Link to full-size image

Aviary Options

Aviary is an image editing tool which has been integrated with Typepad to give you nearly 20 more ways to configure an image included in your blog posts. Click on any of the icons to adjust the settings.

To utilize the Aviary options, your images will need to be 1024px or smaller. You will be prompted to resize the image before you can apply the edits. The Standard Options, including captions, are available for any images regardless of size.

Use the Undo and Redo buttons to revert the last made change to the image.

After completing your edits, click Update Image to encode the changes to the image and update your post. Please note this can take a minute to complete.

Rotate the image 90° or 180°.

Flip the image left, right, up, or down.

To Crop the image, the drag the handles on the box. Check Maintain proportions to keep the ratio of the image height and width the same as the original image.

To remove Redeye, select brush size to match size of red spot and click on the spot.

To remove a Blemish, select brush size to match size of blemish and click on blemish. The blemish will be replaced with the same color and texture of the surrounding area.

The Colors of the image can be adjusted by changing the red, blue, and green levels.

Adjust the color Saturation from black-and-white to full saturation.

Adjust the Brightness of the image from dark to light.

Adjust the Contrast to affect the color and brightness of the image.

The Drawing function allows you to draw directly on the image in various colors and widths. Use the Eraser to remove any unwanted graffiti to reveal the image underneath again.

Add Text to the image. Enter your text in the field, select a color, and click OK. Drag-and-drop to place the text over your image. Use the handles on the box to re-size and rotate the text.

Add Stickers to liven up your image. Drag-and-drop to place the sticker. Use the handles to re-size and rotate.

The Blur setting allows you to blur the image.

Sharpen the image.

Apply the Toy filter to give your image a toy camera look.

Apply the Old Photo filter to give your image an antique look.

Apply the Retro filter to give your image a Polaroid look.

Use Auto to have the image optimized automatically.

Notes:

  • If you are using Internet Explorer 9 as your browser, you will want to disable compatibility mode. The updates to the Rich Text editor no longer require you to use compatibility mode.
  • Flash needs to be enabled in order for the advanced image editing tools to load.


Search

Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Typepad Services badge