Embedding Images in Formatted Text Blocks

How to embed, format and edit images in Formatted Text Blocks

Prerequisites

This tutorial assumes you already know the following:

Step 1: Choose Image Placement

  1. When in the Formatted Text Block editor, place your cursor in the location you would like the image to appear.
  2. Click on the image icon in the toolbar.

image button in the text block

Step 2: Choose the Image

Image

  1. If you have already uploaded your image, press Choose. Otherwise, press New and upload your image.
  2. You now need to search for your image in the Image Gallery.
    1. Enter the image's title or keywords.
    2. Choose a subsite to search in (if you aren't sure, choose "/" and check "Include Child Subsites" to search the whole site).
  3. Once you have made your filtering decisions, press Search.
  4. Browse through the results, and click on the image you want to use.
  5. Click on Use Highlighted Image.

Step 3: Image Properties

Image Size

We recommend that you resize the image before uploading it. But here you can resize the image and give it padding.

Edit image size & padding

  1. Press Edit.
  2. Original Size: Displays the image at the size it was when it was uploaded.
  3. Custom/Advanced: Resizes the image based the height and width you provide (in pixels).
    • Scale Proportionally: Enter a width OR height, not both. The other number will be calculated automatically. Use pixels, not percent.
  4. Border tab: Here you can give your image a border and padding.
    • Border: Enter a number in pixels. Please keep the color black.
    • Padding: Enter a number in pixels to give your image vertical (top and bottom) or horizontal (left and right) padding.
  5. Press Save to submit your changes.

Image Alignment

If you would like to have text wrap around your image, you need to change the alignment.

Image alignment

Selecting "Left" will have the image on the left and the text wrapping to the right.

Alternate Image Text (Flyover Text)

Alternate image text is printed in place of your image for people with visual disabilities who are using screen readers.

  1. Enter a brief description of the image.

Link

Button to edit the image's link

  1. If you would like to make this image a link, press Edit.
  2. To link to a page within our site, or an external page, select Link to Existing Page, Uploaded Document or URL.
  3. Press Next.
  4. If this is a CommonSpot page, select CommonSpot Page, Uploaded Document or External URL and press Page Gallery.
    1. Choose the subsite the page you want to link to resides in.
    2. Click Filter.
    3. Click on the page you want to link to.
    4. Click Use Highlighted Item.
  5. If this is an external page, select External URL or Relative Internal URL.
    • Paste in the full URL to the page.
  6. Press Save.

Finish Inserting the Image

  1. When you are satisfied with your choice, press Save.

Edit an Image in a Text Block

To edit an image in CommonSpot, do the following:

  1. Click on the image.
  2. Click on the image icon.

Image icon in the formatted text block editor

  1. Make your desired changes.
  2. Press okay.

 

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.