Work with images and other media in a text area

You can use images, videos, and other types of media on your site. The following guide covers adding an image in a text area. Adding other media in the text area works in a similar manner.

Add an image to a text area

You can place images in any text area that has the full text editing toolbar, such as the Text Area Paragraph or Body/Body Content fields.

In the text editor toolbar, click on the add media button:

This will cause a pop-up to appear, which will display your site's Media Library. By default, you will be in the image portion of the media library. You can then choose to upload a new image or select an image that has been previously uploaded.

Use an existing image

To use any image already uploaded to your site, you can browse or search your media library. 

Check the box on the upper right of the image you wish to select and then click on the Insert selected button.

Upload a new image

To add a new image, locate your new image on your computer drive. Once you find the image, choose from the following:

• Drag and drop the image within the Add file dotted lined box.
• Or, click Select file to find the image on your drive.
  

After the image appears in the Add file area, click Upload and Continue. 

Next, you will be prompted to add alternative text to describe your image. If this is an image of text or conveys important information, add that information in the Alternative text field. However, if this is simply a decorative image, leave the Alternative text blank and check the Decorative Image box.

Click the Save and insert button to save your changes and add the image to your text area.

Add line breaks

Once your image is in your text area, you will see arrows at the top and bottom of the image. If you click on those arrows, they will add a line break above or below your time.

Using the image toolbar to adjust your image

This section of the guide covers adjusting an image in your text area using the options available in the image toolbar, which looks like this:

Add a caption 

The caption spans the width of your image or other media. Any text wrapping you apply around your image or other media will also apply to the caption.

1. Click the Toggle caption on button to enter a caption. The Toggle caption on is the first item in the toolbar, (1) in the toolbar diagram at the top of this page.
2. Add your caption text.
3. You can use the text editing toolbar to adjust the styling in your caption or add links.
4. Click out of the caption box or Save to finish editing your caption. 

5. The image should now appear with a caption below the image. 

   

You may edit or remove a caption by clicking the same button, which will be labeled as Toggle caption off when a caption is present. Your caption text will not be saved if the caption is removed.

Add a link

You can link your image to another page or site, just like you can with text.

• Click on Link Media. The Link Media is the second item in the toolbar, (2) in the toolbar diagram at the top of this page.
• If you wish to link to another page on your site, start typing the page you would like to link to and select it from the list.
• If you wish to link to another site, enter the full URL
• Tab to or click on the green checkmark to accept the link.

To edit an existing link or remove a link from an image or other media, click on the Link Media button. If a link is present, you will get options to edit or unlink. 

Best Practices

You should never have a link that is created solely from a linked image. For all linked images provide alt text that will explains what happens when a visitor clicks the link. 

Override alt text

By default, the alt text set when the image was uploaded will be used. In some cases, you may need to set different alt text due to the context of the image on the page. 

• Click on Override media image alternate text. The Override media image alternate text is the third item in the toolbar, (3) in the toolbar diagram at the top of this page.
• Enter your new alt text.
• Tab to or click on the green checkmark to accept the alt text.

Image size options

We have provided some standard sizes so that you can create consistent displays quickly, when needed. You can also resize your images before uploading them to your site.

• Defaults. If you don't make any selection, your image will display at the full size of the image and centered.
• Large (480px wide, uncropped.) This will resize the image to 480px wide, only if it is larger than that size.  It will not crop the image.
• Large square (480px, cropped.) This will resize the image to 480px wide by 480px high, only if it is larger than that size.
• Medium (220px wide, un-cropped.) This will resize the image to 220px wide, only if it is larger than that size.
• Large square (480px, cropped.) This will resize the image to 220px wide by 220px high, only if it is larger than that size.
• Circle headshot (112px, cropped.) This will resize the image to 112px wide by 112 high, only if it is larger than that size. It will display as a circle. This is primarily used for displaying profile photos for people.
• Thumb (100px, cropped.) This will resize the image to 100px wide by 100px high, only if it is larger than that size.
• Thumb (100px, un-cropped.) This will resize the image to 100px wide, only if it is larger than that size. This is a great image size for displaying logos for affiliated groups.

Resize an image

• Click the View Mode drop-down menu. The View Mode drop-down menu is the fourth item in the toolbar, (4) in the toolbar diagram at the top of this page.
• Select one of the sizes listed above.

If you wish to change the size again, you may repeat this process. Resizing only resizes an image for display in this particular instance. You may continue to use the same image at other sizes throughout your site.

Tip: To control what is visible in the cropped area, see the section on the focal point tool on the Images page.

Alignment options

If you'd like your text to wrap around the image, you will need to use an alignment option. These directions assume you have placed your image above the text you would like to have wrap around the image, like the example below:

Hover over the image to get the image toolbar to appear. You should see your current selection highlighted in light blue. You can then choose from the options described below.

A note about alignment: the text editor display and section display while page editing may not always accurately reflect alignment. To see your alignment in action, save your page.

Break text

Break text is the fifth (5) item on the toolbar. This aligns the image with the left side of the text area and the text will sit above and below the image. 

Align left and wrap text

Align left and wrap text is the sixth(6) item on the toolbar. This aligns the image with the left side of the text area and the text will wrap around any available space to the right of the image

Align center and break text

Align center and break text is seventh (7) item on the toolbar. When you place a new image on your page, this is the default alignment. It will center the image in the text area and the text will sit above and below the image. 

Align right and wrap text

Align right and wrap text is eighth (8) item on the toolbar. This aligns the image with the left side of the text area and the text will wrap around any available space to the left of the image.

Note: Headers (h2, h3, h4, etc) do not support text wrapping. Headers will always start on a new line.

Best Practices

• Although Stanford Sites supports the addition of multiple images, you will want to be conscientious about the page load time for your visitors. We do not recommend that you add more than twenty (20) images per page, unless they are small images like those found on Lists Paragraph for people and news.