Single Image Element

Prerequisites

Step 1: Go Into Author Mode

1. Log in to CommonSpot.
2. Click on the pencil icon in the top-right corner of the page.
3. Select Work on this Page.
4. If someone else is already in author mode for that page, you will see a box pop up saying that the page is locked by another user.

Step 2: Insert the Single Image Element

1. Choose the container that you want the Single Image element to be in.
2. Click Insert new element at the bottom of the container.
3. In the Element Gallery, click on Image Elements.
4. Click on  Single Image (without header).

Step 3: Define the Single Image Element

1. The Single Image element is now inside your container.
2. Click Define Single Image (without header) element at the bottom of your container.

Image

If you have already uploaded your image, press Choose. Otherwise, press New and upload your image.

1. You now need to search for your image in the Image Gallery.
2. Enter your search terms (image title or keyword).
3. Choose a Subsite to search in (if you aren't sure, choose "/" and check "include child subsites" to search the whole site).
4. Once you have made your filtering decisions, press Search.
5. Browse through the results, and click on the image you want to use.
6. Click Use Highlighted Image.

Image Size

We recommend that you resize the image before uploading it. But here you can resize the image and give it 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.

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

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.
5. 1. Choose the subsite the page you want to link to resides in.
   2. If you don't see the page you are looking for, change the Category to All Categories.
   3. Click Update Results.
   4. Click on the page you want to link to.
   5. Press OK.
6. If this is an external page, select External URL or Relative Internal URL.
7. • Paste in the full URL to the page.
8. Press Finish.

Finish Inserting the Image

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

Step 4: Publish Your Changes

At this point you have made two changes that need to be published; adding the image element to the container, and defining the image element. Both changes will need to be submitted before the public sees your image.