Images In Text Area

Images can be added directly into a Text Area to complement the content on your pages. Once an image is added, there are a variety of ways in which it can be styled.



Adding an Image

To add an image through the Text Area, follow these steps.

    .1Place your cursor where you'd like to embed the image, then click on the Media icon.
    .2A new window will appear where you can add a new image or even select an existing image/video/file. Choose the desired image from your computer and then select Upload and Continue:
    .3The following window will appear. You are able to rename your photo if you wish, as well as provide additional information about it. Using a descriptive image name will help you find it in your media library later.

Decorative Image

There is a slider labeled "Decorative Image" that appears here. It defaults to being "on" but is very important to evaluate.
An image is considered "Decorative" if it doesn't provide any relevance to the page. For instance, if you are simply adding color to the page or generic imagery to a page, you would leave this slider as is. However, in most cases, you will need to turn off this slider and provide Alt Text.

Using Alternative Text

On the other hand, if your image is relevant to the information on the page, you would uncheck this slider and provide alternative text, described below. An example of a non-decorative image would be a photo that shows members of your department doing something, such as a faculty member receiving an award.

What is Alt Text?

Images on web pages provide not only visual appeal, but many times also convey important information. Alt Text improves accessibility by providing a text equivalent of the information presented visually. Including alt text with your images ensures all individuals, regardless of visual ability, can engage with your content. Alt text should be:
  • Accurate: including spelling, grammar, and proper punctuation.
  • Concise: using the fewest words possible while providing a meaningful description for the image.
  • Equivalent: presenting the same content and/or function of the image.
Assistive technologies will announce when an object is an image, so including this information is redundant and not necessary.

Once you determine your image is more than a simple decoration, uncheck the "Decorative Image" slider. This will change the options on the screen to include a field for Alternative Text. Below this field is Help Text which links to the Stanford Office of Digital Accessibility, where you can find  more information about using Alt Text.  In this example, we might write something concise like "Professor Carolyn Bertozzi poses with President Biden after receiving the Nobel Prize."

Caption/Credit

When you wish to include a caption or provide credit for a photo, you can include this text in the Caption/Credit box. Text can be styled using several of the different styling options (see the  Editing Your Text⁠  guide for specific information about text formats), and is limited to 160 characters.

Any captions or credits will be displayed as overlay text on the bottom corner of your image. See our  website of examples  to view what this will look like with your specific theme and color palette.

Changing the Focal Point

Focal Point is feature that allows you to choose from where the image crops. The focal point defaults to the center of the image, both horizontally and vertically. To change this, simply drag the plus sign to the desired focal point of your image, such as around the eyes and nose on a person's face.

Setting the focal point can be especially helpful when resizing the image. For more details, see the guide on  ⁠⁠Setting the Focal Point of an Image (Image Cropping)⁠ .

Save and Insert

4. Once you have finished setting up your image, click the button to "Save and Insert."

Formatting and Styling an Image

To change the way your image appears on your page, you'll need to access the Media Toolbar. To do so, simply click on the media item and use the buttons that appear to perform actions including: adjust alignment, change size and scale, override the caption/alt text, toggle captioning, and provide a link. Each button's function will appear when you hover over it.

Toolbar Functions

Toggle Caption On

Toggling captions allows you to choose whether or not the image caption is visible on the screen. The caption will always be visible to users when they hover over the image, but this tool provides the option to control whether or not it is displayed outright.


Link Media

This is the hyperlink button, where you can add internal/external links to the image. You can also link to PDFs uploaded onto your site.


Override Media Image Alternate Text

You may have inserted an image from your media library that was previously uploaded. Perhaps the alt text doesn't read the way you'd like it to in this particular instance. You can now edit the alt text on a case by case basis by clicking this button. Doing so allows you to customize your alt text when one image is used in multiple places.


Adjust Image Size and Scale

Clicking here will pull up a dropdown menu.
Use this menu to adjust the size and scale of your image.


Break Text: Left or Center Aligned

Select one of these options if you wish for your image or video to be shown on its own line, with text located above and below. With this option, you can align your media to the left or center, as displayed in the corresponding icons.


Align Left or Right and Wrap Text

Select one of these options if you wish to have the nearby text wrap around your image or video. With this option, you can align your media to the left or right, as displayed in the corresponding icons.


Video Tutorial

The relevant content spans from 17:38-21:11.

https://youtu.be/vlapRoM5thU?si=oiXr_cwpFYZAtUni&t=1058